Điểm PageSpeed 100/100 đã đủ chưa? Câu trả lời là Không.

Website cần tải nhanh để duy trì khả năng cạnh tranh và mang lại trải nghiệm tốt cho người dùng, từ đó giữ số lượt xem trang trên mỗi khách truy cập ở mức cao, giảm Bounce Rate hoặc tỷ lệ bỏ giỏ hàng, đồng thời cải thiện thứ hạng trên công cụ tìm kiếm.

Có thể bạn đã đọc nhiều bài viết tập trung vào cách tăng tốc website, tìm hiểu plugin WordPress nào có thể hữu ích và plugin nào thì không, cùng nhiều mẹo tương tự để cải thiện tốc độ website. Có thể bạn cũng đã đạt điểm PageSpeed 100/100 trên cả thiết bị mobile lẫn desktop.

Nhưng câu hỏi quan trọng là: đạt điểm PageSpeed 100/100 đã đủ chưa? Điều đó có nghĩa là hiệu suất đã đạt mức tối đa tuyệt đối hay không? Đây là chia sẻ gần đây của Gary Illyes từ Google:

Bài viết này sẽ giải thích vì sao đạt điểm 100 bằng công cụ PageSpeed có thể vẫn chưa đủ. Nếu bạn đam mê hiệu suất, bạn sẽ tìm thấy một số kỹ thuật tối ưu thú vị để áp dụng cho website của mình. Nếu không, những cách tối ưu được đề xuất dưới đây vẫn có thể giúp website của bạn vượt trước đối thủ về hiệu suất. Trước tiên, hãy bắt đầu với phần giới thiệu về công cụ PageSpeed.

Google PageSpeed là gì và hoạt động như thế nào?

Google PageSpeed Insights đo lường hiệu suất của trang web trên mobile và desktop, đồng thời đưa ra hướng dẫn cụ thể về những việc có thể làm để cải thiện tốc độ website. Sau đó, công cụ chấm điểm riêng cho mobile và desktop trên thang điểm từ 0 đến 100. Điểm 100 cho biết các tiêu chí đánh giá hiệu suất đã được đáp ứng đầy đủ.

Các tiêu chí bao gồm first contentful paint, largest contentful paint, speed index, total blocking time, time to interactive và cumulative layout shift.

Có rất nhiều bài viết giúp bạn hiểu rõ hơn về cách công cụ PageSpeed hoạt động, cũng như cách sử dụng hướng dẫn mà công cụ cung cấp và áp dụng vào website.

Tuy nhiên, vì bạn đang đọc bài viết này, tôi cho rằng bạn đã vượt qua giai đoạn đó và sẵn sàng tìm hiểu thêm những bước tiếp theo để tăng tốc website hơn nữa.

Công cụ PageSpeed không hướng dẫn bạn đạt hiệu suất tối đa tuyệt đối sao?

Không.

Tôi vẫn cần quan tâm đến hiệu suất chứ?

Có.

PageSpeed tool rất hữu ích và luôn giúp website của bạn tải nhanh hơn, nhưng đạt điểm 100 không có nghĩa là bạn đã hết việc cần làm. Trong hầu hết trường hợp, bạn vẫn có thể tiết kiệm đáng kể dung lượng trang và thời gian tải trang.

Vậy hãy cùng xem những bước bổ sung bạn có thể thực hiện sau khi đạt điểm 100/100 bằng PageSpeed tool.

1. Tận dụng bộ nhớ đệm trình duyệt của đối thủ

Nếu có đối thủ xếp hạng cao hơn bạn một chút cho các keyword của mình, nhiều khả năng người dùng sẽ truy cập website của họ trước khi nhấp vào website của bạn, nếu họ có nhấp. Tuy nhiên, nếu người dùng đã truy cập một website khác, bạn có thể tận dụng lại bộ nhớ đệm trình duyệt của khách truy cập bằng cách kiểm tra mã nguồn website để xem website đó có dùng CDN công khai nào không, và nếu có thì dùng cho thư viện nào.

