Tối ưu theo chuẩn Google PageSpeed ​​Insights

Google PageSpeed ​​Insights chắc chắn là một công cụ hữu ích dành cho quản trị viên web, nhà phát triển và chủ sở hữu trang web thuộc mọi loại từ blog, diễn dàn, thương mai điện tử… Tuy nhiên, chúng tôi nhận thấy rằng rất nhiều người dành hàng giờ ám ảnh về việc tối ưu hóa trang web của họ, để thử và đạt điểm 100/100 trong bài kiểm tra này.

Thi đấu điểm số mục tiêu là điểm số sự thật là đây không phải là cách Google PageSpeed ​​Insights được sinh ra, cũng không phải là thứ xứng đáng để theo đuổi.

Khi bạn tập trung vào việc triển khai các đề xuất của nền tảng thay vì tập trung vào con người giống như bạn bị ngộ độc vì điểm số hay mình thường gọi là hack điểm (tôi cảm thấy may mắn khi google không có chỉ số full load sợ người dùng ám ảnh quá xóa nội dung đi để đo lường, lại còn xóa nội dung trang chủ xong đo lường tưởng đây là cả nguyên cái website).

Tại sao điểm số các công cụ speed test không quan trọng?

Mình cũng rất thích công cụ google PageSpeed Insights nhưng không hài lòng lắm với một số người sử dụng nó thao túng điểm số nhưng tốc độ thực tế thì rất chán. đó là thứ mình khó chịu nhất?

Đối với mình, những chỉ số nào mà người dùng được hưởng lợi thì chỉ số đó là những chỉ số chúng ta cần nỗ lực, còn ngược lại người dùng không được lợi gì thì bỏ qua. việc đạt được 100/100 điểm trong Google PageSpeed ​​Insights không thực sự quan trọng.

Bài đăng này là hướng dẫn toàn diện để sử dụng Google PageSpeed ​​Insights nhằm mang lại lợi ích tốt nhất cho website bạn. Chúng tôi sẽ đề cập đến cách Google đánh giá điểm của bạn, cũng như cách kết hợp các đề xuất đó thì mình sẽ phải làm gì?

những đề xuất của google page speed Insights không phải là đúng tuyệt đối chính xác 100%, nó cũng có thể rất giá trị quan trọng với bạn và có những đề suất thì không, mỗi một website thì sẽ có chiến lược tối ưu hóa khác nhau, dữ liệu google page speed Insights khuyến cáo những đề suất chung chung.

Bắt đầu nào!

Google PageSpeed ​​Insights là gì

Nếu bạn chưa quen với Google PageSpeed ​​Insights hay gọi google page speed , đây là một công cụ được sử dụng để kiểm tra đánh giá hiệu suất trang web do công ty google phát triển. Bạn có thể nhập bất kỳ URL nào và phân tích URL đó:

Tính đến năm 2018, điểm PageSpeed ​​Insights được tính thông qua Lighthouse , Lighthouse được tích hợp sẵn trong Google chrome dev tool mã nguồn mở của Google để cải thiện chất lượng tổng thể của các trang web. Lighthouse là Nền tảng này có thể đánh giá tất cả các yếu tố, bao gồm hiệu suất, khả năng truy cập, UX, SEO v.v.

Ngoài việc ảnh hưởng đến Trải nghiệm người dùng (UX) trên trang web của bạn, hiệu suất cũng đóng một vai trò trong SEO . Do PageSpeed ​​Insights được điều hành và phát triển bơi google.

Nên điều đó có lý do là điểm số của bạn có thể có một số ảnh hưởng đến xếp hạng của Trang kết quả trên Công cụ tìm kiếm hay không?.

Thực tế là Google không sử dụng PageSpeed Insights để xác định thứ hạng – google đã tuyến bố tốc độ trang web là một yếu tố xếp hạng, rõ ràng và đơn giản.

thực sự của kết quả kiểm tra hiệu suất của bạn và có giá trị hơn nhiều so với điểm số thực tế của bạn.

Việc đạt 100/100 sẽ không đảm bảo cho bạn vị trí hàng đầu trên SERPs. mà hãy tập trung tối ưu cho người dùng thực tế.

25 đề xuất của google PagaSpeed Insights để tối ưu tốc độ website

Khi được xem xét kết hợp, Dữ liệu Trường (du liệu thu thập từ người dùng) và Dữ liệu Phòng thí nghiệm test sẽ cung cấp cho bạn ý tưởng về thời gian tải thực tế của trang web của bạn. Như chúng tôi đã đề cập trước đó, điều này thậm chí còn quan trọng hơn điểm số Tốc độ trang tổng thể của bạn, vì vậy bạn sẽ muốn chú ý đến những con số này.

Giờ là chương trình giải mã các đề suất của google PagaSpeed Insights, chúng ta cùng nhau bắt đầu nhé.

1. Loại bỏ các tài nguyên chặn hiển thị

