18 tháng 11, 2019

Thủ thuật Tối ưu PageSpeed Insights

Tags

PageSpeed Insights

PageSpeed Insights là một phần mềm miễn phí của Google, cho phép bạn đo lường thời gian load một trang blog/web và chỉ ra chi tiết những nguyên nhân, yếu tố ảnh hưởng tới tốc độ tải trang cũng như đưa ra được gợi ý cho bạn để nâng cao hiệu suất. Bài viết sẽ chỉ ra những thủ thuật để tối ưu tốc độ tải trang, từ đó tăng điểm của trang với Google rank.



Đây là những thông số hiện giờ của blog IT Bình Dân

pagespeed-insights-for-mobile

pagespeed-insights-for-desktop

Thông số trên quả là quá tệ nhỉ. Blog hiện dùng một template khá cũ, từ những năm 2015 (tới giờ cuối 2019 tức gần 5 năm rồi), và một số rác HTML code do template này tôi lấy từ trang Chế Bình Dân sang dùng, vì rất thích cái template này.

Để Tối ưu PageSpeed Insights cho Blogger thì thang đo đã liệt kê ra những yếu tố ảnh hưởng tới tốc độ tải trang, vậy giờ bạn chỉ cần tối ưu những yếu tố đó là được. Hãy cùng tôi tối ưu template blogger IT Bình Dân nhé.

Mục lục

  1. Google PageSpeed Insights là gì?
  2. PageSpeed Insights cung cấp loại thông tin nào về website?
  3. PageSpeed Insights chấm điểm như thế nào?
  4. Ta cần bao nhiêu điểm PageSpeed?

  1. Những yếu tố CẦN để tối ưu điểm số Pagespeed Insights
  2. Gzip Compression
  3. Tối ưu hình ảnh bằng cách nén giảm dung lượng
  4. Tăng tốc độ tải trang Blogger khi dùng Font Awesome, Javascript, Google Font
  5. Tinh giản code cho CSS, HTML, Javascript của trang
  6. Tránh bị render blocking khi tải trang



Google PageSpeed Insights là gì

1. Google PageSpeed Insights là gì ?

PageSpeed Insights (từ đây gọi tắt là PSI) sẽ đo hiệu năng (performance) của một trang web/blog trên thiết bị mobile và desktop, sau đó cung cấp các đề xuất để cải thiện cho trang đó. Từ cuối năm 2018 trở đi, PageSpeed Insights được mua lại bởi Lighthouse và các kết quả báo cáo trong PSI dựa trên API Lighthouse.

Bản thân việc đo tính performance, Google hiện có rất nhiều dịch vụ ngoài PSI:
  • Lighthouse: là một dev tools của Google, thu thập dữ liệu về hiệu suất và phân tích vấn đề kỹ thuật cho developer.
  • WebPageTest: tool để bạn kiểm tra hiệu năng, tối ưu hiệu suất cho các thiết bị
  • Chrome DevTools: một bộ tools dành cho các developer tích hợp ngay chính trong Google Chrome, cho phép bạn kiểm tra sức khỏe và xác định vấn đề ngay lập tức, bằng các tools như debugging CSS, prototyping CSS, debugging JavaScript, và phân tích load performance
  • TestMySite: chuyên dùng để test trang của bạn trên môi trờng giả lập mobile. Ứng dụng của Think with Google.
  • Think with Google tools: bộ tools tuyệt vời của Google chuyên dành cho developer nâng cao.
think-with-google-tools

Pagespeed Insight sẽ cho ra dữ liệu dưới hai dạng: Lab và Field. Đôi khi có thể hai thông tin ở hai mảng này đối lập nhau, vì nó dựa vào cơ chế đo lường riêng của mình, ví dụ như Field Data nói URL này gây lỗi slow, trong khi Lab Data lại nói rằng không.

Lab Data là môi trường test trang với các điều kiện kết cấu cho trước, còn Field Data là môi trường test thực tế.


Tham khảo thêm: About Pagespeed Insights
Có thể bạn quan tâmCác đoạn HTML và CSS code thông dụng

2. PageSpeed Insights trả về kết quả gì?


pagespeed-insights-result
pagespeed-insights-result


Speed score: điểm load trang chấm bởi Lighthouse

