Việc tối ưu tốc độ website giúp người dùng truy cập nhanh hơn ,tăng khả năng trải nghiệm của website tới người dùng cũng như hỗ trợ việc seo từ khóa của bạn.Google đã tạo ra 1 trang công cụ Google PageSpeed nhằm mục đich giúp các developer website test và đánh giá tốc độ website cũng như tối ưu lại source code website bạn một cách tốt nhất Mục đích của công cụ là giúp bạn cải thiện tốc độ tải trang và tăng trải nghiệm người dùng.Nếu như website của bạn có điểm từ trang google spageseed insight thì khả năng đáp ứng yêu cầu từ công cụ càng cao, việc đánh giá website bạn cũng trở nên cao hơn.
[toc]
Tuy nhiên đối với các website bình thường rất khó để bạn đáp ứng hầu hết các tiêu chí mà google speed insights đề ra, sau đây mình sẽ hướng dẫn bạn tối ưu tốc độ website với một số plugin và code cơ bản để đáp ứng với các tiêu chí từ google .
1.Tối ưu tốc độ tải trang.
- Hạn chế sử dụng chuyển hướng trong website hay các javascript tự động nhảy trang.
- Hosting hỗ trợ bật chức năng nén dữ liệu gửi về trình duyệt.
- Giảm thời gian phản hồi của máy chủ.
- Tăng thời gian bộ nhớ đệm ở trình duyệt.
- Tối ưu và Nén các file CSS và Javascript trên website của.
- Tối ưu kích thước và giảm dung lượng hình ảnh khi up lên website.
- Tối ưu việc chèn CSS vào website.
- Cấu hình thứ tự ưu tiên của nội dung trong website.
- Không chặn Javascript và CSS khi tải trang.
Quy tắc hiển thị nội dung website
- Hạn chế sử dụng các trình cắm (plugin) để hiển thị nội dung.
- Sử dụng thẻ meta viewport để hiển thị kích thước màn hình phù hợp.
- Tối ưu các button hoặc liên kết trong website.
- Sử dụng font-chữ cỡ chữ phù hợp để hiển thị nội dung trên website.
Khi bạn thiết kế website với WordPress xong có lẽ bạn sẽ quan tâm tới việc trải nghiệm người dùng của mình với website cũng như website của mình đã chuyên nghiệp hay chưa ? có thân thiện với thiết bị di động hay không ?
Làm thế nào để áp dụng được những tiêu chí trên vào website của bạn và áp dụng như thế nào ?
1 Sử dụng host phù hợp
Hiện nay có rất nhiều nhà cung cấp host ,nhưng nếu như bạn đang dùng host free thì có lẽ không nên làm theo những hướng dẫn sau vì đa số chúng đều bị hạn chế cấu hình cũng như công nghệ đi kèm.1 số host dùng cho wordpress phù hợp như A2 hosting.Pa Việt Nam hay Vhost. ngoài ra bạn có thể dùng thêm CloudFlare .
2.Hạn chế sử dụng chuyển hướng trang đích
Việc chuyển hướng hiểu đơn giản là khi bạn truy cập vào website , thì sẽ chuyển(redirect) tới 1 trang khác Trường hợp này thường gặp khi bạn mua tên miền và cấu hình domain với www,. Một số người dùng vẫn quen gõ www.domain.com khi đó website của bạn cần thêm vài giây để chuyển hướng đúng tới domain.
3. Bật chức năng nén trên host
Hiện nay đa số host đều hỗ trợ nén các dữ liệu gửi về trên server dạng gzip thay vì các dữ liệu thô thông thường,Việc nén dữ liệu có thể giúp bạn tăng tôc website từ 50-60%. bạn có thể kiểm tra tính năng nén của website từ website: http://gzipwtf.com/
Đối với plugin w3 Total Cache , để bật chức năng nén , bạn làm như sau :
tại Performance -> General Settings -> Browser Cache
Tiếp tục bạn vào Performance -> Browser Cache và check vào tất cả tuỳ chọn “Set expires header“.
Nếu bạn đang dùng plugin WP Super Cache thì có thể bật chức năng nén gzip như sau:Settings -> WP Super Cache -> Advanced và check vào tuỳ chọn “Cache hits to this website for quick access. (Recommended)” và “Compress pages so they’re served more quickly to visitors. (Recommended)“.
Nếu như bạn không xài 2 plugin trên và host Apache thì có thể bật gzip bằng cách thêm đoạn code sau vào file htaccess.
[crayon]
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
[crayon] AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
[/crayon] Nếu bạn dùng host Đối với NGINX không dùng 2 plugin trên thì có thể chèn code vào file nginx.conf:
[crayon] gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
# Disable for IE < 6 because there are some known problems
gzip_disable “MSIE [1-6].(?!.*SV1)”;
# Add a vary header for downstream proxies to avoid sending cached gzipped files to IE6
gzip_vary on;
[/crayon]
wpDiscuz