Điều này đề cập đến các file JavaScript và CSS (các file này nặng trên 20kb trở lên) đang ngăn trang của bạn hiện thị HTML. Trình duyệt của khách truy cập phải tải xuống và xử lý các tệp này trước khi nó có thể hiển thị phần còn lại của trang, do đó, việc có nhiều tệp ‘trong màn hình đầu tiên’ có thể tác động tiêu cực đến tốc độ cảm nhận load nhanh của trang web của bạn.

Bạn có thể tìm hiểu thêm về vấn đề này trong hướng dẫn của chúng tôi để loại bỏ các tập lệnh chặn hiển thị . Theo như Google có liên quan, có hai giải pháp bạn nên xem xét:

• Nếu bạn không có nhiều JavaScript hoặc CSS , bạn có thể nhúng nội bộ chúng vào html để loại bỏ cảnh báo này. Bạn có thể làm điều này với một plugin với nhiều Plugin hỗ trợ tăng tốc WordPress. Tuy nhiên, điều này thực sự chỉ có giá trị cần thiết đối với các trang web rất nhỏ ít file javascript và css với một máy chủ webhost trâu bò các nhúng này thực sự tốn rất nhiều tài nguyên máy chủ webhost. Hầu hết các trang web WordPress đều có nhiều JavaScript để phương pháp này thực sự có thể làm chậm website WordPress của bạn.
• Tùy chọn khác là defer hoãn lại JavaScript hoặc tải không đồng bộ của bạn. Thuộc tính này tải xuống tệp JavaScript của bạn trong quá trình phân tích cú pháp HTML, nhưng chỉ thực thi nó sau khi quá trình phân tích cú pháp hoàn tất. Ngoài ra, các tập lệnh có thuộc tính này thực thi theo thứ tự xuất hiện trên trang. Bạn có thể thực hiện được bằng rất nhiều plugin tăng tốc WordPress như LiteSpeed, WP rocket, wp performance, perfmatters, có rất nhiều plugin WordPress hỗ trợ … hay bạn cũng có thể sử dụng funcitons.php để có thể defer trình hoãn file hay tải không đồng bộ.

Ghi chú đã defer trì hoãn cẩn thận không thì sẽ rất dễ lỗi website đặc biệt website cấu trúc phức tạp kiểu có file javascript này sử lý xong được rồi thì file javascript này mới có thể hoạt động được – với WordPress đặc biệt để ý có file thư viện jquery

Bạn sẽ tìm thấy danh sách các tài nguyên bị ảnh hưởng nhiều nhất bởi vấn đề này bên dưới đề xuất trong kết quả Tốc độ trang của bạn.

2. Tránh tạo chuỗi các yêu cầu quan trọng

Một số phần tử nhất định nào đó – chẳng hạn như JavaScript và CSS mà chúng ta đã thảo luận ở trên – phải được tải hoàn chỉnh trước khi trang của bạn hiển thị.

Sơ đồ này sẽ hiển thị cho bạn một loạt các yêu cầu phụ thuộc phải được thực hiện trước khi trang của bạn hiển thị. Nó cũng sẽ cho bạn biết kích thước của từng tài nguyên. Lý tưởng nhất là bạn muốn giảm thiểu số lượng yêu cầu phụ thuộc, cũng như kích thước của chúng.

Một số phương pháp để hoàn thành các mục tiêu này được đề cập trong các khuyến nghị khác được thảo luận trong bài đăng này, bao gồm:

• Loại bỏ tài nguyên chặn kết xuất
• Trì hoãn hình ảnh ngoài màn hình (sử dụng lazy load ảnh)
• Nén file CSS và JavaScript

Ngoài ra, bạn có thể tối ưu hóa thứ tự tải nội dung để rút ngắn CRP. Điều này có nghĩa là chuyển nội dung trong màn hình đầu tiên lên đầu tệp HTML của bạn. Bạn có thể tìm hiểu thêm về cách tối ưu hóa CRP trong bài đăng của chúng tôi, “CSS quan trọng và tải không đồng bộ CSS ”.

Điều quan trọng cần lưu ý là không có một số lượng kỳ diệu các chuỗi yêu cầu quan trọng mà bạn cần phải thực hiện. Google PageSpeed ​​Insights không tính lần kiểm tra này là “đạt” hoặc “không thành công”, không giống như nhiều đề xuất khác của nó. Thông tin này chỉ đơn giản là có sẵn để giúp bạn cải thiện thời gian tải.

3: Giảm số lượng yêu cầu và chuyển những tài nguyên có kích thước nhỏ

Các trình duyệt càng phải thực hiện nhiều yêu cầu để tải các trang của bạn và các tài nguyên mà máy chủ của bạn trả về để phản hồi càng lớn, thì thời gian tải trang web của bạn càng lâu.

Do đó, rất hợp lý khi Google khuyên bạn nên giảm thiểu số lượng yêu cầu HTTP bắt buộc và đồng thời giảm kích thước tài nguyên của bạn.