Field Data: dựa trên trải nghiệm thực tế của người dùng Chrome trong vòng ít nhất 30 ngày đối với trang (tức lượng traffic của trang và chất lượng traffic)

Lab Data: phân tích trên môi trường giả lập cho mobile

Opportunities: những cơ hội, khả năng gợi ý đưa ra nhằm giúp bạn "loại trừ" các yếu tố kém giảm điểm trang.

Diagnostics: những thứ gợi ý nên "đưa vào" trang để cải thiện tốc độ load.

Passed audits: những phần đã vượt qua bài test. Tuy bạn không phải lo nghĩ về phần này nhưng nên xem qua để hiểu vì sao chúng được "pass" để có khái niệm về cấu trúc dữ liệu của trang.

Bài liên quanBộ công cụ Kiểm tra Giao diện/Hiển thị cho Blog/Website

3. Cần chú ý tới mục nào để cải thiện PageSpeed Insights?



Các trường như Opportunities và Diagnostics không ảnh hưởng nhiều tới kết quả cuối cùng của điểm số của trang, mà là 6 mục trên. Bạn cần đọc tài liệu và xem những gợi ý (recommendations) của Lighthouse (khá là chi tiết, qua đó bạn học được rất nhiều thủ thuật hay khi làm web).


Xem thêm : Phân loại Pages trong Blogger bằng code


4. Cần bao nhiêu điểm PageSpeed Insights?


Tôi từng mất ăn mất ngủ khi trang của mình đạt chỉ  60, 70 điểm. Nhưng sau một thời gian, điểm số của nó thực sự không mang lại điều gì nhiều. Rõ ràng nó là một chỉ đó để đánh giá trang, đánh giá trải nghiệm người dùng, nhưng sự cách biệt giữa 50 điểm và 100 điểm không rõ ràng lắm, trừ khi bạn quyết SEO lên top 1 trong niche của mình.

Có rất nhiều trang web thuộc hàng top có điểm số Lighthouse chênh nhau khá lớn giữa hai nền tảng, mobile và desktop. Còn với bạn, tôi nghĩ, hãy thử cố gắng hết sức mình một lần dọn dẹp nhà cửa, và từ đó về sau có mua thêm đồ gì về nhà thì đo đạc kích thước hợp lý gọn gàng, để bạn không cần phải lo nghĩ về điểm số này nữa.

OK, vậy giờ chúng ta bắt đầu dọn nhà, một lần và mãi mãi nào.

Bài liên quan:



I/ Những yếu tố CẦN để tối ưu điểm số Pagespeed Insights


Tựu chung là những thủ thuật sau
  • Tránh chuyển hướng ở trang đích.
  • Bật chức năng nén dữ liệu gửi về trình duyệt.
  • Cải thiện thời gian phản hồi của máy chủ.
  • Cải thiện bộ nhớ đệm ở trình duyệt.
  • Nén các tài nguyên CSS và Javascript trên website.
  • Tối ưu hình ảnh bằng cách nén giảm dung lượng.
  • Tối ưu CSS trên website.
  • Thiết lập ưu tiên hiển thị nội dung trong website.
  • Bỏ chặn Javascript và CSS khi tải trang.
  • Sử dụng asynchronous scripts

Ngoài ra còn những thủ thuật sau để tối ưu Tần suất hiển thị:

  • Tránh sử dụng plugin để hiển thị nội dung.
  • Cấu hình viewport để hiển thị kích thước màn hình phù hợp.
  • Tối ưu các nút bấm hoặc liên kết trên website.
  • Sử dụng cỡ chữ phù hợp để hiển thị nội dung.


II/ Gzip Compression


Gzip là một công cụ để nén trang blog/web của bạn lại, nhằm giảm tối đa lượng truy vấn http/https để yêu cầu tải trang khi bắt đầu truy cập, và như vậy cũng đồng nghĩa với việc giảm thời gian tải trang. Giải pháp nén là giải pháp tốt nhất để giảm tải cho băng thông.

Với Blogger, nhiều nguồn tin nói rằng Google đã thực hiện điều đó giúp bạn rồi, nên ta không cần tự nén nữa. Không chỉ Blogspot mà nhiều dịch vụ khác của Google cũng được tích hợp với gzip nên bạn không cần thực hiện nén nữa, nhưng nếu bạn dùng Wordpress, hãy nhớ kèm bước này để tối ưu tốc độ tải trang cho wordpress.

