Trước đây việc tối ưu Google Pagespeed Insights là cực kì vất vả. Trước năm 2015 hầu như có đến 95% các Web đều không thể đạt >85 điểm trở lên (đạt màu xanh xinh được là ước mơ của bao người) trong 2 phiên bản Desktop và Mobile.
Thông tin cho rằng tại sao Website tôi nhanh nhưng Google Pagespeed Insights điểm thấp và cho rằng Google Pagespeed Insights không quan trọng => sẽ phân tích ở bên dướiXong gần đây hàng loạt các thuật toán Google đánh vào tối ưu trãi nghiệm người dùng trên Website đặc biệt tốc độ tải trang và tối ưu dành di động. Tại sao Google lại đưa vào các chỉ số này? Nó giúp ít gì cho người dùng?
 |
| Tối ưu Google Page Speed có nghĩa là Website sẽ tải nhanh hơn? |
Đưa điểm số Google Pagespeed Insights đã gần như chuẩn bị đưa vào các yếu tố xếp hạng SEO.
- Google Pagespeed Insights
- Mobile Friendly (Chuẩn Responsive trên các thiết bị)
- Test My Site - Think with Google (Tải web trên 3G)
- AMP
- Ưu tiên Index Mobile
- Https (SSL)
- Cấu trúc dữ liệu
Và dĩ nhiên rằng Google cập nhật âm thầm. Nhưng nếu thường xuyên theo dõi Google Webmaster Tools và Google Blog ta sẽ thấy những thông tin và cập nhật này.
I. Nhưng yếu tố Tốc độ tải Website
Để Website tải nhanh hay chậm phụ thuộc chính vào các yếu tố sau đây:
- Cấu hình máy tính của bạn và trình duyệt
- Tốc độ mạng, tốc độ phân giải DNS
- Tốc độ Hosting / Server
- Code Website / Gọi các thành phần web
- Data tải lên của người dùng (Nội dung, hình ảnh video...)
- Cảm giác của người dùng
- Số lượng Requests. Tuy cùng 1 Pagesize nhưng request càng nhiều lại càng chậm nhưng Google Insights lại không đánh giá nếu request này đã tối ưu. Nên nhiều trang web thiết kế ra icon website gộp lại thành 1 ảnh.
II. Yếu tố của Điểm Google Pagespeed Insights
Google Pagespedd Insights đánh vào 4 chỉ số quan trọng như sau
- Tối ưu CSS, Javascript, HTML (Code Web); Ảnh.. (Gọi chung là dữ tải lên của dữ liệu người dùng)
- Phản hồi máy chủ (Hosting, các Requests)
- Bố trí Code Web, tức phân bổ các thành phần gọi Javascript, CSS khỏi màn hình đầu tiên và ưu hiển thị nội dung
- Bộ nhớ đệm (Lưu Cache)
III. Điểm chung của tốc độ tải Web và điểm của Google Insights
Sau khi giao lại sự liên quan của Google Pagespeed Insights và tốc độ tải Website ta có một số điểm chung.- Dữ liệu tải lên của người dùng phải tối ưu (Ảnh, nội dung...vv)
- Phản hồi máy chủ (hosting và các Request hoặc các request từ Plugin, .js của bên thứ 3)
- Code Website phải tối ưu về Javascript, CSS, HTML. Nhưng Google Pagespeed Insights có thêm là việc bố trí code web để ưu tiên hiển thị nội dung ở màn hình đầu tiên
- Thời gian tải toàn trang
- Lưu Cache (Tải nhanh hơn khi đã được lưu Cache)
IV. Khác biệt của 2 phần trên
- Bố trí lại các thành phần của Code Web để ưu tiên màn hình đầu tiên
- Cảm giác khi tải theo cuộn chuột hoặc tải không đồng bộ để tạm hoãn tải.
- Thời gian tải toàn trang
Dưới góc độ 1 coder mình sẽ phân tích các điểm riêng để dẫn đến tình trạng này!
Website tải nhanh nhưng Google Pagespeed Insights điểm thấp
Trong thiết kế web/lập trình web ta có khái niệm asyn='' là tải không đồng bộ. Asyn thường dành cho Javascript tức là tạm hoãn tải Javascript để ưu tiên các HTML tải nội dung trước là các HTML, CSS (định dạng) cho người dùng xem trước, sau đó mới tải javascript nên người dùng sẽ thấy website có vẻ tải nhanh.
Các thành phần web còn lại sẽ tải thêm khi người dùng cuộn trang (cuộn chuột) ví dụ như Lazyload Image cuộn chuột tới đâu thì ảnh mới load thêm. Tức là thời gian tải web ở màn hình đầu tiên tải nhanh và nhưng thời gian tải toàn trang web chưa hẳn sẽ nhanh mà hoãn để tải luân phiên theo thời gian lập trình của coder hoặc theo cuộn chuột.
Google Pagespeed Insights tăng điểm cho thời gian tải màn hình đầu tiên nhưng cho điểm thấp ở thời gian tải toàn trang.
Có những Website tải toàn trang tới 26s nhưng được lập trình tải luân phiên theo cuộn chuột của người dùng nên bạn sẽ thấy website tải nhanh. Nhưng Google Pagespeed Insights đánh giá điểm thấp vì thời gian tải toàn trang lâu là như vậy.
Website tải chậm nhưng Google Pagespeed Insights điểm cao
Những thành phần để lách cho điểm Google Pagespeed Insights lên cao là dời tất cả các tiện ích chạy Javascript xuống sau màn hình đầu tiên hoặc cho tải không đồng bộ.
- Như khai báo quá nhiều Javascript và CSS không cần tải đầu trang lại đặt trên </head>.
- Các Javascript thường dùng đầu tiên cần khai báo là Javascript cho Menu, Slider. Các Javascript Google Analytic, Google Fonts => thường nằm trong màn hình đầu tiên nên đẩy xuống dưới 1 xíu
=> Sẽ làm Google Pagespeed Insights điểm thấp.
Nên nhiều Website sử dụng Menu CSS và 1 ảnh cực nhẹ chiếm hết màn hình đầu tiên để làm Google Pagespeed Insights điểm cao. Nhưng nếu Website đó chạy nhiều tính năng bên dưới màn hình đầu tiên chưa tối ưu nữa thì tải trang sẽ rất lâu nhưng Google Pagespeed Insights vẫn chấm điểm cao => Phần này nói tới việc bố trí code
Ví dụ như bố trí của Website sau:
 |