Giống như đề xuất Tránh chuỗi các yêu cầu quan trọng , đề xuất này không dẫn đến ‘đạt’ hoặc ‘không đạt’. Thay vào đó, bạn sẽ chỉ thấy danh sách số lượng yêu cầu được thực hiện và kích thước của chúng.

Không có số lượng yêu cầu lý tưởng hoặc kích thước tối đa cần lưu ý. Thay vào đó, Google khuyên bạn nên đặt các tiêu chuẩn đó cho chính mình bằng cách tạo ngân sách đầu tư hiệu suất. Đây là một tập hợp các mục tiêu kế hoạch đã xác định như:

• Kích thước hình ảnh tối đa.
• Số lượng phông chữ web được phép sử dụng.
• Bạn gọi đến bao nhiêu tài nguyên bên thứ 3.
• Kích thước của File HTML, CSS, Javascript…
• Số lượng yêu cầu HTTP tối đa trang một trang

Việc tạo kế hoạch ngân sách đầu tư hiệu suất cung cấp cho bạn một bộ tiêu chuẩn để bạn tự chịu trách nhiệm cho tốc độ website của mình.

Khi vượt quá ngân sách của mình, bạn có thể đưa ra quyết định loại bỏ hay tối ưu hóa các nguồn lực để tuân thủ các kế hoạch mục tiêu nguyên tắc đã định trước đó.

Bạn có thể tìm hiểu thêm về ngân sách đầu tư hiệu suất tốc độ website

4. Rút gọn CSS

Máy tính khi sử lý các file css không cần những đoạn ghi chú note hay khoảng cách để giúp các lập trình viên dễ dàng đọc file làm việc hơn, nhưng thứ đó thì là không cần thiết với trình duyệt.

những đoạn ghi chú note hay khoảng cách, đoạn css viết sai, trùng lặp css là những gánh nặng cho tốc độ website.

Rút gọn CSS ( hay gọi là nén css) của bạn là quá trình cô đọng nén các tệp của bạn bằng cách loại bỏ các ký tự không cần thiết, khoảng chống và trùng lặp không cần thiết, những đoạn viết sai không cần thiết.

Google khuyến nghị phương pháp này vì nó làm giảm kích thước tệp CSS của bạn và do đó có thể cải thiện tốc độ tải:

Nén css giảm dụng lượng file css tăng tốc website

5. Rút gọn JavaScript

Cũng giống như bạn việc rụt gọn css, điều tương tự cũng áp dụng cho các tệp JavaScript của bạn:

javascript rút gọn thì dễ lỗi hơn css rất nhiều 😂 😂

6. Loại bỏ CSS không sử dụng

Bất kỳ mã code css nào của bạn là nội dung phải được tải để trang của bạn hiển thị với người dùng. Nếu có CSS ​​trên trang web của bạn không thực sự hữu ích, thì nó sẽ làm giảm hiệu suất của bạn một cách không cần thiết.

Hãy xóa các rules style sheet css không dùng cho nội dung html trong màn hình đầu tiên để giảm số byte không cần thiết.

• Giải pháp ở đây về cơ bản giống như giải pháp để loại bỏ CSS chặn hiển thị. Bạn có thể nội dòng hoặc trì hoãn các kiểu theo bất kỳ cách nào phù hợp nhất cho các trang của mình.
• Bạn có thể sử dụng tải điều kiện cho website WordPress của bạn.
• Tải điều kiện file css
• Không sử dụng thư viên css nặng kinh khủng như bootstrap
• Bạn cũng có thể sử dụng một công cụ như Chrome DevTools để tìm CSS không sử dụng cần được tối ưu hóa. (rất khó để triển khai, có những đoạn css gọi là css động cần thiết cho javascript thì không thể phát hiện được hay là website file css này trang này không dùng đoạn css nhưng trang khác nó lại dùng đoạn code css đó, trường hợp này bạn có thể tìm hiểu tải điều kiện)
• Lựa chọn những theme giao diện WordPress được viết mã hóa tốt
• Quản lý chặt chẽ những file được nhúng thêm file css không cần thiết
• Tự clear viết lại css từ đầu
• Tùy chỉnh mod lại plugin phù hợp với nhu cầu của bạn
• Khi bạn tùy biến giao diện lại thì cần biết về thứ tự yêu tiên của css để giúp công việc tùy biến giao diện một cách tối ưu hơn

Bạn có thể tham khảo: Thứ tự yêu tiên của CSS và loại bỏ css chống chéo

7. Tránh những việc cần nhiều thời gian thực hiện trong chuỗi chính

‘Chuỗi chính’ là phần tử chính của trình duyệt của người dùng, chịu trách nhiệm biến mã thành một trang web mà khách truy cập có thể tương tác. Nó phân tích cú pháp và thực thi HTML, CSS và JavaScript. Ngoài ra, nó chịu trách nhiệm xử lý các tương tác của người dùng.

