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ả


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 CDN 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 CDN
  • 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:


Với php có thể tham khảo thêm ở đây

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.
5 Likes

Web có một trang duy nhất, việc 100% cả Mobile lẫn Desktop xem ra quá dễ, ăn thua là làm cho được một website hoàn chỉnh mà mỗi trang lại không có mẫu số chung mới khó. Một website cho một công ty lớn thì nó lại còn có việc chạy tùm lum thứ khác nhau trên cùng một domain, gần như việc tối ưu là việc làm soi lông chó bắt ve.

2 Likes

Ở đây mình chỉ hướng dẫn cách làm, và dẫn chứng để chỉ ra rằng cách làm này có hiệu quả, có ảnh hưởng đến chỉ số điểm mà google đánh giá. Còn tùy website nếu không thể đánh đổi tiêu chí để cải thiện điểm thì có thể giữ lại. Bạn có vẻ đang hiểu sai ý tốt của mình, và việc mình dành hơn 30p để chia sẻ có vẻ như chẳng giúp ích được ai cả. Và vấn đề phải khó thì mới đươc hướng dẫn?

1 Like

Không phải là chẳng giúp gì được ai như bạn nghĩ đâu, bài viết bạn là chăm chút, có giá trị cho người chưa từng làm, nó ở các trang không có dân IT sẽ tuyệt lắm luôn.

Nhưng vì trang này toàn anh em học IT, do đó cách làm của bạn khá giống việc dịch bài hướng dẫn của trang Google PageSpeed Insights theo kiểu step by step, hầu hết anh em ở đây có thể làm theo để đạt mức đó. Cho nên, để bài viết có giá trị, bạn nên chia sẻ vài mẹo/ kinh nghiệm hoặc cảm thấy hướng dẫn của Google có gì đó chưa thật ổn, cái đó sẽ tuyệt hơn.

Vậy đó, nói chung là đăng nhầm diễn đàn chứ không phải là bài dở/ kém giá trị. Chúc bạn có những bài thú vị và phù hợp anh em IT hơn.

2 Likes

Chỉnh sửa lại CDN không phải CND nhé bạn.
Mà mình yêu CDN sao ý :v

Không hiểu lý do vì sao lại bị flagged as spam, mong mr Đạt giải thích dùm ah

Bạn Reply vào Off Topic, muốn hỏi thì nên tạo một Topic mới. Đừng đào mộ !

oh cảm ơn bạn! do mới tham gia nên ko rõ, hôm rồi search google cách xử lý thì gặp bài này nên vào comment.

1 Like

Rất cám ơn bạn. Bài viết rất tốt nhưng hơi chung chung, nhưng dẫu sao mọi người biết hướng giải quyết là ok!

hồi trước làm WP thì chỉ cần tối ưu hình ảnh là hơn 80 rồi. còn lại xài plug in là ok.
nhưng có một số chỗ phải chấp nhận mất điểm vì phải có nó thì web mới chạy dc

2 posts were merged into an existing topic: Topic lưu trữ các post off-topic - version 3

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?