Nếu cả hai cùng dùng một hoặc nhiều thư viện, chẳng hạn như jQuery 3.2.1, bạn có thể tải thư viện đó từ cùng CDN công khai mà đối thủ sử dụng.

Như bạn có thể đoán, mẹo này hiếm khi hiệu quả và trong một số trường hợp, còn có thể mang lại lợi thế cho đối thủ nếu khách truy cập vào website của bạn trước rồi mới truy cập website đối thủ.

Dù mẹo này khó hiệu quả với đối thủ hơn, nhìn chung nó vẫn có thể phát huy tác dụng. Tải tất cả tài nguyên mã nguồn mở từ CDN công khai giúp bạn tận dụng lại các tài nguyên công khai trong bộ nhớ đệm trình duyệt của những website bên thứ ba mà người dùng từng truy cập.

Một số plugin WordPress miễn phí như Easy Speedup và CommonWP giúp tự động liên kết đến các theme, plugin và thư viện mã nguồn mở được lưu trữ trên CDN công khai. Những plugin này giúp bạn dễ dàng tận dụng lại bộ nhớ đệm trình duyệt từ các website khác trên quy mô lớn mà không cần tốn nhiều công sức.

Cách này có thể không hiệu quả với một số khách truy cập nhưng lại hiệu quả với những người khác. Lợi ích là cách này có thể giảm thời gian tải trang, ngay cả với khách truy cập lần đầu. Một lợi ích khác là các tài nguyên mã nguồn mở này được phân phối qua CDN mà không mất phí băng thông.

2. Kết hợp file, nhưng cần thận trọng

Một số công cụ kiểm tra hiệu suất có thể đề xuất bạn kết hợp nhiều file CSS và JavaScript thành một file để cải thiện tốc độ. Điều này từng đúng từ lâu, nhưng hiện nay tình hình đã thay đổi.

Trong bài đăng blog nổi tiếng trên blog Google Chrome V8 có tiêu đề ‘ The Cost of JavaScript in 2019’, Addy Osmani đưa ra một số hướng dẫn để cải thiện thời gian tải JavaScript. Ông khuyên nên giữ các JavaScript bundle nhỏ; nếu kích thước bundle vượt quá 50-100KB, hãy chia thành các bundle nhỏ hơn. Ông cũng lưu ý một nguyên tắc chung: nếu script lớn hơn 1 KB, hãy tránh nhúng trực tiếp vào trang.

Nhìn chung, việc gộp các tệp nhỏ hơn thành một hoặc nhiều gói không còn đáng công sức vì cách này không cải thiện tốc độ tải trang nữa — ngược lại, còn ảnh hưởng đến tốc độ trên thiết bị mobile. Điều này là do tính năng multiplexing của HTTP/2 cho phép nhiều request và response được truyền đồng thời, giảm phần chi phí phát sinh từ các request bổ sung.

Vậy, code trên website của bạn có cần được tái cấu trúc để quay lại cách làm cũ không? Nếu dùng WordPress, bạn có thể cân nhắc tắt các plugin bật tính năng này. Việc đó sẽ giảm tình trạng cài quá nhiều plugin và giúp website chạy nhanh hơn.

Tuy nhiên, điều đó không có nghĩa là việc chia toàn bộ codebase JavaScript thành nhiều tệp nhỏ hơn sẽ không gây ảnh hưởng. Bạn cần kiểm thử cẩn thận trường hợp sử dụng của mình.

3. Chuyển đổi giữa các định dạng hình ảnh

Hình ảnh chiếm một phần lớn thời gian tải trang. Vì vậy, bạn cần cân nhắc kỹ hơn so với các kỹ thuật tối ưu hóa hình ảnh thường được sử dụng.

Nếu website của bạn có sử dụng hình ảnh — và tôi chắc chắn là có — bạn nên tìm hiểu định dạng hình ảnh nào phù hợp với nhu cầu của mình. Một số định dạng phù hợp hơn với đồ họa vector, trong khi những định dạng khác hoạt động tốt nhất với ảnh chụp.