Điều này có nghĩa là khi luồng chính hoạt động thông qua mã trang web của bạn, nó cũng không thể xử lý các yêu cầu của người dùng. Nếu công việc của chuỗi chính trên trang web của bạn mất quá nhiều thời gian, điều này có thể dẫn đến UX kém và thời gian tải trang chậm.

Google PageSpeed ​​sẽ gắn cờ các trang mất hơn bốn giây để hoàn thành công việc của chuỗi chính và hiển thị một trang web có thể sử dụng:

Một số phương pháp được sử dụng để giảm công việc của chuỗi chính đã được đề cập trong các phần khác của bài đăng này, bao gồm:

• Giảm thiểu mã của bạn
• Xóa mã không sử dụng
• Triển khai bộ nhớ đệm

Tuy nhiên, bạn cũng có thể muốn xem xét việc tách mã code. Quá trình này liên quan đến việc chia nhỏ JavaScript của bạn thành các gói thực thi khi chúng cần, thay vì yêu cầu trình duyệt tải tất cả chúng trước khi trang trở nên tương tác.

8. Giảm thời gian thực thi JavaScript

Thực thi JavaScript thường là yếu tố đóng góp nổi bật nhất cho công việc của chuỗi chính. PageSpeed ​​Insights có một đề xuất riêng để cảnh báo cho bạn nếu nhiệm vụ này có tác động đáng kể đến hiệu suất trang web của bạn:

Các phương pháp được đề xuất ở trên để giảm công việc của chuỗi chính cũng sẽ giải quyết cảnh báo này trong kết quả Tốc độ trang của bạn.

9: Thời gian phản hồi ban đầu của máy chủ (TTFB)

Time to First Byte (TTFB) là thước đo thời gian để trình duyệt nhận lại byte dữ liệu đầu tiên từ máy chủ trang web của bạn sau khi đưa ra yêu cầu. Mặc dù điều này không giống với tốc độ trang web tổng thể của bạn, nhưng có một TTFB thời gian càng thấp là biếu hiệu là tốt cho hiệu suất trang web của bạn và bạn có một máy chủ rất ngon.

Do đó, giảm thời gian phản hồi của máy chủ nằm trong số các đề xuất của Google PageSpeed ​​Insights. Nếu bạn có thể đạt được TTFB ngắn, bạn sẽ thấy thông báo này trong Kiểm tra đạt yêu cầu :

Có một số yếu tố có thể ảnh hưởng đến TTFB của bạn. Một số chiến lược để hạ thấp nó bao gồm:

• Chọn một nhà cung cấp web hosting chất lượng uy tín.
• Sử dụng VPS hay máy chủ riêng thay vì dùng share hosting
• Sử dụng các chủ đề themes và plugin nhẹ
• Sử dụng websever LiteSpeed
• Sử dụng page cache html
• Sử dụng giao thức quic
• Đặt vị trí máy chủ tối ưu gần người dùng bạn phục vụ
• Giảm số lượng plugin được cài đặt trên trang web của bạn
• Sử dụng Mạng Phân phối Nội dung (CDN) – nếu webhost bạn ở xa người dùng – cái này thì không thực tế cho lắm vì vị trí test của công cụ google page speed có thể khác với vị trí người dùng bạn phục vụ
• Chọn nhà cung cấp Hệ thống tên miền (DNS) chất lượng đề cử như cloudflare

Bài đăng của mình chia về TTFB là một nguồn tài liệu tuyệt vời để biết thêm chi tiết về những cách tối ưu hóa TTFB. “12 Thủ thuật cải thiện TTFB cho WordPress”

10. Kích thước hình ảnh thích hợp

Các tệp phương tiện media như hình ảnh có thể là một rào cản thực sự (như phần trên mình có chia sẻ thì hình ảnh chiếm 50% dung lượng tổng thế website trung bình) đối với hiệu suất trang web của bạn. Định kích thước phù hợp cho chúng là một cách đơn giản để giảm thời gian tải của bạn:

Nếu trang của bạn bao gồm các hình ảnh lớn hơn mức cần thiết, Kích thước hiển thị với kích thước hình ảnh quá chênh lệnh thì rất là lãng phí tài nguyên và giảm tốc độ load đáng kể không cần thiết, CSS sẽ được sử dụng để thay đổi kích thước hiển thị. Quá trình này mất nhiều thời gian hơn là chỉ tải hình ảnh ở kích thước phù hợp ban đầu, do đó ảnh hưởng đến hiệu suất trang của bạn.

Để khắc phục điều này, bạn có thể tải lên hình ảnh ở kích thước phù hợp hoặc sử dụng ‘hình ảnh đáp ứng – (Adaptive Image)’. Điều này liên quan đến việc tạo ra các hình ảnh có kích thước khác nhau cho các thiết bị khác nhau như vậy sẽ tối ưu tốc độ load hơn rất nhiều đặc biệt là thiết bị di dộng.

