Đăng nhập Đăng ký website CÙNG HỢP TÁC 
logo-website

Tối ưu tốc độ website bằng công cụ PageSpeed Insights của Google

Tối ưu hóa để website tải về nhanh nhất và hiển thị đầy đủ nội dung trên mọi thiết bị là yêu cầu hàng đầu để đáp ứng trải nghiệm người dùng (UX), bạn nghĩ xem khách hàng có thể kiên nhẫn ngồi chờ hơn cả phút chỉ để đợi website hiển thị xong nội dung trang chủ

Với những ai đang quản trị website thì tốc độ luôn là một yêu cầu bắt buộc phải thực hiện vì tốc độ nhanh sẽ giúp tăng thêm lượng người truy cập, giúp giữ chân người sử dụng lâu hơn, giúp việc SEO hoặc chạy quảng cáo được thuận lợi và hiệu quả hơn vì vậy tốc độ website cũng là 1 trong các tiêu chí Google dùng để đánh giá và xếp hạng website.

Liên quan đến tốc độ website chúng ta sẽ có 2 yếu tố chính ảnh hưởng trực tiếp là phần cứng và phần mềm.
Phần cứng: bao gồm chung tất cả những yếu tố liên quan đến thiết bị hoặc dịch vụ liên quan đến nhà cung cấp, như máy chủ website, đường truyền internet v.v… đây là những yếu tố mà chỉ có nâng cấp mới cải thiện được tốc độ.
Phần mềm: là những yếu tố mà chúng ta có thể cải thiện và tối ưu hóa theo từng mục đích cụ thể, phần mềm bao gồm cả mã nguồn website và phần mềm dành cho web server như Apache, Nginx v.v...

Đối với các phần mềm thuộc server bạn chỉ có thể điều chỉnh nếu có quyền quản lý server hoặc nhờ người quản trị thực hiện, chúng ta sẽ cùng tìm hiểu trong bài viết khác chi tiết hơn, trong nội dung bài viết này chúng ta chỉ tìm hiểu các yếu tố làm chậm website từ phía mã nguồn website và cách đơn giản nhất để cải thiện các yếu tố này.

Đầu tiên chúng ta cùng tìm hiểu cách đánh giá tốc độ website của Google và tối ưu hóa các yêu cầu này thông qua công cụ PageSpeed Insights do chính Google cung cấp.
Google không đánh giá tốc độ dựa vào nội dung trên website nhiều hay ít, mà đánh giá website đó đã tối ưu về mặt kỹ thuật hay chưa, nên khi đáp ứng được một trong các yêu cầu này chắc chắn tốc độ sẽ được cải thiện.

Truy cập địa chỉ: https://developers.google.com/speed/pagespeed/insights/ và nhập vào địa chỉ website cần kiểm tra.
Google sẽ phân tích và đưa ra đánh giá cho website của bạn, tùy thuộc vào từng website mà ta sẽ có bảng đánh giá như sau:Kết quả kiểm tra website bằng PageSpeed Insights
Chúng ta sẽ có các mục sau:
Optimization Suggestions: là các đề xuất của Google về các yêu cầu chưa được tối ưu hóa trên website.

Optimize images: là hình ảnh chưa được tối ưu hóa, cái này liên quan đến thuật toán nén dữ liệu, bằng việc loại bỏ các thông tin mà mắt người không thấy, chất lượng ảnh trước và sau khi nén không thay đổi nhưng kích thước file sẽ khác nhau. Kích thước càng nhỏ thì file sẽ được load càng nhanh.

Hình với chất lượng 100%
Hình với chất lượng 80%
Hình với chất lượng 60%
Kích thước 91.4KB (chất lượng 100%) Kích thước 47.6KB (chất lượng 80%) Kích thước 29.5KB (chất lượng 60%)
Như bạn đã thấy 3 hình trên chất lượng gần tương đương nhau nhưng kích thước file lại khác nhau rất nhiều