Biểu đồ trên có thể giúp bạn chọn định dạng phù hợp với nhu cầu hình ảnh của mình. JPEG hỗ trợ nén mất dữ liệu cho ảnh chụp, còn SVG là định dạng dựa trên văn bản, có thể được nén ngay khi cần và trong hầu hết trường hợp có thể giảm kích thước tệp xuống thấp hơn PNG.

Một yếu tố khác cần cân nhắc là các định dạng hình ảnh mới.

PageSpeed khuyến nghị: “Serve images in next-gen formats”. Định dạng thế hệ mới duy nhất được hỗ trợ rộng rãi là WebP, nhưng chỉ được 77% trình duyệt hỗ trợ và không được trình duyệt Safari hỗ trợ. Do đó, WebP chỉ được dùng cho không quá 4% số hình ảnh trên web.

Vì vậy, hiện tại KHÔNG nên dùng WebP làm định dạng hình ảnh chính. Tuy nhiên, định dạng WebP giúp giảm đáng kể kích thước tệp, khiến nó trở thành lựa chọn rất hấp dẫn để tối ưu hiệu suất. Hầu hết thời gian, bạn có thể chọn định dạng hình ảnh để phân phối đến trình duyệt dựa trên khả năng tương thích của trình duyệt đó.

Nghe có vẻ phức tạp, nhưng thực ra không phải vậy. Có những giải pháp tự động chuyển đổi hình ảnh ngay khi cần. Khi sẵn sàng sử dụng WebP trên website, bạn có một số lựa chọn:

• Bạn có thể dùng plugin Easy Speedup WordPress, sử dụng dịch vụ tối ưu hóa và chuyển đổi hình ảnh trên nền tảng đám mây hoạt động hiệu quả với cả website WordPress lẫn website không dùng WordPress, đồng thời phân phối định dạng hình ảnh tối ưu nhất mà trình duyệt hỗ trợ. Ngoài ra còn có một thư viện PHP có thể tự động thực hiện việc này cho các website không dùng WordPress mà không làm tăng dung lượng lưu trữ. Thư viện này thực hiện công việc rất hiệu quả; với một khách hàng của mình, tôi đã thấy nó chuyển đổi và tối ưu hóa hình ảnh PNG sang WebP, đồng thời giảm kích thước xuống còn 95% so với hình ảnh gốc. Điều này không phải lúc nào cũng xảy ra, nhưng đôi khi vẫn có. Kết quả có thể khác nhau tùy trường hợp.
• Để tối ưu hóa trên website và tăng chuyển đổi, WebP Express chuyển đổi hình ảnh sang WebP và lưu nhiều bản sao của mỗi hình ảnh trên máy chủ để phân phối đúng hình ảnh cho đúng trình duyệt. Nhược điểm là việc này làm phình hệ thống tệp, tăng dung lượng sao lưu và khiến quá trình di chuyển trở nên khó khăn. Các công cụ này cũng làm tăng tải cho máy chủ lưu trữ, vì chuyển đổi và tối ưu hóa hình ảnh là những tác vụ tốn nhiều tài nguyên.

Chuyển đổi hình ảnh sang WebP mang lại hiệu quả rõ rệt. Dung lượng tiết kiệm được rất lớn và trong hầu hết trường hợp, tổng dung lượng trang giảm còn một nửa hoặc thậm chí thấp hơn.

Lưu ý thêm: Trong bài phát biểu khai mạc WWDC ngày 22 tháng 6 năm 2020 của Apple, họ cho biết đã bổ sung hỗ trợ hình ảnh WebP lần đầu tiên trên Safari.

Vẫn còn nhiều điều nữa.