Bạn có thể làm điều này bằng các srcset thuộc tính , được thêm vào thẻ để xác định tập tin hình ảnh thay thế với kích thước khác nhau. Trình duyệt có thể đọc danh sách này, xác định tùy chọn nào tốt nhất cho màn hình hiện tại và cung cấp phiên bản hình ảnh đó của bạn.

Ví dụ: giả sử bạn có một hình ảnh tiêu đề và bạn muốn làm cho nó phản hồi. Bạn có thể tải lên ba phiên bản của nó với chiều rộng 800, 480 và 320 pixel. Sau đó, bạn sẽ áp dụng thuộc tính srcset , như sau:

<img srcset="giatuan-800w.jpg 880w,
		giatuan-480w.jpg 480w,
		giatuan-320w.jpg 320w"
	src="giatuan.jpg">

11. Trì hoãn hình ảnh ngoài màn hình

Quá trình trì hoãn hình ảnh ngoài màn hình thường được gọi là ‘lazy load ảnh’. Điều này có nghĩa là thay vì yêu cầu trình duyệt tải mọi hình ảnh trên một trang trước khi hiển thị nội dung trong màn hình đầu tiên, nó sẽ chỉ tải những hình ảnh hiển thị ngay lập tức.

Tải ít hơn trước khi trang hiển thị có nghĩa là hiệu suất tốt hơn, đó là lý do tại sao Google đề xuất phương pháp này:

bạn có thể tham khảo: Lazy load ảnh là gì?

12. Mã hóa hình ảnh hiệu quả

Hình ảnh có tác động đáng kể đến hiệu suất trang web của bạn. Như mình đã thảo luận ở phần bên trên.

Một trong những phương pháp hay nhất về tối ưu hóa cơ bản nhất mà bạn có thể muốn xem xét là nén , có thể giúp giảm kích thước tệp của bạn để chúng tải nhanh hơn. Đây cũng là phương pháp chính để thực hiện theo khuyến nghị của Google về Mã hóa hình ảnh hiệu quả :

Chìa khóa là đạt được kích thước file ảnh nhỏ nhất có thể mà không làm giảm chất lượng của chính hình ảnh.

Tại sao phải nén ảnh?

Mắt con người chúng ta thì cũng chỉ có thể nhìn được một điểm giới hạn nào đó mà thôi (300dpi), nếu bức ảnh của bạn vượt quá nhiều so với tiêu chuẩn 300 dpi thì đó là sự lãng phí về dung lượng ảnh mà chất lượng gần như không đổi.

Vì vậy có nhiều công ty làm về lĩnh vực này họ có những các thuật toán khác nhau để thực hiện công việc đó.

Có rất nhiều plugin WordPress hỗ trợ việc nén, mình để cử một số plugin nén ảnh mình cảm thấy thích:

• Short Pixel
• LiteSpeed Cache
• Imagify
• WP Compress

Có rất nhiều plugin giúp thực hiện giúp bạn nhiệm vụ này tùy vào nhu cầu của bạn, bạn thích thuật toán nén ảnh của công ty nào thì lựa chọn plugin của bên đó nhé: 3 Plugin WordPress nén ảnh tốt nhất hiện nay
. Bạn có thể tìm hiểu thêm về chúng trong hướng dẫn tối ưu hóa hình ảnh của chúng tôi .

Các khuyến nghị khác ảnh hưởng đến việc bạn ‘đạt’ hay ‘không đạt’ trong kiểm tra hình ảnh mã hóa hiệu quả bao gồm:

• Phục vụ hình ảnh ở kích thước chính xác.
• Thực hiện lazy load ảnh tải (trì hoãn hình ảnh ngoài màn hình).
• Dư thừa pixel điểm ảnh không cần thiết
• Chuyển đổi hình ảnh sang định dạng tệp thế hệ tiếp theo, chẳng hạn như WebP.
• Sử dụng các định dạng video cho nội dung động, chẳng hạn như GIF.

Ngoài việc nén hình ảnh của bạn, bạn có thể tham khảo: 6 cấp độ tối ưu hóa hình ảnh

13. Cung cấp hình ảnh trong các định dạng thế hệ tiếp theo

Công nghệ thì luôn luôn liên tục phát triển và các định dạng ảnh thì cũng không phải ngoại lệ có một số định dạng tệp hình ảnh tải nhanh hơn và chất lượng hình ảnh đẹp hơn các định dạng khác.

Thật không may, chúng không phải là định dạng PNG hoặc JPEG thường thấy của bạn (PNG và JPEG đã có lâu đời và cũ kĩ rồi).

Hình ảnh định dạng WebP đang trở thành tiêu chuẩn mới và Google PageSpeed ​​sẽ thông báo cho bạn nếu hình ảnh của bạn không phù hợp với nó:

Định dạng webp được google phát triển cho chất lượng hình ảnh trên dung lượng luôn luôn tốt hơn những định dạng cũ phổ biến như PNG, JPG.

