Cách tăng tốc website trên PageSpeed Insights hiệu quả nhất

Nếu bạn chưa biết cách tăng tốc website trên PageSpeed Insights hiệu quả, thực hiện nhanh, thao tác đơn giản... thì nhất định bạn phải bỏ ra ít phút để đọc bài hướng dẫn cực kỳ dễ hiểu bên dưới đây. 

Tầm quan trọng của việc tối ưu website

Trong thời đại công nghệ hiện nay, website là một công cụ không thể thiếu đối với doanh nghiệp đặc biệt là các công ty liên quan đến thương mại điện tử. Nhưng nếu website của bạn hoạt động không ổn định, thời gian tải trang lâu.... trải nghiệm người dùng kém thì chắc chắn sẽ ảnh hưởng đến thương hiệu và doanh thu. Lúc này, bạn cần phải tối ưu trang web của mình.

Cách tăng tốc website trên PageSpeed Insights hiệu quả nhất 1

Việc tối ưu mang lại rất nhiều lợi ích. Trong đó phải kể đến đó là thu hút nhiều người xem, tốc độ tải trang nhanh hơn, tối ưu SEO website, tăng doanh thu đồng thời tạo danh tiếng và thương hiệu.

Vậy tăng tốc và tối ưu website bằng cách nào?

Cách tăng tốc website trên PageSpeed Insights hiệu quả

Giảm dung lượng ảnh

Trên trang chủ, thứ mà chúng ta nhìn thấy đầu tiên là rất nhiều ảnh. Nhiều ảnh mà dung lượng ảnh quá nặng sẽ ảnh hưởng lớn đến việc tải trang, làm giảm tốc độ của website. Vậy thì cách tăng tốc trang web đầu tiên là phải giảm dung lượng của ảnh.

Cách tăng tốc website trên PageSpeed Insights hiệu quả nhất 2

Sử dụng Nginx để cache server

Nginx đã không còn quá xa lạ trong quá trình bạn deploy website. Tầm quan trọng của việc sử dụng cache thì không cần phải bàn cãi. Vậy caching server sử dụng Nginx như thế nào?

Bước 1: Trên VPS, bạn hãy gõ đường dẫn:

sudo vi /etc/nginx/sites-available/default

Bước 2: Sau đó thêm dòng lệnh sau:

server {

...

location ~* ^.+.(jpg|jpeg|gif|css|png|js|ico|xml)$ {

expires           15y;

}

...

}

Expires bạn có thể đặt bao nhiêu tùy thích.

Đơn giản như vậy thôi nhưng khi chấm điểm, website của bạn sẽ tăng được khoảng 10 điểm đó.

Sử dụng assets:precompile để nén các file js, css

Một website sẽ không thể thiếu những file quan trọng như thế này. Điều gì xảy ra khi những file js và css của bạn quá lớn? Và việc load nhưng file này sẽ làm giảm tốc độ của website.

Cách khắc phục như sau:

Đầu tiên đặt đúng thứ tự các file này như sau:

# layout/application.html.erb

<head>

...

<%= stylesheet_link_tag 'application', media: 'all'%>

</head>

<body>

</body>

<%= javascript_include_tag 'application'%>

Việc đặt những file này theo thứ tự cho phép google đọc nội dung của thẻ meta trước. Sau đó đến load css và các phần tử của trang. Cuối cùng thì mới load đến các file js. Người dùng sẽ nhìn thấy website của bạn đã load rất nhanh.

Sử dụng assets.rb của rails để nén:

# config/initializers/assets.rb




Rails.application.config.assets.precompile += %w( *.js )

Bạn đã cài đặt những file cần nén trong config như trên. Điều này sẽ có 2 chức năng: gộp tất cả các file js, css thành 1 file và chuyển nó về dạng “*.min.js”. Do đó file js của bạn được nén, được tối ưu đến mức tối đa.

Và đến khi deploy website lên server ta có:

RAILS_ENV=xxx rake assets:precompile

Tóm lại việc nâng điểm website vẫn là một chặng đường dài. Mong rằng với những cách tăng tốc website trên PageSpeed Insights trên đây sẽ giúp ích cho bạn đọc nhiều hơn. Chúc thành công!

Via viblo.asia