Một điều quan trọng khác là theo dõi định dạng hình ảnh JPEG XL đầy hứa hẹn sắp ra mắt. Định dạng này đang ở giai đoạn cuối của quá trình tiêu chuẩn hóa và có thể sớm hoàn tất, đồng thời bắt đầu được một số trình duyệt hỗ trợ. JPEG XL dựa trên sự kết hợp giữa PIK của Google và FUIF của Cloudinary — những nghiên cứu về định dạng hình ảnh. Định dạng JPEG XL đặt ra các hai yêu cầu thiết kế sau, biến JPEG XL thành định dạng hình ảnh của tương lai dành cho web:

1. Chất lượng cao: hình ảnh không mất chất lượng về mặt thị giác ở bitrate hợp lý;
2. Tốc độ giải mã: giải mã đa luồng cần đạt khoảng 400 Megapixel/giây với hình ảnh kích thước lớn.

JPEG XL được kỳ vọng giúp giảm dung lượng hình ảnh xuống còn 1/3 so với bản gốc mà không làm giảm chất lượng. Đây sẽ là định dạng phổ quát, hỗ trợ hiệu quả cả hình ảnh chụp lẫn hình ảnh không phải ảnh chụp. Vì vậy, nếu muốn website tải nhanh hơn nữa trong tương lai, bạn nên theo dõi mức độ hỗ trợ JPEG XL của các trình duyệt. Những người tiên phong sẽ có lợi thế đáng kể.

4. Phân biệt nén động và nén tĩnh

Việc này có thể giúp tăng tốc website đáng kể với nỗ lực tối thiểu, và có lẽ đây là kỹ thuật dễ thực hiện nhất trong số những cách tôi sắp đề xuất. Để tôi giải thích.

Các website thường thêm một đoạn mã vào tệp cấu hình .htaccess hoặc NGINX để bật tính năng nén Gzip hoặc Brotli cho tất cả tài nguyên có thể nén. Cách này hiệu quả nhưng vẫn còn dư địa để tối ưu thêm. Các trang web có thể tiết kiệm thêm hơn 50 KB chỉ nhờ nén Brotli. Bạn muốn biết bí quyết chứ? Rất đơn giản. Hãy phân biệt nén động với nén tĩnh.

Nội dung có thể nén trên máy chủ web của bạn được chia thành hai loại: động và tĩnh. Nội dung động được tạo ngay khi cần nên không thể nén trước. Các trang HTML là một ví dụ. Nội dung tĩnh, chẳng hạn như CSS và JS, giữ nguyên trong một khoảng thời gian.

Bạn có thể nén trước các tài nguyên này rồi cấu hình máy chủ để phân phối các tệp đã được nén trước đó ngay khi cần. Nén trước cho phép bạn sử dụng mức nén cao hơn, chẳng hạn như Brotli:11, vốn thường quá chậm nếu nén ngay khi cần. Nếu việc nén trước tài nguyên mỗi khi có tệp thay đổi quá khó khăn, bạn cũng có thể dùng dịch vụ bên thứ ba như PageCDN để xử lý liền mạch cho bạn.

5. Giảm thời gian tra cứu DNS

Thời gian tra cứu DNS là khoảng thời gian cần để phân giải tên miền thành địa chỉ IP. Địa chỉ IP này sau đó được dùng để xác định vị trí máy chủ trên Internet.

Khi người dùng truy cập một trang, tác vụ có độ trễ cao đầu tiên mà trình duyệt thực hiện là tra cứu DNS cho tên miền. Nếu không lấy được địa chỉ IP từ truy vấn DNS, trình duyệt không thể tiếp tục kết nối với máy chủ và gửi yêu cầu HTTP.

Lý tưởng nhất là giảm thời gian tra cứu DNS nên nằm trong chiến lược tối ưu hóa Time-to-First-Byte. Tuy nhiên, có vẻ công cụ PageSpeed không tính đến yếu tố này vì trong nhiều trường hợp, quản trị viên website không thể tối ưu khía cạnh này. Do đó, rất nhiều quản trị viên website không quan tâm đến hiệu suất của nhà cung cấp DNS.

