Trong bài trước xTraffic.pep.vn đã giới thiệu đến các bạn các yếu tố ảnh hưởng đến điểm Google PageSpeed Insights của Website. Tiếp theo, xTraffic.pep.vn sẽ hướng dẫn bạn cách cải thiện các yếu tố để website đạt điểm cao trên Google PageSpeed Insights.
Đối với Website nào đang sử dụng nền tảng CMS WordPress thì có thể tham khảo plugin tăng tốc WordPress được hướng dẫn chi tiết tại đây
Tối ưu các yếu tố về tốc độ Website (Speed Rules)
Thời gian đáp ứng của máy chủ (Server Response Time)
Đây là yếu tố rất quan trọng và phức tạp nhất. Do yếu tố này liên quan đến nhiều phần tối ưu chuyên sâu liên quan đến VPS/Server (phần cứng CPU + RAM + HDD + Network), tối ưu MySQL, PHP, Nginx / Apache,… nên xTraffic.pep.vn sẽ có những bài viết riêng về các phần này để các bạn tham khảo chuyên sâu.
Cách đơn giản nhất là sử dụng Varnish Cache để lưu lại toàn bộ nội dung truy vấn và trả về cho người dùng khi đã tạo cache. Ưu điểm của Varnish Cache là không phân biệt bạn sử dụng LEMP hay LAMP, Varnish Cache sẽ xử lý toàn bộ truy vấn và lưu lại để trả về người dùng mà không cần phải gọi để PHP & MySQL xử lý, như vậy sẽ giảm tải rất nhiều cho Server (Xem thêm cách cài đặt Varnish Cache trên CentOS tại đây)
Kích cỡ của mã HTML gửi đến Browser
Do nhược điểm của giao thức TCP nên Google khuyến cáo bạn phải làm mọi cách để mã nguồn HTML có kích cỡ dưới 14 KB (Kilobytes) khi chuyển dữ liệu đến browser. Có nghĩa là dù bạn sử dụng gzip hay không thì dữ liệu truyền đến browser không được quá 14KB để đạt được hiệu quả cao nhất của giao thức TCP.
Hiện nay Google đã công bố giao thức mới là QUIC (Quick UDP Internet Connections) với những ưu điểm vượt trội so với TCP. xTraffic.pep.vn sẽ theo dõi thêm để thông tin đến các bạn về giao thức mới này.
Nén các nội dung trước khi gửi đến Browser (Enable Gzip Compression)
Các trình duyệt hiện nay đều đã hỗ trợ phương thức nén Gzip để nén dữ liệu khi truyền tải giữa Server & Browser.
Hiện tại Gzip là phương thức nén mang lại hiệu quả cao về tỷ lệ nén (cao nhất đối với các loại dữ liệu văn bản như mã HTML, Javascript, CSS,…) và tài nguyên sử dụng (CPU, RAM). Do đó bạn nên bật tính năng nén Gzip trên Apache hoặc Nginx.
Sử dụng bộ nhớ đệm trên trình duyệt (Leverage Browser Caching)
Các trình duyệt hiện nay đều hỗ trợ lưu lại cache của các nội dung truy vấn. Tuy nhiên mặc định thì trình duyệt sẽ không lưu cache trừ khi bạn gửi chỉ thị cho trình duyệt biết nội dung nào cần lưu cache và lưu trong khoảng thời gian là bao lâu. Hiện tại có 2 cách gửi chỉ thị cache cho trình duyệt là :
- Cache-Control : chỉ thị cho trình duyệt cách lưu cache và trong khoảng thời gian là bao lâu. Ví dụ : Cache-Control : max-age=86400; chỉ thị cho trình duyệt lưu cache trong 86400 giây (1 ngày) kể từ lúc nhận chỉ thị. Tức là trong vòng 24h tới, trình duyệt sẽ không cần truy vấn đến Server để lấy nội dung này nữa mà sử dụng luôn nội dung trong bộ nhớ cache của trình duyệt để hiển thị cho người dùng
- ETag : là cách lưu cache dựa trên 1 khoá (id, bao gồm các chữ cái và chữ số, thường dùng hàm băm để làm khoá) gửi kèm. Khi trình duyệt truy vấn đến server sẽ gửi kèm khoá này để so sánh với nội dung trên Server, lúc này Server sẽ kiểm tra khoá mà trình duyệt gửi kèm với khoá trên Server, nếu 2 khoá khớp nhau thì Server chỉ cần gửi HTTP Status Code 304 Not Modified để thông báo cho trình duyệt biết là nội dung không thay đổi, lúc này sẽ nhanh hơn rất nhiều so với việc gửi nguyên cả nội dung cho trình duyệt.
Trong 2 cách trên thì Cache-Control sẽ mang lại hiệu quả hơn vì browser không cần phải gửi bất kỳ truy vấn nào mà sẽ lấy luôn nội dung trong bộ nhớ cache của browser đến khi hết hạn.
Theo khuyến cáo của Google thì các nội dung ít thay đổi như hình ảnh, audio, video, .js, .css,… thì nên lưu cache tối thiểu là 1 tuần, và bạn có thể lưu cache lên đến 1 năm cho các nội dung này.
Để sử dụng Cache-Control tự động trên Apache thì bạn thêm đoạn sau vào file “.htaccess” nằm tại thư mục gốc của website
<ifModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 10 seconds" ExpiresByType text/cache-manifest "access plus 0 seconds" # Data ExpiresByType text/xml "access plus 0 seconds" ExpiresByType application/xml "access plus 0 seconds" ExpiresByType application/json "access plus 0 seconds" # Feed ExpiresByType application/rss+xml "access plus 3600 seconds" ExpiresByType application/atom+xml "access plus 3600 seconds" # Favicon ExpiresByType image/x-icon "access plus 15552000 seconds" # Media: images, video, audio ExpiresByType image/gif "access plus 15552000 seconds" ExpiresByType image/png "access plus 15552000 seconds" ExpiresByType image/jpeg "access plus 15552000 seconds" ExpiresByType image/jpg "access plus 15552000 seconds" ExpiresByType video/ogg "access plus 15552000 seconds" ExpiresByType audio/ogg "access plus 15552000 seconds" ExpiresByType video/mp4 "access plus 15552000 seconds" ExpiresByType video/webm "access plus 15552000 seconds" # HTC files (css3pie) ExpiresByType text/x-component "access plus 15552000 seconds" # Webfonts ExpiresByType application/x-font-ttf "access plus 15552000 seconds" ExpiresByType font/opentype "access plus 15552000 seconds" ExpiresByType font/woff2 "access plus 15552000 seconds" ExpiresByType application/x-font-woff "access plus 15552000 seconds" ExpiresByType image/svg+xml "access plus 15552000 seconds" ExpiresByType application/vnd.ms-fontobject "access plus 15552000 seconds" # CSS and JavaScript ExpiresByType text/css "access plus 15552000 seconds" ExpiresByType application/javascript "access plus 15552000 seconds" ExpiresByType text/javascript "access plus 15552000 seconds" ExpiresByType application/javascript "access plus 15552000 seconds" ExpiresByType application/x-javascript "access plus 15552000 seconds" # Others files ExpiresByType application/x-shockwave-flash "access plus 15552000 seconds" ExpiresByType application/octet-stream "access plus 15552000 seconds" </ifModule>
Để sử dụng Cache-Control trên Nginx thì bạn thêm dòng sau trong block “server {…}” tại file cấu hình Nginx :
server {
#Thêm dòng sau vào block server...
location ~* \.(rtf|rtx|svg|svgz|txt|css|htc|less|js|js2|js3|js4|asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|json|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|tif|tiff|ttf|ttc|wav|wma|wri|woff|woff2|xla|xls|xlsx|xlt|xlw|zip) {
expires 365d;
}
}
Minify Resources (HTML, CSS, and JavaScript)
Minify là kỹ thuật loại bỏ các ký tự thừa trong mã HTML, CSS, Javascript nhằm mục đích là giảm kích cỡ nội dung truyền tải từ Server cho Browser nhằm tăng tốc và tiết kiệm băng thông cho website.
Nếu bạn đang sử dụng PHP thì có thể sử dụng thư viện https://code.google.com/p/minify/ để minify HTML + CSS + Javascript trên website.
Tối ưu hình ảnh (Optimize Images)
Hình ảnh (Image) là tài nguyên chiếm phần lớn lưu lượng truyền tải giữa Server & Browser của đa số các website hiện nay. Do đó bạn cần phải tối ưu hình ảnh để tăng tốc độ tải cho website bằng các nguyên tắc sau đây :
- Chỉ nên sử dụng 3 kiểu tập tin hình ảnh đã được nén bao gồm : .jpg , .png , .gif. Hiện nay có thêm chuẩn hình ảnh mới là .webp và đã được Chrome hỗ trợ.
- Sử dụng các thư viện optimize image trên Server :
Các mã Javascript gây ra Render-Blocking (Remove Render-Blocking JavaScript)
Theo quy trình render html của trình duyệt khi gặp mã Javascript thì trình duyệt sẽ phải ngưng quá trình render lại để tải mã javascript và chạy mã javascript xong thì mới tiếp tục render. Do đó, nếu bạn để mã javascript ở phần phía trên của mã HTML như trong tag <head>…</head> hoặc gần tag <body> thì sẽ gây chậm quá trình render, và người dùng sẽ phải đợi lâu để thấy được giao diện của website.
Giải pháp đưa ra là bạn cần phải gom các mã javascript lại thành 1 file, minify file đó và chuyển javascript xuống ngay phía trước tag </body> của mã HTML.
Bạn cũng nên kết hợp nạp mã javascript này theo kiểu bất đồng bộ (Asynchronous Scripts) để tăng tốc quá trình render html của trình duyệt. Để nạp mã javascript theo kiểu bất đồng bộ thì đơn giản bạn chỉ cần thêm “async” vào tag <script>
Sau đây là ví dụ tốt nhất để website nạp nhanh hơn :
<html> <head> ... </head> <body> <p>Ví dụ về việc tối ưu Javascript để tăng tốc độ nạp Website</p> <script src="//blog-xtraffic.pep.vn/js/javascript_combined_async.min.js" async ></script> </body> </html>
Số lần chuyển hướng url (Avoid Landing Page Redirects)
Mỗi lần truy vấn 1 url là phải mất rất nhiều công đoạn để kết nối và lấy dữ liệu. Do đó bạn không nên sử dụng chuyển hướng url trừ khi bắt buộc. Nếu phát hiện những url của hình ảnh, javascript, css,… bị chuyển hướng sang url khác thì bạn cần phải sửa lại link đúng trong mã nguồn của website. Để xem url bị chuyển hướng khi xem website của bạn thì bạn có thể sử dụng http://tools.pingdom.com/fpt/ để phân tích.
Tối ưu các yếu tố về trải nghiệm người dùng
Tránh sử dụng các plugin trong website (Avoid Plugins)
Các bạn lưu ý plugin ở đây không phải là plugin của WordPress mà là những plugin như Flash, Silverlight, Java nhằm thể hiện các nội dung đặc biệt mà các trình duyệt không thể thực hiện.
Các plugin này có thể gây ra các vấn đề về an ninh hoặc gây treo trang web. Do đó với sự hậu thuẫn của các “ông lớn” mà HTML5 đã ra đời nhằm thay thế Flash trong tương lai. Với HTML4 thì bạn không thể chạy Video hoặc Audio trừ khi bạn phải cài đặt Flash. Nhưng với HTML5 thì các trình duyệt hiện nay đều đã hỗ trợ chạy các file Video ngay trên trình duyệt mà không cần phải cài thêm plugin nào. Do đó, nếu bạn đang sử dụng Flash để chạy video thì nên thay thế bằng HTML5 (tìm từ khoá “html5 video player” trên Google để tìm các thư viện chạy video bằng HTML5)
Thêm cấu hình Viewport (Configure the Viewport)
Viewport sẽ giúp các trình duyệt trên di động thể hiện website phù hợp với kích cỡ màn hình của thiết bị di động. Nếu thiếu Viewport thì người dùng sẽ rất khó xem website trên di động, do đó bạn nên tìm hiểu cách cấu hình Viewport cho phù hợp với website của bạn. Ví dụ :
<meta name=viewport content="width=device-width, initial-scale=1" />
Cấu hình Viewport không phù hợp với nội dung (Size Content to Viewport)
Khi bạn đã cấu hình Viewport ở trên nhưng các phần tử (element) trong website như hình ảnh, button,… lại thiết kế theo kích cỡ nhất định (như <img style=”width:500px” /> ), nếu thiết bị di động có chiều ngang màn hình thấp hơn 500 px (ví dụ : iPhone 5 có width screen là 320px) sẽ làm người dùng phải kéo ngang qua để xem hết nội dung trên website.
Giải pháp là không nên thiết lập chiều rộng tuyệt đối (ví dụ : px, pt) cho các phần tử trong trang mà nên sử dụng chiều rộng tương đối là % để các phần tử này tự động co dãn theo kích cỡ màn hình của thiết bị.
Bạn nên tham khảo thêm Responsive Web Design (RWD)
Kích cỡ phù hợp của các đối tượng tương tác (Size Tap Targets Appropriately)
Đối với các đối tượng hay được người dùng tương tác trên thiết bị di động như nút nhấn (buttons), links hoặc các trường nhập của form (form fields) thì bạn cần chú ý để kích thước của các phần tử này không quá nhỏ hoặc quá gần nhau làm người dùng khó tương tác trên các màn hình cảm ứng.
Vậy kích thước bao nhiêu là đủ trên thiết bị di động? Theo nghiên cứu của Google thì bạn nên thiết kế các phần tử này có chiều rộng & cao tối thiểu là 7mm (millimeter) tương đương với 48 pixel. Với kích thước này, người dùng sẽ dễ nhấn chính xác mà không nhấn nhầm vào các đối tượng khác trên các thiết bị có màn hình cảm ứng.
Kích cỡ font chữ khó đọc (Use Legible Font Sizes)
Nếu bạn sử dụng font chữ quá nhỏ sẽ làm người dùng khó đọc và sẽ làm giảm điểm Google PageSpeed Insights của Website.
Kích cỡ font chữ của website có thể được xác định bằng 4 đơn vị thông thường sau :
- Pixels (px) : là điểm ảnh trên màn hình
- Points (pt) : Point được xác định dựa trên Pixel, 1 Pixel = 0.75 Points
- EMs (em) + Percent (%) : Đây là 2 đơn vị dựa trên sự thừa hưởng kích cỡ và thuộc tính của font chữ được sử dụng. 1 EM tương đương 100%.
Đầu tiên bạn cần phải cấu hình Viewport để font chữ có thể co giãn như mong muốn trên các thiết bị khác nhau. Sau khi đã cấu hình Viewport thì bạn lưu ý các vấn đề sau :
- Nên sử dụng font chữ cơ bản là 16 CSS pixel. Sau đó bạn sẽ thiết lập riêng cho từng đối tượng khác nhau dựa trên kích cỡ cơ bản này.
- Thông thường sử dụng line-height là 1.2em
- Hạn chế tối đa việc sử dụng nhiều kích cỡ và kiểu font khác nhau vì sẽ gây ra sự lộn xộn và phức tạp trong thiết kế.
Sau khi bạn cải thiện các yếu tố trên, điểm Google PageSpeed Insights của website bạn sẽ được cải thiện đáng kể. Nếu bạn muốn đạt điểm Google PageSpeed Insights 100/100 tuyệt đối thì phải thực hiện tối ưu chuyên sâu hơn nữa, nếu bạn được 100/100 Google PageSpeed Insights thì hãy chia sẻ link website của bạn bằng cách comment bên dưới để mọi người tham khảo nhé.