Tối ưu Google Pagespeed Insights cho WordPress

SERIESNâng caoDev

Bài 2 / 2· 100%

Tối ưu Google Pagespeed Insights cho WordPress – Phần 1
→ Tối ưu Google Pagespeed Insights cho WordPress – Phần 2

Kích hoạt async cho Javascript trên CloudFlare

Ở phần 1, chúng ta đã làm qua 4 quy tắc đầu tiên để tối ưu hoá website thân thiện với các tiêu chuẩn của Google Pagespeed Insights và nếu bạn kiểm tra thì có thể điểm số Google Pagespeed Insights của bạn đã cải thiện được một xíu.

Tiếp tục ở bài này, chúng ta sẽ làm tiếp tục 4 quy tắc tiếp theo đó là:

Làm nhỏ tài nguyên CSS và Javascript trên website.
Nén dung lượng hình ảnh trên website.
Tối ưu việc chèn CSS.
Thiết lập thứ tự ưu tiên nội dung.

Làm nhỏ CSS và Javascript

Trong một website WordPress, bạn có thể sẽ thấy website mình có chèn nhiều tập tin CSS và Javascript riêng biệt với nhau. Nhưng bạn có biết là trình duyệt khi tải một website, nó chỉ tiến hành gửi tối đa khoảng 10 request đồng thời và sau khi 10 request đó được tải xong nó sẽ tiếp tục gửi request cho các nội dung khác. Và dĩ nhiên, thứ tự các tài nguyên được nhận request sẽ đánh dấu từ trên xuống dưới trong mã nguồn website của bạn ngoài front-end.

Các bạn xem qua ví dụ sau:

HTMLCopy

<!DOCTYPE html>

<html>

    <head>

        <title>Title Web</title>

        <!&#8211;Javascript của website&#8211;>

        <script src="js/script1.js"></script>

        <script src="js/script2.js"></script>

        <script src="js/script3.js"></script>
        <!&#8211;CSS của website&#8211;>

        <link rel="stylesheet" href="css/style1.css" />

        <link rel="stylesheet" href="css/style2.css" />

        <link rel="stylesheet" href="css/style3.css" />

    </head>

    <body>

        <p>Lorem lipsum</p>

    </body>

</html>

Bạn thấy chúng ta có 3 tập tin Javascript và 3 tập tin CSS. Điều này có nghĩa là trình duyệt của bạn sẽ tốn mất 6 request để xử lý các tập tin này. Vậy tại sao chúng ta không tiết kiệm request mà trình duyệt gửi đi bằng cách gộp 3 tập tin Javascript thành 1, và gộp 3 tập tin CSS thành 1? Kỹ thuật này chúng ta gọi nó là Minify CSS và Minify Javascript.

Ngoài ra, kỹ thuật Minify còn áp dụng thêm một cách nữa đó là loại bỏ các khoảng trắng và gom toàn bộ nội dung trên cùng một hàng. Cái này bạn có thể xem mã nguồn của Thachpham.com là thấy.

Sử dụng plugin

Lưu ý, cách này có thể làm giao diện của bạn bị lỗi. Nếu bạn dùng máy chủ riêng thì nên sử dụng Google Pagespeed để làm nhỏ CSS và JS mà không bị lỗi.

Có 2 plugin mà bạn có thể sử dụng để làm việc này, đó là Speed Booster Pack (nên dùng), Better WP Minify của Khang Minh thần thánh hoặc W3 Total Cache.

Thiết lập Better WP Minify

Thiết lập plugin Better WP Minify để nén CSS và Javascript

Thiết lập Speed Booster Pack

Thiết lập plugin Speed Booster Pack để nén CSS

Thiết lập W3 Total Cache

Bạn vui lòng xem hướng dẫn này để biết thêm chi tiết.

Sử dụng Google Pagespeed

Nếu bạn có dùng Google Pagespeed thì thêm các filter này vào để sử dụng.

NGINX

pagespeed EnableFilters combine_css,rewrite_css,rewrite_javascript,combine_javascript;

Apache

ModPagespeedEnableFilters combine_css,rewrite_css,rewrite_javascript,combine_javascript

Nén dung lượng hình ảnh

Việc giảm các dung lượng hình ảnh rất quan trọng trong việc tăng tốc website cũng như tiết kiệm băng thông cho website. Bởi vì một tấm ảnh có thể sẽ có dung lượng khá nặng mà bạn có thể giảm dung lượng nó xuống mức thấp nhất mà vẫn giữ nguyên chất lượng hình ảnh, hoặc chất lượng giảm xuống rất ít.

Nên xem thêm: Tối ưu hình ảnh trên website đúng cách

Nén ảnh trước khi upload

Mình khuyên thật lòng bạn nên sử dụng các phần mềm hỗ trợ nén ảnh để giảm bớt dung lượng rồi hãy upload lên. Bạn có thể sử dụng các phần mềm như Ceasium (Windows) hoặc ImageOptim (Mac).

Sử dụng plugin nén ảnh trong WordPress

Nén ảnh trong WordPress với EWWW Image Optimizer

Nếu bạn đã có rất nhiều ảnh thì có thể sử dụng các plugin tự động nén các ảnh upload lên và nén các ảnh đã có trong thư viện như WP Smush hoặc EWWW Image Optimizer. Nếu bạn sử dụng máy chủ riêng, thì hãy sử dụng EWWW Image Optimizer và cài WP-CLI vào, sau đó sử dụng lệnh wp help ewwwio optimize --allow-root để xem cách nén nhanh bằng lệnh.

Tối ưu việc chèn CSS

