Website có tốc độ tải trang chậm là nguyên nhân quan trọng khiến bạn mất đi lượng khách hàng tiềm năng. Chính vì vậy mà ngay sau đây, WSU sẽ bật mí cho bạn mẹo tối ưu hóa CSS wordpress, JS để tăng tốc trang web hiệu quả.
Kiểm tra lại tốc độ tải trang với PageSpeed Insights
PageSpeed Insights là một công cụ hữu ích giúp bạn kiểm tra các vấn đề của trang web làm ảnh hưởng đến tốc độ tải của website. Công cụ miễn phí này có thể hỗ trợ quét cả phiên bản web trên desktop lẫn trên mobile.
Từ những vấn đề phát hiện ra thì bạn sẽ cần cải thiện và khắc phục. Ví dụ như trường hợp dưới đây thì mã CSS và JavaScipt đang là nguyên nhân làm chậm website.
>> Xem thêm: 5 điều cần chú ý khi tối ưu hoá theme WordPress
Cách giảm kích thước tài nguyên CSS, tối ưu hóa CSS wordpress và JavaScipt
Xác định phần code được rút gọn
Ở phần này, chúng ta sẽ thực hiện xóa bỏ các ký tự code chỉ giúp cải thiện việc đọc mà không hỗ trợ thêm bất kì chức năng nào khác. Giúp giảm được mức sử dụng băng thông và tốc độ tải trang.
Dùng PageSpeed Insights sẽ giúp xác định được phần code cần rút gọn. Bạn nhấp vào “Show how to fix” và thực hiện theo chỉ dẫn trong CMS (Hệ thống quản lý nội dung – Content Management System) hoặc FTP (Giao thức truyền tệp – File Transfer Protocol).
Ví dụ: Trang web của bạn chạy trên wordpress thì phần code sẽ được hợp nhất ở phần “Editor”. Phần này sẽ nằm ở tab “Appearance” từ trang dashboard chính.
WSU sẽ giúp bạn xác định phần code được rút gọn hiệu quả, tối ưu hóa CSS wordpress nhanh chóng. Giúp tối ưu hóa wordpress.
Tối ưu code tối ưu hóa CSS wordpress
Có thể sử dụng CSS Minifier để tối ưu code. Đây là một công cụ miễn phí và rất đơn giản, giúp tự động nén các nội dung CSS. Việc của bạn là chỉ cần dán code vào tường input, đặt mức nén và nhấp vào “Minify”.
Tùy thuộc vào kích thước code mà thời gian rút gọn code sẽ mất khoảng vài giây đến 1 phút. Phần code mới sau đó bạn có thể sao chép trở lại vào giao diện khách CMS hoặc FTP của bạn.
Lưu ý: Một điều bạn cần đặc biệt lưu ý, đó là nên tạo bản sao lưu trước khi thực hiện bất kì thay đổi nào của code website. Bạn có thể tạo bản sao dựa trên đám mây hoặc ngoại tuyến. Đây là cách đơn giản và dễ thực hiện.
Để kiểm tra lại việc tối ưu hóa đã hiệu quả hay chưa, bạn tiếp tục chạy tiếp một phân tích khác bằng PageSpeed Insights. Khi này thì tệp CSS mà bạn vừa nén sẽ không còn xuất hiện trong phần chi tiết của “Minify CSS” nữa.
Dùng tải không đồng bộ trên JavaScript
So với CSS thì việc nén JavaScript phức tạp hơn một chút. Có thể sử dụng JSCompress. Trước khi chạy code thông qua JSCompress thì bạn có thể cân nhắc việc tải mã không đồng bộ trước tiên. Còn gọi là “Lazy Loading”.
Để dùng tải không đồng bộ thì chỉ cần thêm thẻ “async” khi gọi tệp .js. Điều này có thể được thực hiện ở trong mã nguồn HTML của website.
Kết luận
Trên đây là những kiến thức về tối ưu hóa CSS wordpress để các bạn tham khảo. Mọi ý kiến thắc mắc các bạn đừng ngần ngại gửi về cho WSU hoặc chỉ cần Bình luận ngay dưới bài viết này.
Mặc dù có rất nhiều cách để thực hiện tối ưu hóa css wordpress, tuy nhiên để thực hiện đòi hỏi bạn cần có một nền tảng kiến thức lập trình tốt. Chính vì vậy, có rất nhiều người khó khăn trong việc tự thực hiện tối ưu code css, JS.
Để giải quyết vấn đề khó khăn này, chúng tôi – WSU sẽ là người thay mặt bạn tối ưu toàn diện website. Từ đó giúp tăng tốc website lên nhanh chóng. Để tham khảo dịch vụ, hãy click vào link sau:
