Như các bạn đã biết Google PageSpeed là một công cụ đánh giá chất lượng Website bằng các tiêu chuẩn do Google nghiên cứu và ban hành được giới thiệu trong bài “Google PageSpeed là gì?“. Trong bài tiếp theo này, xTraffic.pep.vn sẽ giới thiệu đến với các bạn những yếu tố quan trọng ảnh hưởng đến điểm Google PageSpeed của Website bạn.
Theo kết quả nghiên cứu hiện tại của xTraffic.pep.vn thì các yếu tố ảnh hưởng đến điểm Google PageSpeed tập trung chủ yếu vào tốc độ thể hiện của 1 website. Điều này có nghĩa là nếu website của bạn càng thể hiện cho người dùng xem càng nhanh thì điểm số chất lượng của website bạn sẽ càng cao. Sau đây chúng ta sẽ phân tích chi tiết các yếu tố này.
Các yếu tố về tốc độ Website (Speed Rules)
Thời gian đáp ứng của máy chủ (Server Response Time)
Bạn có thể hiểu đây là thời gian Server gửi mã HTML của trang web đến người dùng. Đây là yếu tố hết sức quan trọng không chỉ ảnh hưởng đến điểm Google PageSpeed mà còn ảnh hưởng đến chất lượng SEO và trải nghiệm người dùng của website.
Để kiểm tra xem thời gian xử lý để tạo mã HTML của Server là bao nhiêu thì bạn mở trình duyệt Google Chrome và truy cập vào website của bạn. Sau đó nhấn “Ctrl + U” (View Page Source) để đến trang xem mã nguồn HTML của website. Sau đó bạn tiếp tục nhấn “Ctrl + Shift + I” (tại trang view-source của website) để mở tab “Developer Tools”. Sau đó refresh lại trang view-source: để “Developer Tools” phân tích. Bạn nhấn vào tab Network (như trong hình 1 bên dưới) và rê chuột lên cột Timeline để xem chi tiết.
Dòng Waiting (TTFB) (TTFB là từ viết tắt của Time To First Byte) là thể hiện thời gian Server xử lý để tạo ra mã HTML gửi đến trình duyệt (ở ví dụ này là 65.997 ms, chưa tới 100 ms).
Theo tiêu chuẩn của Google thì thời gian này của website phải dưới 200 ms (miliseconds), nếu website của bạn trên 200 ms thì cần phải tìm cách tối ưu để dưới 200 ms
Việc tối ưu Server Response Time là một công việc đòi hỏi rất nhiều công sức và chất xám, nó liên quan đến tối ưu Database (MySQL), tối ưu PHP, tối ưu Apache (Nginx), Phần cứng VPS/Server (CPU, RAM, HDD),… . Do đó xTraffic.pep.vn sẽ giới thiệu đến với các bạn trong những bài chuyên đề chi tiết tiếp theo.
Số lần chuyển hướng url (Avoid Landing Page Redirects)
Mỗi lần bạn chuyển hướng url là một lần tốn rất nhiều thời gian để trình duyệt tải được nội dung mong muốn. Do đó, trừ khi bắt buộc thì bạn không nên sử dụng cách chuyển hướng đến url mới.
Kích cỡ của mã HTML gửi đến Browser
Do điểm yếu của TCP Slow Start nên để đạt được khả năng thể hiện website nhanh nhất cho người dùng, thì kích cỡ của mã HTML không được quá 14 KB (Kilobytes).
Nén các nội dung trước khi gửi đến Browser (Enable Gzip Compression)
Sử dụng Gzip Compression sẽ giúp bạn giảm kích cỡ nội dung bằng thuật toán nén của Gzip. Việc này hết sức quan trọng và hữu ích vì nó có những lợi ích sau :
- Giúp website của bạn nhanh hơn vì giảm dung lượng truyền tải giữa browser và server
- Giúp bạn tiết kiệm băng thông của hệ thống Internet nói chung và server + người dùng nói riêng
Gzip hoạt động hiệu quả với những nội dung text như mã HTML, Javascript, CSS, JSON, XML,… và có thể giúp bạn giảm đến 90% kích cỡ của nội dung.
Đối với các kiểu nội dung như video, hình ảnh, audio,… thì bạn không nên sử dụng Gzip vì bạn sẽ tốn nhiều tài nguyên CPU + RAM của Server chỉ để giảm 1% đến 2% kích cỡ của nội dung (không hiệu quả).
Sử dụng bộ nhớ đệm trên trình duyệt (Leverage Browser Caching)
Hầu hết các trình duyệt đều hỗ trợ cache để lưu trữ những nội dung ít thay đổi như hình ảnh (image), javascript (.js), CSS (.css), Video + Audio,….
Theo cách này, nếu Server gửi 1 chỉ thị đến trình duyệt trong phần header để nói trình duyệt biết là nội dung này sẽ không thay đổi trong 1 khoảng thời gian nào đó, thì trình duyệt sẽ không cần phải gửi truy vấn đến Server để lấy các nội dung này mà sẽ sử dụng luôn dữ liệu đã lưu trong bộ nhớ đệm của trình duyệt (cache).
Sử dụng cách này, Server của bạn sẽ giảm tải rất nhiều các truy vấn không cần thiết đến Server. Bạn hãy tưởng tượng là một 1 lần người dùng xem 1 trang trên website của bạn thì trình duyệt sẽ phải gửi trung bình khoảng 60 truy vấn để có các nội dung cần thiết như hình ảnh, .js, .css, video,… (có những website nhiều nội dung thì trên 100 truy vấn là bình thường) thì việc giảm các truy vấn dư thừa bằng cách này sẽ mang lại hiệu quả như thế nào.
Minify Resources (HTML, CSS, and JavaScript)
Minify là một kỹ thuật giảm các dữ liệu dư thừa có trong mã HTML, CSS và Javascript nhằm giảm tối đa kích cỡ của các nội dung này.
Các nội dung dư thừa bao gồm :
- Các mã comment :
- HTML : <!– … –>
- CSS : /*…*/
- Javascript : /*…*/ & //…
- Các khoảng trắng : tab, xuống dòng (new line), 2 khoảng trắng (space bar, blank) trở lên liên tiếp,…
Việc xoá bỏ các nội dung dư thừa này sẽ giúp bạn giảm thêm khoảng 10% trở lên kích cỡ các nội dung này.
Tối ưu hình ảnh (Optimize Images)
Các hình ảnh trên website thường sẽ chiếm phần lớn trong tổng dung lượng của 1 trang web. Do đó bạn cần cân nhắc đến việc sử dụng các hình ảnh đã được tối ưu trên website. Nếu bạn làm tốt việc này, tổng dung lượng của website sẽ giảm một cách đáng kể.
Giảm kích cỡ các nội dung trên màn hình đầu tiên (Reduce the size of the above-the-fold content)
Above-The-Fold (được viết tắt là ATF) là nội dung thể hiện trên màn hình đầu tiên của trang web trước khi người dùng di chuyển xuống dưới (scroll). Như vậy Above-The-Fold sẽ khác nhau trên các thiết bị khác nhau phụ thuộc vào kích thước màn hình của thiết bị (width + height).
Theo khuyến cáo của Google thì các nội dung liên quan đến Above-The-Fold cần phải có kích cỡ dưới 14KB để nội dung trang web được thể hiện nhanh nhất.
Các mã Javascript gây ra Render-Blocking (Remove Render-Blocking JavaScript)
Trong quá trình thể hiện 1 trang web, nếu trình duyệt gặp 1 đối tượng Javascript thì sẽ phải ngưng quá trình render để tải về đoạn mã Javascript này và thực thi đến khi xong rồi mới tiếp tục render các phần tiếp theo của HTML.
Đây là nguyên nhân làm cho website của bạn chậm thể hiện đến người dùng nếu bạn đặt các mã Javascript ở đầu HTML (ví dụ đặt trong phần <head>…</head>, gần với <body>…)
Các yếu tố về trải nghiệm người dùng
Các plugin được sử dụng trong website (Avoid Plugins)
Các plugin giúp trình duyệt xử lý các nội dung đặc biệt trong website như Flash, Silverlight, Java,… . Nhưng hầu hết các thiết bị di động đều không hỗ trợ các plugin này (Apple không hỗ trợ sử dụng Flash trên các thiết bị của họ), và các plugins này là nguyên nhân hàng đầu dẫn đến các vấn đề về sự cố treo, crash, an ninh trên các trình duyệt hỗ trợ chúng. Do đó, hầu hết các trình duyệt phổ biến hiện nay đều hạn chế việc sử dụng các plugins này và website của bạn sẽ bị giảm điểm Google PageSpeed nếu đang sử dụng plugins.
Thiếu cấu hình Viewport (Configure the Viewport)
Viewport dùng để điều khiển trang web hiển thị ra sao trên 1 thiết bị di động. Nếu bạn không cấu hình viewport, các thiết bị di động sẽ dàn trang web như trên Desktop (PC), điều này sẽ làm trang web của bạn rất khó xem trên các thiết bị di động.
Cấu hình Viewport không phù hợp với nội dung (Size Content to Viewport)
Nếu bạn đã cấu hình Viewport cho website nhưng chiều rộng của nội dung lại không phù hợp với Viewport thì sẽ làm người dùng bắt buộc phải kéo ngang 2 bên để xem hết nội dung của bạn.
Trên cả 2 phiên bản desktop và các thiết bị di động, người dùng thường chỉ cuộn website theo chiều dọc chứ ít khi nào cuộn theo chiều ngang, và khi bạn bắt người dùng phải cuộn theo chiều ngang hoặc thu nhỏ (zoom out) để xem nội dung trang web thì sẽ làm người dùng khó chịu (poor user experience).
Kích cỡ phù hợp của các đối tượng tương tác (Size Tap Targets Appropriately)
Đây là yếu tố làm cho các đối tượng cần tương tác như các nút (buttons), links, hoặc các trường nhập của form (form fields),… có kích cỡ phù hợp (không quá nhỏ) và khoảng cách giữa chúng không quá gần làm cho người dùng khó tương tác (nhấn) trên các thiết bị di động hỗ trợ màn hình cảm ứng.
Nếu website của bạn thiết kế các links hoặc nút nhấn quá nhỏ hoặc quá gần nhau sẽ làm người dùng rất khó nhấn hoặc có thể nhấn nhầm sang các đối tượng khác khi họ dùng màn hình cảm ứng, như vậy sẽ làm điểm Google PageSpeed Insights sẽ thấp hơn khi tính điểm di động.
Kích cỡ font chữ không phù hợp (Use Legible Font Sizes)
Vấn đề xảy ra khi bạn sử dụng kích cỡ font chữ quá nhỏ làm người dùng khó đọc, đặc biệt là trên các thiết bị di động.
Bên trên là các yếu tố chính ảnh hưởng đến điểm Google PageSpeed Insights của Website. Trong bài tiếp theo, xTraffic.pep.vn sẽ hướng dẫn các bạn cách khắc phục và cải thiện các yếu tố này để có điểm số cao hơn.