Tối ưu tốc độ website đạt 100/100 điểm với Google PageSpeed Insights

Chắc chắn rằng với một Online Marketer hay SEOer chuyên nghiệp và có kinh nghiệm thì không ai lại không biết đến Google PageSpeed Insights tool - công cụ phân tích nội dung của trang web, sau đó tạo đề xuất nhằm giúp trang đó hoạt động nhanh hơn. Nếu bạn đã biết PageSpeed ​​Insights rồi, đã bao giờ bạn tối ưu website của bạn lên 100/100 điểm ?

PageSpeed ​​Insights là gì? Giới thiệu đôi chút về PageSpeed Insights

PageSpeed ​​Insights là công cụ đo hiệu suất của một trang web với thiết bị di động và máy tính để bàn. Nó tìm nạp url hai lần, một lần với một user-agent(có thể hiểu là thiết bị) di động, và một lần với user-agent desktop.
PageSpeed ​​Insights kiểm tra để xem liệu một trang đã áp dụng các phương pháp tối ưu về hiệu suất chưa và cho điểm số từ 0 đến 100 điểm rồi đánh giá vào một trong ba loại sau:

• Good: Trang áp dụng hầu hết các phương pháp tối ưu hiệu suất tốt nhất và mang lại trải nghiệm tốt cho người dùng.
• Needs work: Trang thiếu một số tối ưu hóa hiệu suất phổ biến có thể dẫn đến trải nghiệm không tốt cho người dùng. Và đưa ra các đề xuất bên dưới.
• Poor: Trang không được tối ưu hóa và có khả năng mang lại trải nghiệm kém cho người dùng. Và đưa ra các khuyến nghị bên dưới.

Cách tối ưu website đạt điểm cao với Google PageSpeed Insights

Công việc tối ưu và tăng trải nghiệm cho trang cần sự chung tay góp sức của người làm nội dung, người lập trình và cả người cài đặt server duy trì web. Chúng ta sẽ đi vào từng mục của các phương pháp được áp dụng ở ví dụ của trang nhận được 100/100 điểm từ PageSpeed Insights

1. Bật nén cho server

Điều kiện: Quy tắc này kích hoạt khi PageSpeed ​​Insights phát hiện rằng các tài nguyên của web được nén từ server khi truyền qua các HTTP requests. 

Công việc cần làm: Hãy nói với người phụ trách server cài đặt module gzip. Gzip là một phương thức để nén và làm giảm dung lượng các file ở server trước khi gửi đến client (ví dụ như trình duyệt). Nó giúp tiết kiệm băng thông, tăng tốc độ tải của website

2. Giảm thiểu tài nguyên (HTML, JavaScript, CSS)

Điều kiện: Quy tắc này kích hoạt khi PageSpeed ​​Insights phát hiện rằng kích thước của các tài nguyên trên trang của bạn đã giảm xuống thông qua việc minify.

Công việc cần làm: Hãy nói với người lập trình web làm các công việc minify html, js, css, bỏ những dòng comment trong code, xóa những đoạn code không sử dụng, đặt tên các biến và hàm ngắn gọn, xóa bỏ các dòng trắng gây tăng dung lượng

3. Giảm thời gian phản hồi của máy chủ

Điều kiện: Quy tắc này kích hoạt khi PageSpeed ​​Insights phát hiện ra rằng thời gian phản hồi của máy chủ của bạn ở mức nhanh hơn 200 ms.

Công việc cần làm: dùng server ngon (chất lượng về cả phần cứng và mạng), đặt gần người dùng mà website hướng đến

4. Loại bỏ JavaScript chặn hiển thị trong nội dung trong màn hình đầu tiên

Điều kiện: Quy tắc này kích hoạt khi PageSpeed ​​Insights phát hiện rằng HTML không gọi JavaScript bên ngoài đang chặn trong phần trên màn hình đầu tiên của trang (là phần màn hình đầu tiên nhìn thấy khi vào web mà chưa cuộn chuột xuống bên dưới)

Công việc cần làm: dành cho người lập trình web, hơi phức tạp nhưng là vấn đề hầu hết các website đều gặp nên tôi sẽ đi sâu hơn chút, sẽ dễ hiểu hơn nếu bạn là lập trình viên hoặc người có chút kiến thức về kỹ thuật ...

- Đôi chút về render page: Trước khi trình duyệt render một page nó sẽ xây dựng môt DOM tree bằng cách phân tích HTML. Trong quá trình này khi gặp bất cứ một đoạn script nào nó phải dừng lại và xử lý đoạn script đó trước khi tiếp tục phân tích HTML. Trong trường hợp đoạn script bên ngoài phải chờ load thì đó sẽ trở thành 1 nguyên nhân trì hoãn quá trình render

