Hướng dẫn sử dụng PageSpeed Insights để tăng tốc website

Vấn tốc độ tải cho website có lẽ luôn được các anh chị em Webmaster quan tâm và là yếu tố quan trọng hằng đầu. Sỡ dĩ một website cần có tốc độ tải nhanh, ổn định là vì như vậy khách hàng sẽ cảm thấy thuận tiện hơn khi truy cập.
Bản thân Tâm, nếu vào một website mà cứ load mãi chưa xong là Tâm thoát ngay, trừ khi cần cái gì trên site đó quá thì mới ngồi chờ .

10-Best-Tips-to-Get-95+-Score-on-Google-Page-Speed-Insights

Để tăng tốc website thì có khá nhiều cách, cách mà nhiều anh em nghĩ đến Tâm đoán sẽ là sử dụng CDN. Bản thân Blog hạt giống tâm hồn Tâm cũng dùng CDN cho các file tĩnh (js, css, image). Tuy nhiên trong bài viết này Tâm chưa bàn kỹ đến CDN, hẹn các bạn 1 bài viết về sử dụng CDN thật chi tiết vào một dịp nào đó

Trước khi bắt tay vào các phương pháp giúp tăng tốc tải website, bạn nên sử dụng công cụ do chính Google phát triển có tên PageSpeed Insights để kiểm tra tốc độ tải trang hiện tại của bạn đang ở mức nào tại địa chỉ dưới.

https://developers.google.com/speed/pagespeed/insights

1. Tăng tốc và giảm băng thông bằng kỹ thuật nén

Để hiểu hơn bạn hãy nhìn sơ đồ dưới đây:
a) Mô tả giữa trình duyệt và máy chủ không sử dụng kỹ thuật nén

 

Cụ thể là khi người dùng truy cập index.html thì máy chủ sẽ trả về mã 200 đồng thời tải tập tin đó với dung lượng 100KB

b) Mô tả giữa trình duyệt và máy chủ có sử dụng kỹ thuật nén

 

Khi người dùng truy cập index.html với lựa chọn tải bản nén lại để truy cập được nhanh hơn thì máy chủ sẽ tìm bản nén và trả về cho người dùng với dung lượng 10KB. Nhỏ hơn rất nhiều khi chưa sử dụng kỹ thuật nén.

Nhìn qua sơ đồ trên chắc bạn cũng thấy rõ được tác dụng rõ rệt khi ta sử dụng GZIP. Vậy làm cách nào để kích hoạt tính năng này cho website của bạn? Rất đơn giản, chỉ cần máy chủ bạn có hỗ trợ .htaccess và Gzip là ta có thể làm được.

Kích hoạt tính năng nén
Tạo 1 file .htaccess nếu trên thư mục gốc của website bạn chưa có. Và chèn vào nó dòng sau:
Code:

# compress all html, plain text, xml, css and javascript:

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript

 

Hoặc dòng sau nếu bạn muốn nén nhiều loại file hơn:
Code:

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE text/x-js
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/vnd.oasis.opendocument.formula-template
</IfModule>

Với cách thêm như trên sẽ giúp nén được khoảng 70%-80% so với việc không nén. Để kiếm tra website đã được nén chưa bạn sử dụng công cụ tại:

http://www.whatsmyip.org/http_compression
Bạn có thể nhìn kết quả của mình ở hình trên, hãy thử nghiệm ngay với website của bạn xem tình hình có đổi khác không Phương pháp này kết hợp với bài viết giảm dung lượng cho hình ảnh thì như hổ mọc thêm cách
Ngoài thủ thuật này Tâm cũng có sưu tầm một cách khác nhưng tạm thời chưa đưa vào ngay được vì cần phải kiểm tra kỹ hơn. Sẽ sớm bổ sung vào nội dung bài viết này ngay khi hoàn thiện

Ngoài ra bạn có thể thêm đoạn code sau vào .htaccess để lưu cache tăng tốc 200% cho Website của bạn:

# Enable expiration control
ExpiresActive On

# Default expiration: 1 hour after request
ExpiresDefault "now plus 1 hour"

# CSS and JS expiration: 1 week after request
ExpiresByType text/css "now plus 1 week"
ExpiresByType application/javascript "now plus 1 week"
ExpiresByType application/x-javascript "now plus 1 week"

# Image files expiration: 1 month after request
ExpiresByType image/bmp "now plus 1 month"
ExpiresByType image/gif "now plus 1 month"
ExpiresByType image/jpeg "now plus 1 month"
ExpiresByType image/jp2 "now plus 1 month"
ExpiresByType image/pipeg "now plus 1 month"
ExpiresByType image/png "now plus 1 month"
ExpiresByType image/svg+xml "now plus 1 month"
ExpiresByType image/tiff "now plus 1 month"
ExpiresByType image/vnd.microsoft.icon "now plus 1 month"
ExpiresByType image/x-icon "now plus 1 month"
ExpiresByType image/ico "now plus 1 month"
ExpiresByType image/icon "now plus 1 month"
ExpiresByType text/ico "now plus 1 month"
ExpiresByType application/ico "now plus 1 month"
ExpiresByType image/vnd.wap.wbmp "now plus 1 month"
ExpiresByType application/vnd.wap.wbxml "now plus 1 month"
ExpiresByType application/smil "now plus 1 month"

# Audio files expiration: 1 month after request
ExpiresByType audio/basic "now plus 1 month"
ExpiresByType audio/mid "now plus 1 month"
ExpiresByType audio/midi "now plus 1 month"
ExpiresByType audio/mpeg "now plus 1 month"
ExpiresByType audio/x-aiff "now plus 1 month"
ExpiresByType audio/x-mpegurl "now plus 1 month"
ExpiresByType audio/x-pn-realaudio "now plus 1 month"
ExpiresByType audio/x-wav "now plus 1 month"

# Movie files expiration: 1 month after request
ExpiresByType application/x-shockwave-flash "now plus 1 month"
ExpiresByType x-world/x-vrml "now plus 1 month"
ExpiresByType video/x-msvideo "now plus 1 month"
ExpiresByType video/mpeg "now plus 1 month"
ExpiresByType video/mp4 "now plus 1 month"
ExpiresByType video/quicktime "now plus 1 month"
ExpiresByType video/x-la-asf "now plus 1 month"
ExpiresByType video/x-ms-asf "now plus 1 month"
Dương Triều Blog © 2016