Có một số cách giúp giảm thời gian tra cứu DNS cho từng người dùng:

1. Sử dụng nhà cung cấp DNS nhanh. Như được liệt kê trong ảnh chụp màn hình ở trên, lấy từ dịch vụ đo điểm chuẩn DNS DNSPerf.com, một số dịch vụ cung cấp độ trễ trung bình toàn cầu dưới 30ms, đủ để quá trình tra cứu DNS diễn ra gần như tức thì.
2. Lưu vào bộ nhớ đệm các phản hồi DNS bằng cách sử dụng TTL cao hơn. Các trình phân giải DNS đệ quy có thể lưu những phản hồi này vào bộ nhớ đệm ở gần người dùng cuối trên toàn cầu, qua đó giảm đáng kể hơn nữa thời gian tra cứu DNS cho tất cả người dùng mà chúng phục vụ.

6. Tận dụng bộ nhớ đệm của trình duyệt cho font

Bạn có thể chỉ đạt điểm 95 hoặc 98 thay vì 100 do Google fonts mà plugin hoặc theme trên website của bạn sử dụng. Có thể bạn nghĩ rằng không còn cách nào cải thiện điểm số ở khía cạnh này, nhưng thực tế có nhiều hơn một giải pháp cho vấn đề đó.

CSS của Google fonts chỉ được phân phối với thời hạn hết hạn 1 ngày. Đây là một tính năng chứ không phải lỗi, vì nhờ vậy, nhóm Google fonts có thể truyền tải các thay đổi đến người dùng cuối nhanh hơn nhiều. Tuy nhiên, vấn đề là công cụ PageSpeed mong bạn sử dụng bộ nhớ đệm 30 ngày cho các tài nguyên tĩnh.

Nếu muốn giải quyết vấn đề bộ nhớ đệm của trình duyệt này, trước tiên bạn nên xem qua bài viết chi tiết và hữu ích về so sánh giữa việc tự lưu trữ font và lưu trữ font của bên thứ ba.

Một giải pháp là sử dụng công cụ tải font và CSS cho bạn. Bạn chỉ cần chọn các font family và tùy chọn tương thích ngược; tệp có thể tải xuống sẽ sẵn sàng để bạn giải nén vào một thư mục trong dự án rồi dùng CSS trong HTML để phân phối font. Nếu sử dụng WordPress, plugin OMGF có thể thực hiện tất cả những việc này cho bạn.

Bạn cũng có thể sử dụng Easy Fonts là một Google fonts bản sao, nhưng có thêm một số lớp tiện ích CSS giúp việc sử dụng font dễ dàng hơn nhiều và hỗ trợ tạo mẫu nhanh. May mắn là thư viện được lưu trữ trên CDN này cũng khắc phục vấn đề bộ nhớ đệm của trình duyệt.

7. Sử dụng HTTP/2 Server Push

Server Push là một tính năng của giao thức HTTP/2, cho phép máy chủ web chủ động gửi các tệp đến trình duyệt trước cả khi trình duyệt yêu cầu, dự đoán rằng trình duyệt sẽ sớm cần những tệp này.

Vì vậy, khi máy chủ nhận được yêu cầu về một tệp, máy chủ sẽ gửi tệp đó cùng với một hoặc nhiều tệp bổ sung đã được cấu hình để gửi kèm tệp kích hoạt Server Push. Cách này loại bỏ thời gian khứ hồi của các yêu cầu tiếp theo và giúp trình duyệt có thể sử dụng tài nguyên ngay lập tức.

Server Push là một tính năng cải thiện hiệu suất đáng kể mà bạn có thể muốn thửTuy nhiên, cần lưu ý không nên đẩy tệp quá mức trong mọi yêu cầu. Trình duyệt có thể đã lưu sẵn một bản sao của tài nguyên trong bộ nhớ đệm, vì vậy bạn cần để trình duyệt có thể sử dụng bộ nhớ đệm đó. Việc chủ động đẩy quá nhiều tài nguyên không cần thiết có thể làm lãng phí băng thông của người dùng, đặc biệt khi họ sử dụng kết nối tính phí theo dung lượng.