| Màn hình đầu tiên chỉ chạy 1 ảnh và còn lại là HTML |
Và thường là khi tối ưu Google Pagespeed Insights lên cao thì tốc độ tải trang cũng nhanh hơn đáng kể. Có một số trường hợp tốc độ sẽ giảm đi
Bạn sẽ thấy rằng dung lượng trang web không thay đổi, thời gian tải toàn trang có thể tăng lên hoặc giảm xuống (tùy vào kinh nghiệm bố trí code web của từng người) chứ không hẳn 100% Google Pagespeed điểm cao là tải trang nhanh hơn đâu.
Tuy nhiên để cho tối ưu Google Pagespeed Insights điểm cao và vừa tải trang nhanh thì cần 1 tí "nghệ thuật". Mình chỉ nói nhưng mặt riêng giữa tốc độ tải website và Google Pagespeed Insights còn những điểm chung như tối ưu code, tối data tải lên của người dùng, lưu cache, tối ưu hosting thì chắc chắn phải làm rồi...
Trên đây là chia sẻ kinh nghiệm của tối là một coder và đã tối ưu nhiều website cho các khách hàng.
Liên hệ cho tôi nếu Website của bạn tải quá chậm nhé!
>> Dịch vụ tối ưu Google Pagespeed Insights và tốc độ Website
Chúc bạn thành công!