Có các plugin có thể hỗ trợ bạn chuyển đổi định dạng ảnh webp. Ví dụ, cả LiteSpeed, Shortpixel, Imagify và Webp express, EWWW… đều cung cấp tính năng chuyển đổi WebP một cách dễ dàng.

14: Đảm bảo văn bản vẫn hiển thị trong khi tải Webfont

Giống như hình ảnh, phông chữ có xu hướng là các tệp lớn mất nhiều thời gian để tải. Trong một số trường hợp, trình duyệt có thể ẩn văn bản của bạn cho đến khi phông chữ bạn đang sử dụng tải hoàn toàn, điều này sẽ dẫn đến đề xuất này từ Google PageSpeed ​​Insights:

Google khuyên bạn giải quyết vấn đề này bằng cách áp dụng các Font hiển thị API hoán đổi chỉ trong bạn @font-face style.

Để thực hiện việc này, hãy truy cập style sheet của bạn ( file css nào gọi font chữ đó thì là file đó – với WordPress thì có thể thường là file style.css ) và thêm phần sau vào sau thuộc tính css src trong @ font-face :

font-display: swap

15: Bật tính năng nén văn bản

Đề xuất cho phép nén văn bản của Google PageSpeed ​​Insights đề cập đến việc sử dụng tính năng nén GZIP đặc biệt là broli (broli công nghệ nén rất tốt và cũng là đưa con của google):

Trong một số trường hợp (như bạn có thể thấy trong hình trên), tính năng nén văn bản sẽ tự động được bật trên máy chủ của bạn. (cái này chỉ có thể kích hoạt từ cấp máy chủ web hosting)

Nếu bạn dùng share hosting bạn cũng có thể kích hoạt sử dụng công nghệ nén văn bản của mình theo cách thủ công. Điều này bao gồm chỉnh sửa của bạn file .htaccess hoặc nhà cung cấp share hosting cũng có thể bật sẵn cho bạn rồi bạn cũng không cần quan tâm nữa.

Năm 2021 rồi mà nếu bạn dùng share hosting mà không có công nghệ nén này thì thôi, lời khuyên của mình hãy chuyển nhà cung cấp share hosting khác.

bạn có thể tham khảo: Gzip và Brotli là gì, cách kích hoạt chúng trên website của bạn

16: Kết nối trước với Nguồn gốc Bắt buộc

Rất có thể bạn có ít nhất một tài nguyên của bên thứ ba trên trang web của mình – Google Analytics là một ví dụ phổ biến. Có thể mất thời gian để trình duyệt thiết lập kết nối với các tài nguyên này, làm chậm tốc độ tải của bạn.

Việc sử dụng các thuộc tính kết nối trước có thể cho các trình duyệt biết ngay rằng có các tập lệnh của bên thứ ba trên trang của bạn cần được tải. Sau đó, quá trình yêu cầu chúng có thể bắt đầu sớm nhất có thể, cải thiện hiệu suất của bạn.

Nếu Google cảm thấy rằng trang của bạn có thể được hưởng lợi từ kỹ thuật này, bạn sẽ thấy đề xuất Kết nối trước (preconnect) với nguồn gốc bắt buộc :

Có một số cách để thực hiện chiến lược tối ưu hóa này. Nếu bạn cảm thấy thoải mái với việc chỉnh sửa các file của themes WordPress của mình, bạn có thể thêm thẻ liên kết vào file header.php.

Đây là một ví dụ:

<link rel="preconnect" href="ten-mien.com">

Trong trường hợp này, thẻ cho các trình duyệt biết rằng họ cần thiết lập kết nối đến ten-mien.com nhanh nhất có thể.

Google PageSpeed ​​Insights sẽ liệt kê mọi tài nguyên có liên quan mà bạn nên thêm các thẻ liên kết có thuộc tính preconnect.

17: Tải trước các yêu cầu chính

Tương tự như đề xuất Kết nối trước với nguồn gốc bắt buộc , việc làm theo đề xuất này cho phép bạn giảm thiểu số lượng yêu cầu mà trình duyệt phải thực hiện đối với máy chủ của trang web của bạn. Tuy nhiên, thay vì kết nối với tài nguyên của bên thứ ba, Yêu cầu khóa tải trước đề cập đến việc tải nội dung quan trọng trên máy chủ của riêng bạn:

Thực hiện kỹ thuật này cũng rất giống với khuyến cáo trước đó. Bạn có thể thêm các thẻ liên kết chỉ định các tài nguyên được liệt kê trong PageSpeed ​​Insights vào tệp header.php của mình :

<link rel="preload" href="ten-mien.com">

18: Tránh chuyển hướng trang nhiều lần

Chuyển hướng được sử dụng khi bạn muốn một URL trỏ đến URL khác. Chúng thường được sử dụng khi bạn di chuyển hoặc xóa một trang trên trang web của mình. Mặc dù không có gì sai khi sử dụng chuyển hướng nói chung, nhưng chúng gây ra thêm sự chậm trễ trong thời gian tải.