Nếu muốn thử tính năng này, bài viết này giải thích chi tiết cách thiết lập Server Push cho NGINXBài viết này trên CSS-Tricks giúp bạn thiết lập cấu hình Server Push có nhận biết bộ nhớ đệmBài đăng trên blog này có nhiều đề xuất và thông tin hữu ích về cách sử dụng Server Push. Với các trang WordPress, plugin Easy Speedup cũng cung cấp tính năng Server Push này.

8. Tải trước HSTS cho máy chủ

HSTS, hay HTTP Strict Transport Security, là một cách bắt buộc sử dụng HTTPS để ngăn kẻ xâm nhập thay đổi yêu cầu hoặc phản hồi khi người dùng dùng HTTP thông thường để truy cập một trang.

HSTS Preload là danh sách do nhóm Google Chrome quản lý, nhằm lập danh mục các website sử dụng HTTPS cho toàn bộ domain và các subdomain. Danh sách domain này được hầu hết các nhà cung cấp trình duyệt lớn sử dụng, bao gồm Chrome, Firefox, Opera, Safari, Edge và IE. Nếu một website nằm trong danh sách HSTS Preload, trình duyệt sẽ luôn kết nối an toàn với website đó. Ngay cả khi người dùng cố truy cập website qua HTTP không được mã hóa, trình duyệt sẽ tra cứu website trong danh sách và chuyển yêu cầu sang HTTPS.

Kỹ thuật này có một số yêu cầu, như được nêu trên website HSTS Preload, nhưng giúp tăng cường bảo mật. Tuy nhiên, bảo mật không phải là lợi ích duy nhất. Đưa website vào danh sách này giúp người dùng tránh các lần chuyển hướng không cần thiết từ HTTP sang HTTPS trong trường hợp website có nhiều backlink cũ. Lợi ích về bảo mật và hiệu suất của HSTS khiến việc sử dụng công nghệ này trở nên đáng giá, miễn là bạn có thể đáp ứng các yêu cầu.

9. Sử dụng bộ nhớ đệm bất biến

‘Cache-Control’ là một HTTP header cho trình duyệt biết tệp có thể được lưu trong bộ nhớ đệm của trình duyệt trong bao lâu. Với nội dung động dành riêng cho từng người dùng, chẳng hạn như trang HTML, header này được dùng để yêu cầu trình duyệt tuyệt đối không lưu tệp vào bộ nhớ đệm. Nhưng với nội dung tĩnh như hình ảnh, CSS và JS, header này trở thành một trong những yếu tố quan trọng nhất giúp tiết kiệm đáng kể băng thông khi cùng một người dùng truy cập nhiều lần.

Tuy nhiên, không có cấu hình cache-control nào phù hợp với mọi tài nguyên tĩnh. Một số tài nguyên tĩnh thay đổi thường xuyên, trong khi những tài nguyên khác không bao giờ thay đổi. Ví dụ: nếu trang web của bạn có tài nguyên tên jquery-3.4.1.min,js và bạn chắc chắn sẽ không bao giờ chỉnh sửa tệp này, bạn cần một cách để báo cho trình duyệt biết rằng tệp sẽ không bao giờ thay đổi.

May mắn là với chỉ thị ‘immutable’ mới, giờ đây bạn có thể báo cho trình duyệt biết chính xác điều đó. Nếu trình duyệt thấy ‘cache-control: immutable’ header được thiết lập cho một tài nguyên, điều này báo cho trình duyệt biết tệp sẽ không bao giờ thay đổi và trình duyệt không nên kiểm tra độ mới của tệp bằng yêu cầu có điều kiện ‘If-Modified-Since’.

