7 Bước tối ưu WordPress để đạt điểm PageSpeed Insights 100/100

7 Bước tối ưu WordPress để đạt điểm PageSpeed Insights 100/100
2.49 (49.84%) 128 votes

Hiện nay, mã nguồn mở WordPress là một trong những mã nguồn mà chúng ta thường nhắc tới trong thời gian gần đây. Là một mã nguồn giúp chúng ta tạo ra một website nhanh nhất và đẹp nhất. Do đó, đó chính là lý do mà chúng ta lại yêu thích Wordpress đến vậy. Nhiều lúc khác hàng thường liên hệ tới những đối tác thiết kế website. Và câu đầu tiên tôi nhận được đó là website sử dụng Wordpress không? Đây chính là bằng chứng chứng minh cho việc sử dụng Wordpress đang rất phổ biến trong thiết kế web của chúng ta.

Việc sử dụng mã nguồn mở Wordpress để thiết kế website, nhưng nó chưa chắc đã được tối ưu triệt để với các bộ máy tìm kiếm. Cũng như tốc độ tải trảng của website. Hiện nay, với kho themes khổng lồ của Wordpress thì bạn có thể dễ dàng tìm cho mình một themes vừa nhẹ vừa load nhanh. Nhưng đôi khi những themes có đầy đủ 2 yếu tố đó. Lại chưa chắm đã làm hài lòng chúng ta về tính thẩm mỹ của nó. Vậy làm thế nào để có thể đạt được cả 2 yếu tố đó trong cùng một website? Đây chính là câu hỏi của rất nhiều người  khi đã hoàn thành lên một website ưng ý của mình và bắt đầu đi tìm cho mình một câu trả lời để giúp cải thiện tốc độ trang web của mình.

Trong bài hôm nay, iHuongDan sẽ hướng dẫn các bạn 7 bước để có thể tối ưu website của mình và có thể đạt điểm Google PageSpeed Insights cao nhất cho website WordPress của mình. Chúng ta cùng bắt đầu nhé.

optimus Pagespeed 100 điểm hiểu biết

1. Tối ưu hóa hình ảnh

Google PageSpeed ​​Insights tối ưu hóa hình ảnh

Với thông báo, tối ưu hoá hình ảnh từ Google PageSpeed Insights. Nó cho chúng ta biết chúng ta cần để tối ưu hóa hình ảnh của của website chúng ta. Để khắc phục cảnh báo này, chúng ta chỉ cần cài đặt plugin  Image Optimizer Optimus của tác giả KeyCDN. Với Plugin này, sẽ tập trung vào việc nén lossless , có nghĩa là chúng ta sẽ không bị giảm chất lượng trong hình ảnh.

Xem thêm: Cách thêm thẻ Alt tối ưu hình ảnh cho seo trong Woocommerce

những hiểu biết về tốc độ trang tối ưu hóa hình ảnh

2. Giảm kích thước Javascript và CSS

giảm bớt javascript css html

Với thông báo này, chúng ta cần tối ưu JavaScript , CSS và HTML của website chúng ta. Để khắc phục vấn đề này, cách tốt nhất và hoàn toàn miễn phí đó là chúng ta nên sử dụng  Plugin Autoptimize để thực hiện công việc tối ưu Javascript, CSS và HTML. Trong Plugin này sẽ có các chứng năng cài đặt như:

  1. Tối ưu hóa HTML Code.
  2. Tối ưu hóa mã JavaScript.
  3. Tối ưu hóa CSS Mã.

Xem thêm: Cách khắc phục lỗi khi cài đặt AMP cho Website WordPress

Ngoài ra, tôi khuyên bạn nên cài đặt và sử dụng theme plugin WordPress cache Enabler để nâng cao hiệu suất hơn.

Google PageSpeed ​​Insights việc rút gọn

3. Tận dụng trình duyệt Caching

PageSpeed ​​Insights bộ nhớ đệm trình duyệt đòn bẩy

