Hướng dẫn tối ưu Google PageSpeed Insights

Mấy bữa nay rảnh rỗi trong lúc dự án chưa có, mình có tối ưu lại cái website từ thời nhà đá của mình, tính ra là làm từ 2014. Đồ nhà làm không có tiền nên lười, responsive cũng không. Sẵn làm lại rồi thì vọc vạch tối ưu pagespeed insights cho nó luôn, nếu ai chưa biết cái này là gì có thể google thêm. Site này mình tư làm theo con mắt thẩm mỹ của mình, không có thiết kế, ảnh thì tài trợ bởi bác google, và chuyên sâu của mình là back-end, hiện tại làm fullstack freelancer (nghỉ việc cty từ tháng 6/2017 về quê ở với vợ), trình ở mức code web dạo.
Link: https://developers.google.com/speed/pagespeed/insights/
Và đây là kết quả

pagespeeddesktop.jpg1366x662 202 KB

pagespeedmobile.jpg1366x662 227 KB

Chưa được maximum vì còn 1 yếu tố là file .js của facebook customer messenger không cho clone file về host được mà facebook bắt buộc phải dùng CND của nó nên đành chịu, 2 nữa là bên desktop file logo nếu giảm chất lượng ảnh như google yêu cầu thì quá xấu, nên thôi mình chấp nhận mất 1 điểm.
Mình sẽ giải thích và hướng dẫn cách tối ưu từng mục, tất nhiên còn nhiều yếu tố ảnh hưởng dẫn đến không thể được điểm cao như yếu tố thẩm mỹ, file cdn của bên thứ 3 không can thiệp được.
Thật sự thì google các bài hướng dẫn làm việc này không thiếu, nhưng mình vẫn viết bài này bằng kinh nghiệm thực tế mình đã làm.

1.Bật nén
Để thỏa mãn yếu tố này các bạn yêu cầu phải bật nén gzip lên cho website. Về mỗi ngôn ngữ sẽ có những cách khác nhau, như bên .Net thì sẽ cấu hình trong web.config, và yêu cầu server phải bật Dynamic Content Compression lên. Có thể check website đã enable gzip chưa ở đây https://checkgzipcompression.com/

2.Giảm bớt CSS
Yếu tố này khá đơn giản, chỉ cần minify file css lại là được, nghĩa là gom tất cả code về thành 1 dòng và không có khoảng trắng. Mình thường dùng tool này https://cssminifier.com/. Các bạn để ý thường các file có dạng name.min.css thì min là viết tắt của minify.
Các bạn lưu ý nhớ backup, tránh trường hợp minify file xong ko giữ file gốc là hết thấy đường sửa code luôn nhé :))

3.Giảm bớt HTML
Tương tự yếu tố 2, nhưng sử dụng tool này https://www.willpeavy.com/minifier/

4.Giảm bớt JavaScript
Tương tự yếu tố 2, nhưng nhấn vào link JavaScript Minifier

5.Giảm thời gian phản hồi của máy chủ
Nói dễ hiểu thì khi bạn gõ tên miền thì phải mất 1 lúc server mới trả kết quả về, và kết quả này dưới 0.2s thì google xem như đạt. Đừng hiểu nhầm là thời gian đến lúc trang web hiển thị hoàn toàn.
Có nhiều yếu tố ảnh hưởng đến kết quả này.

• Tối ưu hóa tài nguyên (hình ảnh, .css, js,…)
• Sử dụng CND
• Sử dụng cache
• Phần cứng server đang sử dụng, như mình là đang dùng VPS 4 cores, 5Gb ram, tự thuê.
  Phần này các bạn có thể để đấy, nếu làm tốt các yêu cầu khác thì phần này sẽ tự động đc tối ưu, ngoại trừ yếu tố liên quan đến phần cứng server không can thiệp được.

6.Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên
Chặn hiển thị nghĩa là trình duyệt phải mất thời gian load các file này trước, xong mới render html ra được, làm tăng thời gian hiển trị website để nhìn dùng có thể nhìn thấy.
Để xử yếu tố này đơn giản là không sử dụng các file .css và .js từ nguồn khác, ví dụ
https://fonts.googleapis.com/css?family=Bowlby+One+SC
https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css
mà hãy down về và sử dụng link từ host
gom tất cả các file .css và .js xuống trước , điều này có thể ảnh hưởng đến thẩm mỹ trong lần đầu tiên website hiển thị vì css chưa kịp load, nhưng nếu web nhẹ thì thường load rất nhanh nên cũng không ảnh hưởng mấy, và từ lần 2 có cache rồi nên sẽ không bị nữa.

7.Tránh các chuyển hướng trang đích
Thường yếu tố này auto thỏa mãn, chỉ khi nào tên miền này là tên miền trung gian và redirect sang một trang web khác thì mới bị fail.

8.Ưu tiên nội dung hiển thị
Thường mục này nếu tối ưu tốt mục 6 là sẽ tự động đạt được. Lý do là vì khi bị chặn hiển thị, một số script load sau dẫn đến html hiển thị trước nhưng script chưa load làm cho nội dung trước và sau khi script load khác nhau, điển hình là cái slideshow.

9.Leverage Browser Caching
Lỗi này bạn chỉ cần bật cache cho các file tài nguyên trên website là ok, đối với IIS có thể vào mục Output caching bật cache cho các file .css/.js/.jpg/.jpeg/.png/.gif/.html/.aspx,…, túm lại là google cảnh báo file nào thì cứ bật cache cho thành phần mở rộng của file đó. Tham khảo thêm ở đây:

Caching <caching>

Overview The element allows you to enable or disable page output caching for an Internet Information Services (IIS) 7 application. This eleme...

10.Tối ưu hóa hình ảnh
Mục này các bạn xử lý bằng cách nhìn google gợi ý, sẽ có 2 loại:

• Nén file …
• Nén và giảm kích thước…
  Nén file các bạn có thể dùng 2 website sau đây: https://tinypng.com/, https://compressor.io/
  https://compressor.io/ thì cho phép review lại ảnh sau khi xử lý, có chế độ lossless để giảm ảnh đến chất lượng xấu hơn, nếu ảnh sau khi đã xử lý ở chế độ lossy vẫn bị google cảnh báo có thể chuyển sang chế độ lossless (lúc này nên cân nhắc yếu tố thẩm mỹ, nếu ảnh xấu quá có thể chấp nhận mất điểm), không biết thằng này có api không thì mình chưa nghiên cứu, https://tinypng.com/ thì có, quota là 500 ảnh/tháng với tài khoản free.
  Giảm kích thước nghĩa là khu vực 200x200px phải hiển thị ảnh res bằng hoặc nhỏ hơn 200px, không sử dụng ảnh lớn hơn rồi dùng css ép ảnh nhỏ lại, tất nhiên google vẫn du di nếu ảnh đó size đã quá nhỏ.
  Sau khi xử lý trên website xong, các bạn có thể down ảnh về và up ngược lại lên host, sau đó test lại, mỗi lần cách nhau 30s vì google cache trong khoảng thời gian đó. Và nhớ backup file gốc.