- Cách loại bỏ JavaScript chặn hiển (Remove render-blocking javascript):

   + Inline Javascript: Bình thường các script từ link bên ngoài buộc trình duyệt phải đợi cho đến khi nó được tải thành công, nếu script nhỏ, bạn có thể dùng Inline JavaScript (viết luôn javascript)

   + Make JavaScript Asynchronous: Theo mặc định JavaScript làm nghẽn quá trình DOM construction, do đó làm tăng thời gian render. Để ngăn chặn điều này chúng ta có thể dùng thuộc tính async trên thẻ script: < script src="”my.js”" async >

   + Defer loading of JavaScript: Thêm thuộc tính defer trên thẻ script: < script async src=”my.js” >

   Sự khác nhau giữa 2 thuộc tính async và defer 

Bình thường khi không có 2 thuộc tính này trong thẻ script: tập tin html sẽ được phân tích cho đến khi gặp phải script, ở thời điểm này quá trình phân tích sẽ bị dừng lại và sẽ tiến hành load file script sau đó phân tích script xong mới tiến hành tiếp.
< script async >: script sẽ được tải trong quá trình phân tích HTML nhưng quá trình phân tích HTML sẽ bị pause để thực hiện phân tích script xong mới tiến hành tiếp.
< script defer >: script sẽ được tải trong quá trình phân tích HTML và đươc phân tích khi quá trình phân tích HTML xong

5. Loại bỏ CSS chặn hiển thị trong nội dung trong màn hình đầu tiên

Điều kiện: Quy tắc này kích hoạt khi PageSpeed ​​Insights phát hiện rằng HTML không gọi CSS bên ngoài đang chặn trong phần trên màn hình đầu tiên của trang (là phần màn hình đầu tiên nhìn thấy khi vào web mà chưa cuộn chuột xuống bên dưới) - tương tự như JavaScript chặn hiển

Công việc cần làm: dành cho người lập trình web, cũng hơi phức tạp nhưng là vấn đề hầu hết các website đều gặp nên chúng ta sẽ đi sâu hơn

- Inline CSS: chọn các đoạn css tác động lên màn hình đầu tiên viết luôn ra phần thẻ head của trang

- Load deferred styles: load các file styles sau cùng nhờ javascript

6. Nâng cao lưu vào bộ nhớ cache trong trình duyệt

Điều kiện: Quy tắc này kích hoạt khi PageSpeed ​​Insights phát hiện ra rằng phản hồi từ server của trang không bao gồm chỉ định cache hoặc các tài nguyên được chỉ định cache trong một khoảng thời gian ngắn. Hiểu đơn giản là khi trình duyệt nhận các dữ liệu như file ảnh, file js, css ... từ server thì ngoài nội dung, server nên khai báo thêm rằng đây là tài nguyên không thay đổi hoặc 1 năm nữa mới thay đổi, trình duyệt hãy lưu lại (cache) đi lần sau đỡ phải yêu cầu lại, tốn tài nguyên mạng

Công việc cần làm: danh cho phụ trách server thực hiện cộng việc chỉ định browser cache cho các tài nguyên. Nếu cần bạn có thể tìm hiểu kỹ hơn ở bài Cache trình duyệt (browser cache) cho website trên blog của tôi.

7. Tối ưu hóa hình ảnh

Điều kiện: Quy tắc này kích hoạt khi PageSpeed ​​Insights phát hiện ra rằng những hình ảnh trên trang đã được tối ưu hóa để giảm bớt kích thước tệp của chúng mà không ảnh hưởng đáng kể đến chất lượng hình ảnh của chúng.

Công việc cần làm: dành cho người lập trình web và người làm nội dung:

- Gọi đúng kích thước ảnh với khung hiển thị, ví dụ khung hiển thì 300px x 300px đừng gọi ảnh có kích thướng 1000px x 1000px
- Nén ảnh trước khi lên web, các bạn làm nội dung hay dùng photoshop để lưu ảnh nên chọn "File > Save for Web & Devices (Alt Shift Ctrl S)" thay vì "Save As (Ctrl S hay Ctrl Shift S)"

Kết luận

Khi bạn SEO một website, việc tối ưu tốc độ website và trải nghiệm người dùng là điều tối quan trọng. Trong vật lý động học khi vật đang chuyển động đều, ở "điều kiện lý tưởng" không ma sát, vật sẽ chuyển động mãi mãi; khi có ma sát vật sẽ dừng lại sau một khoảng thời gian, ma sát càng lớn, dừng lại càng nhanh. Trong SEO website cũng vậy, tốc độ và sự tối ưu website như một phần ma sát quyết định những gì bạn làm có lên được không. Website không tối ưu bạn đẩy càng vất vả. Ở bài viết này tôi đã cùng các bạn đưa ra "điều kiện lý tưởng" để bạn SEO web, đẩy từ khóa dễ dàng hơn.

Hi vọng với toàn bộ những gì tôi đã chia sẻ sẽ giúp bạn trong quá trình tối ưu tốc độ website và trải nghiệm người dùng