Quy tắc này nghĩa là chúng ta sẽ tối ưu việc xử lý chặn hiển thị tập tin CSS bên ngoài (External Stylesheet), nghĩa là các đoạn chèn CSS bằng cách nhúng tập tin CSS vào website bằng thẻ <link> và nó đều thuộc loại render-blocking (chặn hiển thị).

Như Google giải thích ở đây, mỗi khi trình duyệt tải trang thì nó sẽ xử lý các nội dung trong trang hiện tại trước rồi mới gửi các request đến các tập tin bên ngoài để nó xử lý sau, bao gồm các tập tin CSS và Javascript được nhúng vào website. Điều này có nghĩa là nếu website bạn có nhiều tập tin CSS được nhúng vào thì trình duyệt sẽ mất thêm thời gian đợi để xử lý các tập tin đó.

Thứ tự hiển thị khi trình duyệt tải trang

Lời khuyên tối ưu

Theo Google, khi bạn thiết kế website thì hãy hạn chế việc tạo ra nhiều tập tin CSS khác nhau để nhúng vào website, và các đoạn CSS ngắn thì có thể nhúng trực tiếp vào website theo kiểu inline-style. Và nếu website bạn có một tập tin CSS lớn, thì hãy áp dụng kỹ thuật chỉ tải các đoạn CSS cần thiết và nhúng inline các đoạn CSS cần thiết đó vào website (xem thêm ở dưới).

Ngoài ra, bạn cũng tránh việc nhúng inline CSS vào các thuộc tính HTML kiểu <span style=”color: red”>… vì cách nhúng này bị chặn bởi Content Security Policy.

Tải inline các đoạn CSS cần thiết

Kỹ thuật này nghĩa là chúng ta sẽ sử dụng Javascript để điều hướng cho website tự lấy các đoạn CSS trong một tập tin nào đó rồi nhúng inline vào nội dung của tập tin HTML trang hiện tại, sau đó nó sẽ tiếp tục tải không đồng bộ (Asynchronous) các đoạn CSS cần thiết khi người dùng kéo trang xuống.

Nếu bạn muốn biết tập tin CSS của bạn nó có những đoạn nào là những đoạn CSS ở lần tải đầu tiên thì có thể sử dụng công cụ Critical Path CSS. Và bạn có thể làm thủ công bằng cách nhúng đoạn CSS cần thiết đó bằng cách chèn inline.

Critical_Path_CSS_Generator_-ThachPham.Com

Nếu bạn là coder thì có thể xem qua bài Authoring Critical Above-the-Fold CSS của CSS-Trick để có thể sử dụng SASS + Grunt Task để tối ưu việc này.

Sử dụng Googe Pagespeed

Nếu bạn đang sử dụng công cụ Google Pagespeed thì thật đáng mừng là nó có một module cho việc này tên là prioritize_critical_css.

Sử dụng plugin WordPress

Nếu bạn không biết code mà cũng không dùng Google Pagespeed thì chắc chắn cách còn lại là sử dụng plugin trong WordPress để nó hỗ trợ làm việc này tự động. Một plugin làm việc này khá tốt đó là Speed Booster Pack, bạn bật tính năng tải CSS cần thiết như ảnh dưới.

Thiết lập thứ tự ưu tiên của nội dung trong website

Điều này có nghĩa là bạn sẽ cần đưa các nội dung cần thiết trong website lên đầu trang để nó tải trước thay vì tải các tài nguyên không cần thiết trước, bao gồm các đoạn Javascript hoặc Javascript từ bên ngoài (như các script của Facebook, Googe+,…).

Có một cách bạn có thể làm việc này đó là hãy đưa toàn bộ các file Javascript xuống footer, tức là phần bên dưới của trang để nó tải sau. Việc này bạn có thể dễ dàng làm được với plugin như W3 Total Cache, Speed Booster Pack và Scripts to Footer.

Sử dụng Javascript tải không đồng bộ

Kỹ thuật tải không đồng bộ nghĩa là Javascript sẽ tải mà không cần đồng bộ với việc tải trang, giống như AJAX bạn sẽ gửi nhận dữ liệu mà không cần tải lại trang thì gọi là không đồng bộ (viết tắt là Async). Nhưng trong trường hợp này, chúng ta sẽ sử dụng kỹ thuật tải không đồng bộ để chỉ định Javascript chỉ tải sau khi nội dung trên website tải xong, nhằm tránh việc website có quá nhiều Javascript sẽ tăng thời gian đợi.

Nếu bạn là coder

Khi nhúng Javascript vào website, bạn có thể sử dụng thuộc tính async nhúng vào thẻ <script> để chỉ định nó tải không đồng bộ.

HTMLCopy

<script src="demo_async.js" async></script>

Sử dụng plugin WordPress

Có rất nhiều plugin trong WordPress giúp website tự động đưa toàn bộ Javascript về dạng tải không đồng bộ mà bạn có thể xem tại danh sách này.

Sử dụng CloudFlare

Nếu bạn dùng CloudFlare thì không cần dùng plugin hay làm gì cả mà có thể kích hoạt tính năng Rocket Loader.

Lời kết phần 2

Kết thúc phần này, cộng với phần 1 thì chúng ta đã làm xong các quy tắc tối ưu tốc độ trên website rồi. Hãy lưu ý rằng trong bài này mình có nói qua việc nén Javascript và hãy nhớ rằng nếu website bạn dùng nhiều Javascript thì có thể sẽ bị lỗi, đó là lý do mà các bạn nên sử dụng càng ít Javascript càng tốt nếu muốn website đạt điểm cao nhất trong Google Pagespeed Insights.

Ở bài sau, cũng như bài cuối, mình sẽ nói qua một số quy tắc tối ưu trải nghiệm người dùng trên website để website thân thiện hơn.SERIESNâng caoDev