Hướng dẫn tối ưu css, javascript cho wordpress

Bài này thuộc phần 2 nằm trong tổng 2 phần của serie Tăng tốc wordpress

Việc tối ưu hóa Css và Javascipt cho wordpress nói riêng và tất cả các mã nguồn khác nói chung là một trong những công việc quan trọng. Đây là một trong những yếu tố giúp website bạn tiết kiệm được thời gian tải những tệp tin css và javascript khác nhau có trên website để đạt được điểm số cao nhất trên Google PageSpeed.

Nén Css và Javascript.

Nén css và Javascript là công việc chúng ta làm để giảm dung lượng của các tệp tin css hoặc javascipt. Nó dựa trên các yêu tố như sau để nén.

  1. Khoảng trắng giữa các dòng.
  2. Cú pháp trùng lặp.

Bởi vì khi trình duyệt tải trang web nó sẽ đọc nội dung từ trên xuống dưới, chính vì vậy những dòng trắng xuất hiện nhiều hoặc các cú pháp giống nhau sẽ làm tăng dung lượng của tệp tin và khiến trình duyệt phải đọc nhiều lần.

Nén CSS online

Đầu tiên hãy truy cập https://csscompressor.com/ sau đó copy toàn bộ files css cần nén bỏ vào CSS Source Code Input. Sau đó sẽ có vài thiết lập nhỏ trước khi bắt đầu quá trình nén.

nen-css-online

Ở phần Compression Level sẽ có một vài lưu ý:

  1. Highest (no readability, smallest size) : Nén ở mức cao nhất không thể đọc được và kích thước sẽ là nhỏ nhất.
  2. High (moderate readability, smaller size) : Tệp tin vừa phải dễ đọc, kích thước nhỏ.
  3. Standard (balance between readability and size) : Cân bằng giữa khả năng đọc và kích thước.
  4. Low (higher readability) : Khả năng đọc cao.

Ở trong 4 cái bạn nên cân nhắc xem sau này bạn có muốn chỉnh sửa lại tệp tin css đó nữa không, từ đó đưa ra phương án nén tốt nhất. Cá nhân mình sẽ chọn High (moderate readability, smaller size).

Nén Javascript online

Để có thể nén javascript đầu tiên hãy truy cập https://javascript-minifier.com/ sau đó copy toàn bộ files js của bạn vào ô Input JavaScript sau đó nhấn Minifi đợi một chút sau khi quá trình nén thành công bạn sẽ nhận được bộ js mới ở bên ô Minified Output.

Công việc của bạn bây giờ là paste nó vào tệp tin trên website của mình sau đó save lại là xong.

Sử dụng plugin tạo cache

Mặc định khi trình duyệt load nội dung website của bạn hoặc tải lại trang nó sẽ phải load lại toàn bộ tài nguyên trên website, chính vì lý do này sẽ gây ra hiện tượng website load chậm. Thay vì việc mỗi lần tải lại như vậy chúng ta sẽ sử dụng plugin tạo cache để lưu lại những nội dung giống nhau lên trình duyệt của người dùng.

plugin-cache

Hiện tại mình có sử dụng qua một số plugin tạo cache wordpress chất lượng và hiệu quả rất là tốt, bạn có thể tải về và dùng thử:

  1. W3 Total Cache
  2. WP Super Cache
  3. WP Fastest Cache

Như vậy là mình đã chia sẻ đến các bạn cách để tối ưu css và javascript cho wordpress, nếu bạn thấy bài viết hữu ích đừng quên like và share giúp mình nhé.

Bài viết khác cùng serie

Tối ưu điểm số Google PageSpeed Insights 90+ cho wordpress

Bảo Nguyễn

Đam mê dòng nhạc Bolero, thích con gái công sở và thích bàn luận quân sự.

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz

Create Account



Log In Your Account