Bạn muốn tăng tốc WordPress của mình theo chuẩn của Google? Hãy đọc và làm theo bài viết sau. Chúng tôi có dịch vụ hỗ trợ miễn phí Tăng tốc cho WordPress.
Tại sao bạn cần tăng tốc cho trang WordPress của mình?
Tốc độ tải trang là một yếu tố có tính quyết định đến thành công của trang web. Nếu trang web WordPress của bạn hoạt động nhanh hơn, bạn sẽ có thêm cơ hội:
- Gia tăng doanh số bán hàng.
- Cải thiện thứ hạng SEO của Google.
- Tăng thiện cảm với người truy cập.
Về doanh số
Theo một nghiên cứu của tạp chí Financial Times chỉ ra rằng, khi trang web chậm đi 1s, doanh nghiệp sẽ mất đi 7% doanh thu.
Điều đó đồng nghĩa với việc nếu bạn có thể làm trang web của mình nhanh thêm 1s, thì đương nhiên bạn sẽ tăng thêm được 7% doanh thu cho doanh nghiệp của mình.
Tốc độ của trang web ảnh hưởng trực tiếp lên trải nghiệm và cảm xúc của khách hàng. Đơn giản vì không ai muốn phải chờ đợi.
Ở mức độ lý tưởng, người xem cảm thấy thoải mái nhất nếu họ có thể xem trang sau khoảng 2s. Còn mức độ chấp nhận được là từ 3-5s. Nếu trang web của bạn tải mất thời gian hơn 5s, bạn đang mất đi rất nhiều khách hàng tiềm năng thiếu kiên nhẫn.
Tiêu chuẩn này ngày càng khắt khe hơn do hạ tầng về công nghệ ngày càng tốt hơn, và con người ngày càng ít kiên nhẫn hơn vì lối sống nhanh.
Về tăng điểm SEO
Tăng thứ hạng của trang web trên công cụ tìm kiếm số 1 là Google quả là một điều mà bất kỳ một doanh nghiệp nào cũng khao khát. Google ngày càng khắt khe hơn trong các tiêu chí đánh giá của mình. Kể từ 2018, chỉ số về tốc độ được đánh giá rất cao. Bằng chứng là công cụ kiểm tra của Google đã được nâng cấp để đánh giá vô cùng chi tiết và chính xác tốc độ của một trang web.
Vậy hãy cùng đọc và áp dụng các bước để tăng tốc cho trang web của bạn nhé!
Kiểm tra tốc độ trang web của bạn bằng Google Page Speed insight
Google Pagespeed insight chính là công cụ chính thức của Google để đánh giá tốc độ trang web của bạn.
Truy cập vào trang: https://developers.google.com/speed/pagespeed/insights/?hl=vi
Nhập địa chỉ trang web của bạn vào, và chờ công cụ của Google kiểm tra kết quả nhé.
❤️Làm theo hướng dẫn của chúng tôi, bạn hoàn toàn có thể tự đạt được kết quả tương tự❤️
👍Gửi yêu cầu hỗ trợ miễn phí tới chúng tôi ở cuối trang này.
Bật nén Gzip cho toàn bộ các tài nguyên của trang
Nén bằng GZIP giúp cho dung lượng các tài nguyên trang web của bạn giảm xuống. Và đương nhiên tốc độ download sẽ được tăng lên.
Chức năng nén này được thực hiện thông qua Web Server(thường là Apache, Nginx hoặc LiteSpeed).
Kiểm tra xem web của bạn đã nén gzip chưa thông qua công cụ sau:
Bật Gzip Compression nếu bạn đang dùng Hosting có Cpanel
Truy cập Cpanel, chọn mục Optimize Website, chọn Compress All content(nén toàn bộ các file truyền qua web server) Và Update Settings.
Bật Gzip nếu bạn sử dụng hosting hỗ trợ .htaccess
Thêm vào .htaccess của wordpress đoạn code sau:
<ifModule mod_gzip.c> 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.* </ifModule>
Hoặc:
<IfModule mod_deflate.c> # Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml </IfModule>
Với Nginx bạn cần thêm vào file .conf cấu hình
server {
listen 80;
#các cấu hình hiện tại
gzip on;
gzip_disable "msie6";
gzip_comp_level 6;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_proxied any;
gzip_types
text/plain
text/css
text/js
text/xml
text/javascript
application/javascript
application/x-javascript
application/json
application/xml
application/xml+rss
image/svg+xml;
gzip_vary on;
}
Giảm thời gian phản hồi của máy chủ
Thời gian máy chủ phản hồi (TTFB – time to first byte) được hiểu đơn giản là thời gian kể từ khi máy chủ nhận được yêu cầu tải trang, đến khi nó chuẩn bị xong kết xuất HTML để trình duyệt có thể download về.
Đó là cách hiểu đơn giản, nhưng thực tế máy chủ sẽ phải xử lý rất nhiều công việc để có thể trả về kết quả đó. Bao gồm các mục chính là thông dịch mã nguồn PHP của WordPress, kết nối tới cơ sở dữ liệu MySQL và trả về kết quả cuối cùng là mã HTML. Mỗi công đoạn lại bao gồm nhiều quy trình nhỏ khác nhau. Nếu bạn muốn làm cho thông dịch PHP nhanh hơn, kết nối truy vấn cơ sở dữ liệu nhanh hơn đều bao gồm những kiến thức kỹ thuật chuyên sâu.
Thật may là WordPress có hỗ trợ sẵn cách để tăng TTFB một cách đơn giản bằng Plugin sẵn có. Đa số cơ chế của các Plugin này là lưu lại sẵn kết quả(trang HTML) để sử dụng cho lần sau.
Ở đây chúng tôi giới thiệu 2 plugin được dùng nhiều nhất
- WP Super Cache: plugin đơn giản có tác dụng lưu lại sẵn kết quả HTML để dùng cho lần sau
- W3 Total Cache: plugin chuyên sâu có nhiều chức năng để cache cơ sở dữ liệu, object, session…
WP Super Cache
Tải về cài đặt, hoặc cài trực tiếp từ Plugins > Cài mới
https://vi.wordpress.org/plugins/wp-super-cache/
Kích hoạt và chọn Caching On để bật chức năng cache.
Cấu hình thời gian xóa Cache tự động. Như ví dụ chúng tôi để là 0 nếu muốn xóa thủ công mỗi lần update nội dung.
Xóa mục Rejected User Agents này nếu bạn muốn các bot như Google, Bing, Yandex.. cũng được tải thông qua cache.
Xử lý gộp và nén JavaScript/CSS/HTML – Tài nguyên chặn hiển thị trang
Merge – gộp các file CSS và các fife javascript
Website xây dựng bằng WordPress thường bao gồm nhiều File CSS và Javascript khác nhau. Các plugin cài thêm cũng làm tăng lên số lượng các file này.
Việc trình duyệt phải download nhiều file dẫn đến tốc độ tải trang sẽ bị giảm. Để giải quyết vấn đề này bạn cần phải gộp các file JS và CSS vào chung thành 1 file.
Tài nguyên chặn hiển thị trang
Với cấu trúc trang HTML phổ biến, thì các file CSS và JS sẽ được đưa vào thẻ <head> của trang HTML. Vấn đề nằm ở chỗ khi trình duyệt đã có mã HTML và muốn hiển thị, nó đọc đến đây thì sẽ phải đi tìm các file này để nạp, trước khi có thể hiển thị hình dạng trang web ở phần <body> phía dưới.
Điều này làm người duyệt web sẽ phải chờ ở màn hình trắng, tới khi trình duyệt tải đủ CSS và JS thì mới bắt đầu hiển thị lên. Thuật ngữ của Google gọi đó là Above the Fold hay tài nguyên chặn hiển thị trang.
Giải pháp cho vấn đề này được xử lý bằng cách sau đây:
- Đưa các đoạn CSS thật sự cần thiết vào thẻ <style> đặt trực tiếp trong <head>
- Các mã CSS khác thì đưa vào cuối của trang html.
- Toàn bộ các file JS thì đưa về cuối trang html.
Cách thực hiện
Nếu bạn là người trực tiếp phát triển theme, việc viết lại code là hoàn toàn có thể. Tuy vậy thì nó khá mất thời gian, ngoài ra các plugin khác của wordpress nếu có css riêng thì bạn cũng cần xử lý chúng.
Thật may là WordPress luôn có các plugin sẵn sàng có thể xử lý vấn đề giúp chúng ta. Chúng tôi giới thiệu cho bạn Plugin Autopimize để thực hiện việc này.
Sau khi cài đặt và kích hoạt, bạn vào thiết lập các thông số như dưới đây
JavaScript Options
Chọn Optimize JavaScript Code?
Chọn Aggregate JS-files?
CSS Options
Chọn Optimize CSS Code?
Chọn Inline and Defer CSS?
HTML Options
Chọn Optimize HTML Code?
Tối ưu tốc độ tải hình ảnh trên trang
Có hai yếu tố chính của dung lượng hình ảnh ảnh hưởng đến tốc độ trang web là
- Kích thước hình ảnh thực tế có to hơn khi hình ảnh hiển thị trên trang web không?
- Hình ảnh có được nén để giảm chất lượng ảnh mà vẫn đảm bảo xem tốt qua web không?
Với mục 1, bạn cần chỉnh sửa lại hình ảnh để đảm bảo hình gốc bằng đúng kích thước mà bạn muốn nó hiển thị trên trang web.
Còn với mục 2, vì trang web không cần hình ảnh quá rõ nét(như hình để in ấn, hình có chất lượng cao) nên bạn cần phải sửa lại các ảnh cũ và các ảnh mới để nhằm giảm dung lượng của chúng. Với ảnh JPG thì khuyến cáo nên để chất lượng 8/12 là được.
Với việc xử lý lại hàng loạt các ảnh đã cũ thì làm sao nhỉ?
Bạn có thể download toàn bộ thư mục ảnh của WordPress về, rồi dùng phần mềm để nén. Sau đó upload ngược trở lại.
Tổng kết
Trên đây là những kỹ thuật chính giúp bạn có thể nhanh chóng cải thiện tốc độ tải trang web của mình. Ngoài những chỉ số chính cần tối ưu, còn rất nhiều các chỉ số liên quan trong bộ chỉ số của LightHouse Page Speed lab.
Nếu bạn chưa rành về chỉnh sửa code, khó khăn trong thao tác, chúng tôi sẵn sàng trợ giúp với gói dịch vụ miễn phí cơ bản.
Dịch vụ tăng tốc WordPress chuẩn Google dành cho bạn
Ghi chú
Gói miễn phí: kỹ thuật viên của chúng tôi sẽ hỗ trợ bạn nếu như bạn đọc bài phía trên mà chưa thực hiện được.
Gói chuyên nghiệp: dùng cho đa số các trang web muốn tăng tốc thêm để đạt được tộc độ tốt. Chúng tôi sẽ xử lý các vấn đề chuyên sâu để tối ưu tốc độ cho bạn. Bảo hành 12 tháng và hướng dẫn chi tiết cách vận hành.
Gói Guru: dùng cho các trang siêu chậm, nhiều plugin, dữ liệu nặng và tốc độ đạt mức truy cập cực nhanh như trang Vinazoom của chúng tôi ♥♥♥