bạn có thể tham khảo bài viết: tối ưu hóa chuyển hướng hay bạn có thể nghiên cứu về url tương đối và url tuyệt đối

19: Sử dụng chính sách bộ nhớ đệm hiệu quả cho các nội dung tĩnh

Google PageSpeed ​​Insights muốn nói đến là cấp độ thứ 5 là trình duyệt cache.

Nếu bạn đã sử dụng Google PageSpeed ​​Insights được một thời gian, bạn có thể biết rõ hơn đề xuất này dưới dạng cảnh báo Đòn bẩy bộ nhớ đệm của trình duyệt . Trong phiên bản 5, nó hiện được gắn nhãn là Cung cấp tài sản tĩnh với chính sách bộ nhớ đệm hiệu quả :

Đề xuất này chúng ta cần xem xét. Đầu tiên là ‘bộ nhớ đệm trình duyệt’ có nghĩa là gì. Nói tóm lại, đó là một quá trình trong đó các trình duyệt lưu các bản sao của các trang của bạn, để chúng có thể được tải nhanh hơn trong các lần truy cập trong tương lai.

20: Giảm thiểu mức sử dụng của bên thứ ba

Sau khi google chrome cập nhật trình sách trình duyệt cache, thì bây giờ chiến lược sử dụng tài nguyên bên thứ 3 không còn được khuyến khích nữa rồi.

Bây giờ chúng tôi đã đề cập đến một số cách khác nhau trong đó các tập lệnh của bên thứ ba có thể tác động tiêu cực đến hiệu suất tốc độ website của bạn.

Tốt nhất, bạn nên hạn chế phụ thuộc vào các công cụ này để đề phòng tác dụng phụ.

Để tải mã của bên thứ ba hiệu quả hơn, bạn có thể xem xét một trong các kỹ thuật mà chúng tôi đã đề cập trong bài đăng này:

• Trì hoãn việc tải JavaScript bên thứ 3 hoặc tận chí là lazy load file javascript bên thứ 3
• Sử dụng các thẻ liên kết có thuộc tính preconnect
• Các tập lệnh của bên thứ ba tự lưu trữ tại web hosting của bạn (như phổ biến Google Analytics…)

Các phương pháp này sẽ giảm thiểu tác động đến hiệu suất trang web của bạn.

Các tập lệnh của bên thứ ba bổ sung một loạt các tính năng hay và hữu ích cho trang website của bạn, đơn giản bạn chỉ muốn giảm tải máy chủ webhost, đặc biệt là làm cho trang web trở liên kết đồng bộ với nhau hơn. Như các tính năng như analytics, quảng cáo, tracking, nút chia sẻ mạng xã hội, nhúng video … – tất cả chúng đều có thể thực hiện được nhờ các tập lệnh của bên thứ ba, đó là theo mình là những giá trị quan trọng nhất khi sử tài nguyên bên thứ 3 ở thời điểm hiện tại sự đồng bộ.

Tối ưu hóa tài nguyên bên thứ 3

21: Tránh tài nguyên lớn trên mạng

Google khuyên bạn nên giữ tổng kích thước dung lượng trang web của bạn ở mức 1.600 KB (1,6MB) trở xuống. Các phương pháp thường được sử dụng nhất để đạt được mục tiêu này được tìm thấy trong bài đăng này, bao gồm:

• Tải không đồng bộ CSS, JavaScript và hình ảnh dưới màn hình đầu tiên
• Rút gọn nén file
• Nén hình ảnh, tối ưu hóa hình ảnh
• Sử dụng định dạng WebP cho hình ảnh
• Triển khai bộ nhớ đệm
• Tải điều kiện file
• Xóa những thứ không cần thiết trong website
• Phân trang web
• Loại bỏ những http yêu cầu không cần thiết
• Lựa chọn theme WordPress được mã hóa chất lượng

Đề xuất này đặc biệt liên quan đến người dùng truy cập bằng thiết bị di động. Tải trọng dung lượng lớn có thể yêu cầu sử dụng nhiều dữ liệu mạng di động hơn đặc biệt là dùng 3g hay 4g, do đó khiến người dùng của bạn tốn tiền.

22: Tránh kích thước DOM quá lớn

Nói một cách đơn giản nhất, Dom hiểu một cách đơn giản theo định nghĩa của WP Tăng Tốc: như mình muốn tìm bạn, tuy nhiên nhà của bạn nhiều phòng thì tìm bạn sẽ khó khăn hơn, nếu nhà của bạn ít phòng đi tìm bạn sẽ nhanh và dễ dàng hơn rất nhiều. ( hiểu đơn giản với DOM là như vậy).

DOM của trang của bạn càng lớn thì thời gian tải càng lâu.

Google khuyến cao về phần tử DOM:

• Dưới tổng số hơn 1.500 nút.
• Dưới độ sâu lớn hơn 32 nút.
• Dưới một nút cha với hơn 60 nút con.

Một số giảm pháp giảm dom, bạn có thể tham khảo bài viết: tối ưu hóa dom WordPress

