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

Với quản trị viên thì tốc độ website 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:
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.

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ế 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.

-----------------------------------------------------------------------------

Google đã thay đổi thuật toán đánh giá cho Google PageSpeed Insights

Những thay đổi mới của Google PageSpeed Insights

Như chúng ta đã thấy sau thời điểm 11/2018 Google đã có thay đổi lớn về cách đánh giá khiến nhiều website trước đây điểm số rất cao nhưng khi đánh giá bằng phương pháp mới điểm số còn rất thấp, có những website trước đây đã tối ưu, kiểm tra luôn từ 95-100 điểm mà hiện tại kiểm tra không bao giờ qua được 80 điểm, cá biệt có những website tụt xuống chỉ còn 30-40 điểm.
Vậy tại sao lại có sự khác biệt lớn, chúng ta cùng tìm hiểu những thay đổi này để cải thiện điểm số cho website và xem những đánh giá của PageSpeed Insights có thực sự cần thiết để phải tối ưu.
Đầu tiên chúng ta cùng xem lại kết quả đánh giá giữa PageSpeed Insights cũ và mới.



So sánh 2 kết quả ta có thể thấy sự khác biệt rất lớn đó là phương pháp mới đánh giá chủ yếu dựa vào tổng thời gian đáp ứng của website trong khi phương pháp cũ đánh giá chủ yếu dựa vào từng yếu tố cần tối ưu hóa.
Việc đánh giá dựa vào tổng thời gian sẽ ưu tiên chấm điểm cao các website đáp ứng nhanh về mặt tốc độ nhưng sẽ chấm điểm thấp cho các website có nhiều nội dung cần hiển thị cho dù các website này đều đã tối ưu hóa.
Như chúng ta đã biết hình ảnh là yếu tố quan trọng và chiếm nhiều thời gian nhất khi hiển thị website, tiếp đến là các file Script, Css v.v… do đó việc tối ưu hóa các chỉ tiêu như cách đánh giá cũ vẫn rất quan trọng tuy nhiên để được điểm cao trên PageSpeed Insights hiện tại bạn cần tập trung các yếu tố sau:
1. Tối ưu hóa: hình ảnh, Script, Css đây là các yếu tố quan trọng vì dung lượng càng nhỏ thì tốc độ load sẽ càng nhanh. Cái này không thể bỏ qua cho dù dùng bất kỳ phương thức nào để tính toán.
2. Cache website: cái này là tất yếu và hầu như website nào cũng có, tùy thuộc vào mô hình website và dữ liệu mà bạn chọn phương pháp cache phù hợp nhất.
3. Hạn chế nội dung hiển thị trên trang chủ website:
Nếu như trước đây chỉ cần tối ưu 2 yếu tố trên thì webiste đã có thể đạt từ 95-100 điểm thì hiện tại chỉ còn khoảng 80-85 điểm (tất nhiên mức độ chênh lệch tùy theo từng website cụ thể), mức điểm trên được đánh giá trên cùng 1 website, vẫn cùng hosting và nội dung, không có bất kỳ thay đổi nào.
Như vậy sau khi Google Insight thay đổi, hầu hết các website của mình đều bị giảm khoảng 10-15 điểm. Xem cảnh báo thì hầu hết đều là cần cải thiện Chỉ mục tốc độ.
Điều chỉnh website bằng cách bỏ bớt các thông tin cần hiển thị là website sẽ tăng điểm, nghĩa là thời gian tại Chỉ mục tốc độ càng nhỏ thì điểm số của bạn càng cao.
Ví dụ trên trang chủ website trước đây hiển thị mục Tin tức có 5 bài viết mỗi bài có 1 hình ảnh, để cải thiện tốc độ bạn phải điều chỉnh lại thành chỉ có bài viết đầu tiên hiển thị hình ảnh, 4 bài viết tiếp theo chỉ có tiêu đề, hoặc chỉ để lại 2 tin tiếp theo, tương tự như vậy cho các mục khác, làm sao cho lượng thông tin hiển thị trên trang chủ website là ít nhất mà vẫn thể hiện đủ thông tin cần thiết.

Lưu ý: Các bạn cần phải tối ưu website nhưng tùy nhu cầu mà điều chỉnh cho phù hợp, không nhất thiết phải tối ưu tất cả để được 100 điểm vì có những yếu tố mà bạn không thể can thiệp được bằng phần mềm, bắt buộc phải nâng cấp phần cứng như tốc độ server, đường truyền internet v.v… hoặc bạn cần hiển thị nhiều nội dung và hình ảnh để website đẹp và sinh động hơn thì không thể giảm bớt nội dung chỉ để website có điểm số cao.

Một lưu ý quan trọng nữa là trên website nếu có sử dụng các Plugin của bên thứ 3 như Chat ZenDesk, Zalo, Facebook, Add this, Youtube v.v..., sẽ làm website chậm lại, bỏ bớt các plugin này thì website có thể tăng thêm 3-4 điểm, việc tăng đánh giá từ 20-30 điểm lên 70-80 điểm đôi khi rất dễ nếu thực hiện đúng các yêu cầu trên, nhưng từ 80 điểm trở lên thì việc tối ưu thêm 4-5 điểm đòi hỏi phải thực hiện nhiều việc hơn.