Giả sử như bạn mở trang blog này, và bạn gửi một request tới một file trên webserver và file đó có dung lượng khoảng 200KB HTML file. Trình duyệt web (giả sử bạn dùng Chrome) của bạn sẽ gửi yêu cầu tới web server và hỏi file đó. Web server phản hồi bằng một file 200KB và gửi trả lại cho trình duyệt. Chrome nhận file 200KB đó, hiển thị nó lên màn hình giao diện của nó cho bạn. Đó là một quá trình bình thường. Còn khi có gzip, thì việc nó sẽ thế này. Web server sẽ dùng gzip để nén file 200KB đó thành giả sử 40KB đi, ở ngay tại server, rồi gửi cho Chrome, Chrome sẽ giải nén ra lại 200KB rồi hiển thị, cho kết quả như truường hợp trên. Đó là lợi ích của gzip compression.


III/ Tối ưu hình ảnh bằng cách nén giảm dung lượng


Cái này tôi đặc biệt quan tâm, và luôn làm với mỗi hình ảnh trước khi up lên blog. Tôi làm theo bài ở đây, tạo command line shortcut.

Tối ưu hình Ảnh đăng Blog bằng JPEGTRAN

Việc nén hình ảnh cần cân bằng giữa hiệu quả thị giác và dung lượng ảnh, vì hình ảnh là những thứ đem lại trải nghiệm người dùng cao. Có nhiều cách và nhiều tools, và cách trên là tôi thấy tốt nhất, bởi được Google đánh giá chuẩn.

IV/ Tăng tốc độ tải trang Blogger khi dùng Font Awesome, Javascript, Google Font


Mục này liên quan tới các thư viện và bạn trỏ tới thư viện đó, khiến việc load trang phải chờ load xong toàn bộ thư viện đó thì mới hiển thị được hình ảnh, hiệu ứng Javascipt, font chữ => Cái này nó gọi là Block rendering, tức nó sẽ chặn tải trang cho tới khi tải xong sources font, Javascipt. Khi tải xong thì trình duyệt mới render HTML của trang ra thành hình ảnh hiển thị cho bạn.

Kỹ thuật để tối ưu hóa tham chiếu tới các thư viện này tôi có bài viết ở đây:

Tăng tốc độ tải trang Bloggerr khi dùng Font Awesome, Javascript

Gồm có các kỹ thuật như: giản lược code cho CSS, Javascript, xử lý code Javascript ngắn và dài, chỉ định tải code chống render blocking.


V/ Tinh giản code cho CSS, HTML, Javascript của trang


Với CSS và Javascript các bạn có thể tham khảo ở bài này:

  1. Giản lược code CSS
  2. Giản lược code Javascript

Còn với HTML, các bạn có thể sử dụng tool HTML Minifier
Nhớ là luôn lưu bản thường lại để dễ chỉnh sửa, vì khi code được Minify thì chỉ có máy mới đọc được thôi, vì nó lược bỏ mọi dấu cách, những thứ để người dùng dễ đọc code hơn.


VI/ Tránh bị render blocking khi tải trang

Kết quả Pagespeed Insights sẽ cho bạn những URLs nào có khả năng chặn không cho trình duyệt hiển thị trang, bởi nó chờ load xong những URL đó đã (như URL CSS, Javascript, Font,..)

Đây là vấn đề cũng rối rắm, nhưng bạn đừng sợ, biết tới đâu làm tới đó, vì thật ra khi tải lần đầu nó bị block thôi, chứ còn các lần sau đã có cache rồi nên cũng không đáng kể.

Đầu tiên bạn nên đảm bảo nguồn CSS, font nên được tải từ nguồn tốt, và không dùng nhiều nguồn bootstrap, font khác nhau.

Sau đó là đảm bảo các URLs được Lighthouse liệt kê không chứa/mắc phải những lỗi trong bài hớng dẫn dưới đây: Eliminate render-blocking resources

Cám ơn bạn theo dõi các Thủ thuật Tối ưu PageSpeed Insights cho Blogger
Chúc các bạn thành công!

Related Posts