• Sử dụng theme có cấu trúc tốt, không bị dom quá nhiều
• Viết code theo kiểu giảm dom tý nữa mình sẽ nói ở phần bên dưới
• Đừng sử dụng page builder, nguyên nhân gần như là 90% của quá nhiều dom của WordPress dù họ có quảng cáo như thế nào thì nó vẫn có nhiều dom hãy tốt nhất là hãy code tay như mình trang chủ để giảm dom nhé, tuy nhiên dùng page builder là cách dễ dàng để tạo ra một trang đẹp lộng lẫy. Lời khuyên của mình là hạn chế sử dụng, chỉ sử dụng những trang có ít lương truy cập như liên hệ hay giới thiệu thì hãy sử dụng những trang nhiều người vào như trang chủ thì không lên dùng page builder hãy chịu khó nỗ lực thì sẽ rất tuyệt.
• không sử dụng một số plugin dom khủng như UberMenu
• Chia blog của bạn ra thành nhiều trang theo mình tốt nhất là dưới 6 là đẹp nhất
• có xuống dòng HTML thì không nên dùng lệnh: <br>
• Lazy load ifram v.v có rất nhiều cách

23:Tải trước hình ảnh có Thời gian hiển thị nội dung lớn nhất

Tải trước hình ảnh mà thành phần LCP (Thời gian hiển thị nội dung lớn nhất) sử dụng nhằm cải thiện thời gian LCP của bạn.

bạn hãy sử dụng preload như phần trên mình có chia sẻ, đường link href thì bạn thay thế bằng url đường dẫn file ảnh ví dụ như banner mà tác động đến LCP. bạn thêm thuộc tính as="image"

ví dụ như:

<link rel="preload" as="image" href="ten-mien.com/anh.jpg">

thay ten-mien.com/anh.jpg bằng đường dẫn ảnh của bạn. rồi đưa vào header của website bằng cách đưa vào file header.php hoặc để tối ưu tốt nhất đưa vào hook wp_headdùng bằng file functions.php nếu cần thiết thì đưa hàm điều kiện worpdress nếu cần.

24: Tránh document.write()

document.write() là trong ngôn ngữ lập trình javascript giúp bạn ghi nội dung nào đó vào HTML. bạn Không nên sử dụng viết nội dung bằng document.write().

Với website WordPress thì chắc bạn cũng không cần bận tâm đến document.write() này đâu vì nó WordPress là CMS chạy ngôn ngữ lập trình PHP, bạn có viết nội dung HTML thì đã có ngôn ngữ php biên dịch qua html rồi đó là câu chuyện giản đơn rồi.

25: Các phần tử hình ảnh có width và height rõ ràng

Yếu tố này thì không quan trọng về vấn đề tốc độ load những nó rất quan trọng trong yếu tố trải nghiệm người dùng mà dù gì tốc độ load mục đích là nâng cao trải nghiệm người dùng mà.

Yếu tố này sẽ cải thiện Cumulative Layout Shift là yếu tố khá quan trọng, trong trải nghiệm người dùng đó là trong quá trình tải trải nó sẽ hiển thị load như thế nào.

width (chiều rộng) và height (chiều cao) rõ ràng đối với các phần tử element img hình ảnh để giảm sự thay đổi về bố cục và cải thiện Cumulative Layout Shift (CLS).

Với website WordPress khi bạn nhúng ảnh bằng trình soản thảo của WordPress thì lúc nào nó sẽ tự động điều các giá trị width (chiều rộng) và height (chiều cao) giúp bạn rồi thì bạn không cần phải quan tâm về điều đó nữa.

Nếu bạn tự gõ html thì bạn cũng lên cân nhắc để ý nhé.

Ví dụ:

chưa tối ưu:

<img src="https://wptangtoc.com/gia-tuan.jpg" />

Tối ưu:

<img src="https://wptangtoc.com/gia-tuan.jpg" width="800" height="450"/>

Kết luận

Mình cũng là làm bên lĩnh vực tăng tốc website WordPress, hãy liên hệ với mình là mình cần tăng tốc như thế này thế kia, đừng liên hệ với mình là mình cần bao nhiêu điểm nhé.

Nhưng xin đừng thuê tôi và nói em cần tưng này điểm. đối với mình tăng tốc website để phục vụ người dùng, người dùng trả tiền cho doanh nghiệm không phải là điểm số trả tiền cho doanh nghiệp. (với cá nhân tôi hay nhiều người có kinh nghiệm việc hack điểm google page speed dễ hơn bản tưởng) Có thể một số bạn nghĩ rằng bài đăng này là tôi quảng cáo thấp kém về dịch vụ của tôi NHƯNG TÔI KHÔNG! Tôi không tin vào việc tối ưu hóa cho điểm số của trang. Và tôi ghét làm việc với những khách hàng làm như vậy. Tôi cũng ghét giải thích tại sao điểm số của trang là ngớ ngẩn.