Điều này giúp tiết kiệm thời gian khứ hồi và cho phép sử dụng tài nguyên đã lưu trong bộ nhớ đệm mà không cần xác thực lại. Tuy nhiên, bạn cần đảm bảo không dùng header này cho tệp hầu như không thay đổi nhưng có thể được chỉnh sửa một hoặc hai lần mỗi năm, bởi trong trường hợp đó, các chỉnh sửa có thể không đến được với một số người dùng nếu không có cơ chế xóa bộ nhớ đệm phù hợp. Header directive này phù hợp nhất với các thư viện mã nguồn mở có số phiên bản trong URL, hình ảnh do người dùng tải lên có ID hoặc tên riêng, cùng các gói CSS và JS được cấp URL riêng sau mỗi lần thay đổi.

10. Tận dụng Host Consolidation

Host Consolidation là phương pháp do PageCDN giới thiệu nhằm tăng tốc website của khách hàng bằng cách loại bỏ phần chi phí phát sinh từ việc chia nhỏ domain theo cách truyền thống hoặc không cần thiết. Bạn có thể dễ dàng áp dụng phương pháp này cho website của mình. Với cách làm này, PageCDN tận dụng khả năng multiplexing của giao thức HTTP/2 theo một cách sáng tạo.

Host Consolidation trái ngược với kỹ thuật chia nhỏ domain. Phương pháp này dựa vào HTTP/2 để phân phối song song các tài nguyên được yêu cầu, đồng thời chuyển tiếp toàn bộ tài nguyên bên ngoài qua một host (hoặc domain) duy nhất nhằm tránh các lần tra cứu DNS và chi phí kết nối không cần thiết. Việc giảm chi phí kết nối và tra cứu DNS này có thể giúp website tải nhanh hơn trên thiết bị di động và máy tính để bàn.

PageCDN tự động hóa Host Consolidation và liệt kê một số cách để tối đa hóa hiệu quả của phương pháp này. Chúng ta có thể đạt được kết quả tương tự trên bất kỳ website nào bằng cách áp dụng cùng nguyên tắc.

1. Tránh dùng quá nhiều CDN mã nguồn mở. Nếu website tải nhiều thư viện mã nguồn mở từ các CDN khác nhau, hãy thử tải tất cả từ một CDN duy nhất.
2. Tải Google Fonts về và tự lưu trữ. Với các website WordPress, hãy plugin OMGF có thể giúp bạn hoàn thành việc này chỉ với vài cú nhấp chuột.
3. Hãy bỏ lại domain sharding đằng sau và tải tất cả tài nguyên từ một máy chủ duy nhất thay vì chia thành nhiều shard để phân phối nội dung song song. Hãy để HTTP/2 thực hiện việc song song hóa cho bạn.
4. Nếu website của bạn sử dụng nội dung tĩnh từ nhiều máy chủ, hãy cân nhắc chuyển tiếp toàn bộ nội dung qua một máy chủ duy nhất.

11. Tránh CSS Sprites

‘CSS sprites’ là kỹ thuật kết hợp nhiều hình ảnh thành một hình ảnh lớn, rồi dùng CSS để hiển thị các điểm ảnh phù hợp ở những vị trí khác nhau trên trang web. Đây từng là kỹ thuật rất phổ biến cách đây vài năm.

Nhược điểm là cấu trúc tổng thể của trang trở nên phức tạp và kém linh hoạt hơn. Ngoài ra, hình ảnh lớn vẫn phải tải xuống ngay cả khi bạn chỉ cần dùng một mũi tên trong đó, khiến dung lượng tổng thể của trang tăng lên. Việc thêm một biểu tượng khác bằng sprites cũng tốn thời gian vì trước tiên bạn phải chỉnh sửa hình ảnh và đảm bảo biểu tượng đó không dùng bất kỳ điểm ảnh nào đã được sử dụng ở nơi khác trên website. Điều này có thể gây ra nhiều lỗi trong thiết kế website. Tương tự, nếu thay đổi kích thước một phần tử HTML hiển thị biểu tượng từ hình ảnh lớn, bạn sẽ phải đổi kích thước các biểu tượng trong hình ảnh đó và định vị lại tất cả biểu tượng xuất hiện phía sau nó.