Các tập tin

Với cảnh báo về tận dụng bộ nhớ đệm của trình duyệt. Chúng ta nên sử dụng plugin WordPress CDN Enabler này để hỗ trợ giúp chúng ta có thể nâng cao khả năng lưu trữ bộ nhớ đệm trình duyệt cho website của chúng ta. Sau đó chúng ta theme đoạn mã code sau vào tệp tin  .htaccess của website chúng ta.

 
 <filesMatch ".(ico|pdf|flv|jpg|svg|jpeg|png|gif|js|css|swf)$">
 Header set Cache-Control "max-age=84600, public"
 </filesMatch>

Dành cho máy chủ Nginx.

location ~* .(js|css|png|jpg|svg|jpeg|gif|ico)$ {
    expires 2d;
    add_header Cache-Control "public, no-transform";
}

Google Analytics

Google PageSpeed ​​Insights phân tích

Với cảnh báo này, để khắc phục bạn hãy sử dụng đoạn code sau để thay thế cho đoạn code Analytics hiện tại của bạn:

<script src="https://cdn.jsdelivr.net/ga-lite/latest/ga-lite.min.js" async></script> <script> var galite = galite || {}; galite.UA = 'UA-XXXXXX'; // Insert your tracking code here </script>

Các bạn chèn ngay trước thẻ </body> nhé.

những hiểu biết về tốc độ trang bộ nhớ cache-control

4. Cho phép nén

Tiếp theo chúng ta nên nén Gzip cho website của chúng ta. Với việc nén này chúng ta sẽ nén bằng code .htaccess nhé.

Xem thêm: Hướng dẫn cách lấy ảnh bên ngoài làm ảnh thumbnail trong WordPress

Đối vớiới máy chủ Apache

Bạn có thể cho phép nén bằng cách thêm vào file .htaccess.

<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

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4.0[678] no-gzip
  BrowserMatch bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

Đối vớiới máy chủ Nginx

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;
gzip_disable "MSIE [1-6].(?!.*SV1)";
gzip_vary on;

những hiểu biết về tốc độ trang nén gzip

5. Giảm thời gian phản ứng máy chủ.

Để cải thiện vấn đề này, thì việc tốt nhất đó chính là chúng ta nên sử dụng một hosting ổn định, hay VPS chất lượng.

optimus google 100 điểm PageSpeed ​​Insights

6. Xoá Query Strings – Optional Step

Với lỗi này, chính là lúc trong URL của website chúng ta chứa các ký tự đặc biệt như “?”. Với những ký tự như này, sẽ giảm thiểu khả năng lưu giữ cache của Server. Để khắc phục chúng ta cần thêm đoạn code sau vào file function.php

function _remove_script_version( $src ){
$parts = explode( '?ver', $src );
return $parts[0];
}
add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );

Nếu như bạn không thông thạo code, bạn có thể sử dụng plugin như Query strings remover.

chuỗi truy vấn remover

Plugin này loại bỏ các chuỗi truy vấn từ các nguồn tài nguyên tĩnh như CSS và JavaScript. Nó sẽ cải thiện hiệu suất bộ nhớ cache của bạn và điểm số tổng thể trong Google PageSpeed ​​Insights, YSlow, Pingdom và GTmetrix. Với plugin này, chúng ta sử dụng rất đơn giản chỉ cần cài đặt và xoá cache đi là đã ok rồi.

Xem thêm: Hướng dẫn cách tạo SiteLink cho Website đơn giản nhất

Kết luận.

Trên đây là 7 bước hi vọng sẽ giúp bạn cải thiện tốc độ trang web cũa như điểm số google speed insights cao nhất có thể. Chúc các bạn thành công. Nếu thấy hữu ích thì like và share để ủng hộ iHuongDan nhé.

Nguồn: keycdn.com/blog/google-pagespeed-insights-wordpress/

Loading...

Leave a Comment

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *


1 + 1 =