Eliminate render-blocking JavaScript and CSS in above-the-fold content: là các yếu tố làm chậm quá trình hiển thị website trên trình duyệt. Cái này thì đòi hỏi bạn phải có kỹ năng lập trình nếu tự code hoặc dùng các plugin như Autoptimize nếu dùng mã nguồn mở Wordpress.
Hiểu rõ cơ chế tải website sẽ giúp bạn giải quyết được vấn đề này.

Cơ chế phân tích HTML và Script của website

Cơ chế phân tích HTML và Script của website

Cơ chế hoạt động của từng loại như sau:

Thẻ  script : HTML file sẽ được phân tích cho đến khi gặp thẻ script, lúc này quá trình phân tích ngừng lại, đợi tải xong file script, sau đó thực thi script này xong mới tiếp tục phân tích HTML.
Thẻ  script async : HTML file sẽ được phân tích cho đến khi gặp thẻ script, lúc này quá trình phân tích vẫn tiếp tục, song song đó file script sẽ được tải, khi tải xong thì quá trình phân tích tạm dừng chờ thực thi script xong mới tiếp tục phân tích HTML.
Thẻ  script defer : HTML file sẽ được phân tích cho đến khi hoàn tất, không bị dừng lại lúc nào, khi gặp thẻ script các file script sẽ được tải song song, khi việc phân tích HTML hoàn tất thì các script mới được thực thi.

Theo cơ chế trên thì tổng thời gian tải website hoàn chỉnh là không thay đổi, nhưng với người sử dụng thì sẽ cảm thấy sự khác biệt, việc phân tích html liên tục nghĩa là người sử dụng sẽ thấy nội dung webiste được tải và hiển thị ngay trên trình duyệt, cho cảm giác website chạy nhanh hơn. Như vậy mục đích chính của việc tối ưu này là làm cho các phần nội dung được ưu tiên hiển thị trước, các phần chức năng sẽ được tải và thực thi sau.
Ngoài việc chèn trực tiếp file script vào website, chúng ta còn có cơ chế load file script khi cần thực hiện chức năng trong file này nhằm tránh bị block trong quá trình phân tích HTML. Tùy vào nhu cầu bạn có thể khai báo hàm này ở đầu website sau đó sử dụng hàm này tại bất kỳ vị trí nào trên website.
function dloadscript(url,callback){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script);
callback();
}
Sử dụng như sau:
dloadscript(‘file_script_can_load.js’,function(){
…thực thi các lệnh hoặc hàm trong file này…
});

Minify JavaScript: là các file javascript chưa được tối ưu hóa, chỉ đơn giản bằng cách loại bỏ các khoảng trắng dư thừa và các ký tự xuống dòng trong file sẽ giúp giảm kích thước tập tin từ đó file sẽ được tải nhanh hơn.
Ví dụ: Trong file javascript tên fc.js của bạn có các hàm như sau:
function ten_ham_1(doi_so){
}
function ten_ham_2(doi_so){
}
Thì file fc.js tối ưu được đề xuất như sau:
function ten_ham_1(doi_so){}function ten_ham_2(doi_so){}
nghĩa là tất cả sẽ nằm trên một dòng duy nhất và không có khoảng cách dư nào trong file. Có thêm một tùy chọn nữa là thay thế các tên hàm dài bằng các tên khác ngắn hơn như function f1(a1){}function f2(a2){}, quy tắc của việc tối ưu là file có kích thước càng nhỏ càng tốt.

Minify CSS: cũng tương tự như file .js các file .css tối ưu cũng sẽ được loại bỏ các ký tự dư thừa để giảm kích cỡ.

Không chỉ đưa ra đề xuất mà Google còn cung cấp sẵn các file đã được tối ưu hóa, do đó chúng ta chỉ cần đơn giản là kiểm tra, download các file đề xuất sau đó upload các file này lên website là đã cải thiện được một phần tốc độ website.


Các tin khác
  • CopyRight

  • DMCA.com Protection Status
    Logo thông báo Bộ Công Thương
Chịu trách nhiệm Ông Nguyễn Hữu Dũng
216/14 Bùi Văn Ba, P.Tân Thuận Đông, Q.7, Tp.HCM
MSTCN: 8545777832 - Hotline: 0908.622.880
Email: info@giacongweb.com
Đang online: 15 - Tổng lượt truy cập: 6.135