Cách này phức tạp nhưng hầu như không mang lại lợi ích nào vì HTTP/2 có thể đảm nhiệm gần như cùng một việc. HTTP/2 có thể ghép nhiều yêu cầu và phản hồi trên cùng một kết nối. Một lợi ích khác của việc không dùng CSS sprites là chỉ những hình ảnh hoặc biểu tượng thực sự cần thiết cho trang mới được tải. Trình duyệt thậm chí có thể ưu tiên các biểu tượng nằm trong phần đầu trang và tải các hình ảnh bên dưới phần đầu trang sau, giúp trang tải nhanh hơn nữa.

Vì vậy, nếu bạn đang dùng ‘CSS Sprites’ cho các hình ảnh nhỏ, tốt hơn hết hãy để chúng tự tải và để trình duyệt quyết định cách ưu tiên các yêu cầu cũng như thời điểm gửi từng yêu cầu.

12. Cập nhật thường xuyên

WordPress 5.5 sẽ sớm được phát hành và bổ sung hỗ trợ lazy loading hình ảnh tích hợp sẵn cho hình ảnh. Vì vậy, các website đang dựa vào plugin để sử dụng tính năng này sẽ có sẵn giải pháp lazy load tích hợp trong lõi WordPress.

Lazy loading là một cách tối ưu hiệu suất quan trọng. Trong trường hợp này, hàng triệu website có thể sử dụng tính năng này chỉ bằng cách nhấp để cập nhật WordPress lên phiên bản tiếp theo.

Việc cập nhật định kỳ CMS, plugin, theme, công cụ, phần mềm máy chủ, môi trường chạy ngôn ngữ và cả hệ điều hành thường mang lại những cải thiện hiệu suất đáng kể. Ví dụ, mỗi phiên bản PHP mới đều đem lại cải thiện hiệu suất đáng kể, và xu hướng này dường như sẽ tiếp tục trong tương lai gần khi PHP 8 sắp ra mắt với trình biên dịch JIT mới. Node.js cũng được hưởng lợi từ các cải tiến về tốc độ và bộ nhớ trong mỗi phiên bản mới của engine JavaScript V8.

Điều tương tự cũng đúng với phần mềm máy chủ như NGINX hoặc Apache. Hiện tại, các nhà phát triển máy chủ đang nghiên cứu bản cập nhật lớn tiếp theo của HTTP, có tên là HTTP/3. HTTP/3 hứa hẹn sẽ giúp kết nối internet nhanh hơn, ổn định và bảo mật hơn. Hãy nhớ cài đặt bản cập nhật này khi máy chủ bạn yêu thích hỗ trợ tính năng đó.

Hiệu suất của các phiên bản phần mềm đầu tiên thường chưa được tối ưu tốt vì ở giai đoạn này, tốc độ thường chưa phải là ưu tiên hàng đầu. Tuy nhiên, khi sản phẩm ngày càng hoàn thiện, nhà phát triển có thể bắt đầu đầu tư nhiều công sức hơn để tăng tốc độ, đáp ứng thêm nhiều người dùng và cạnh tranh tốt hơn với các lựa chọn thay thế. Vì vậy, khi có phiên bản mới của bất kỳ phần mềm nào, bạn nên cập nhật để tránh lỗi, nhận các bản vá bảo mật và giúp stack của mình hoạt động nhanh hơn.

Kết luận

Công cụ PageSpeed gợi ý rất hiệu quả những vấn đề tiềm ẩn về hiệu suất, nhưng vẫn còn một số cách tối ưu hóa giúp bạn khai thác tối đa các công cụ và công nghệ hiện có. Tôi đã cố gắng đề cập đến tất cả những cách tối ưu hóa mà mình biết, đồng thời chia sẻ thêm một số điều bạn có thể cần biết. Tất cả những điều này sẽ giúp website của bạn luôn vượt lên trước đối thủ.