Để chuẩn bị cho bản cập nhật Google Core Web Vitals sắp tới, James Parsons chia sẻ một số mẹo tối ưu hóa hiệu quả để giúp bạn đạt điểm cao trên Google PageSpeed Insights.
Được công bố vào đầu năm 2020, Core Web Vitals là một tập hợp các chỉ số mà Google đang phát triển và có kế hoạch đưa vào thuật toán tìm kiếm tổng thể của họ vào tháng 5 năm 2021. Cho rằng bây giờ đã gần đến năm 2021, bất kỳ ai muốn tiếp tục tối ưu hóa trang web của họ cho điều này bản cập nhật thuật toán mới có thể hoạt động ngay bây giờ. Rất may, Google đã rất giỏi trong việc tiết lộ công khai những chỉ số mới này là gì và cách chúng hoạt động. Với thông tin đó, bạn có thể xây dựng danh sách kiểm tra các mục hành động để kiểm tra và tối ưu hóa trên trang web của mình để sẵn sàng cho việc triển khai tất yếu các yếu tố xếp hạng mới này. Dưới đây là 28 mục như vậy cho danh sách kiểm tra đó.
A. Tối ưu hóa hình ảnh
Hình ảnh là một trong những yếu tố ảnh hưởng lớn nhất đến các quan trọng web cốt lõi. Tất cả các chỉ số web đều đo thời gian cho đến khi một số kết xuất ban đầu và việc tải hình ảnh là nguyên nhân gây ra độ trễ lớn nhất trước khi một trang được tải đầy đủ ban đầu. Do đó, tối ưu hóa hình ảnh có xu hướng là công cụ mạnh mẽ nhất để cải thiện các quan điểm web cốt lõi.
1. Giảm kích thước của hình nền
Hình nền hiếm khi hoàn toàn cần thiết đối với thiết kế trang web và có thể là nguyên nhân gây ra sự chậm trễ lớn trong việc tải trang lần đầu tiên. Nếu bạn sử dụng hình nền, hãy giảm dung lượng của hình ảnh đó và tối ưu hóa nó để nó tải càng gần càng tốt ngay lập tức.
2. Thu nhỏ hoặc thay thế hình nền bằng các mẫu
Nếu bạn không bị ràng buộc với một hình nền cụ thể, hãy thay thế hình ảnh bằng các màu phẳng, gradient hoặc thậm chí là một mẫu lát gạch đơn giản. Một lần nữa, mục tiêu là giảm thiểu số lượng nội dung cần tải trước khi quá trình tải ban đầu của trang web hoàn tất. Vì hình nền không tạo ra tác động lớn (và thậm chí ít cần thiết hơn trên thiết bị di động), hãy giảm thiểu hoặc xóa chúng nhiều nhất có thể.
3. Xóa hình ảnh trên thiết bị di động trong màn hình đầu tiên
Nói về thiết bị di động, trải nghiệm duyệt web trên thiết bị di động thường chậm hơn so với duyệt trên máy tính để bàn do chất lượng của tín hiệu di động và không dây. Các thiết bị di động đặc biệt dễ bị chậm trễ trong lần nhập đầu tiên và khi chuyển nội dung.
Để tránh điều đó, hãy cố gắng tạo càng nhiều nội dung trong màn hình đầu tiên càng tốt dựa trên văn bản và các yếu tố đơn giản khác. Hình ảnh lớn và trình chiếu trong màn hình đầu tiên đặc biệt khó khăn đối với điểm số của bạn, vì vậy hãy xóa hoặc di chuyển chúng càng nhiều càng tốt.
4. Triển khai Lazy Loading
Lazy loading là một kỹ thuật phổ biến để tăng tốc tải ban đầu của bất kỳ trang nhất định nào. Với các chỉ số mới của Google đang được triển khai, không có gì ngạc nhiên khi hỗ trợ cho nó nhanh chóng trở thành một tính năng mặc định. WordPress, ví dụ, đã thêm tải chậm mặc định gốc trong phiên bản 5.5 vào đầu năm nay. Tận dụng tính năng tải chậm cho bất kỳ nội dung nào, đặc biệt là hình ảnh, ban đầu không cần tải trong màn hình đầu tiên.
5. Sử dụng Hình ảnh WebP
Một sáng kiến khác của Google, WebP là một định dạng hình ảnh mới được phát triển vào năm 2010. Đây là một định dạng hình ảnh nhỏ hơn với các thuật toán nén tốt hơn các định dạng hình ảnh truyền thống của bạn như PNG.
Mặc dù nó chưa thực sự thu hút được sức kéo rộng rãi cho đến gần đây, nhưng nó ngày càng trở nên có giá trị hơn khi cả người dùng và công cụ tìm kiếm ngày càng quan tâm đến tốc độ và thời gian tải. Hỗ trợ rộng rãi, ngay cả khi không sử dụng, vì vậy bạn có thể ít nhiều sử dụng hình ảnh WebP làm tệp hình ảnh chính của mình một cách an toàn.
6. Tối ưu hóa kích thước tệp hình ảnh
Sử dụng một công cụ để bẻ khóa hoặc làm mờ các tệp hình ảnh để có kích thước tệp nhỏ hơn nên là một phần mặc định của việc tối ưu hóa hình ảnh cho web vào thời điểm này.
Nếu bạn chưa làm điều đó, hãy đảm bảo rằng bạn triển khai một cách xử lý hình ảnh như một phần của quy trình viết blog của bạn về sau. Bạn cũng sẽ muốn đảm bảo rằng bạn đã xác định chiều cao và chiều rộng của hình ảnh để ngăn thay đổi bố cục.
B. Tối ưu hóa CSS
CSS ngày càng trở thành một phần quan trọng trong nhiều thiết kế trang web, đến nỗi việc chặn nó khiến trang web gần như không thể nhận ra. Với rất nhiều trang web phụ thuộc vào CSS cho mọi thứ từ màu sắc đến vị trí, việc đảm bảo mã của bạn được tối ưu hóa là điều quan trọng hơn bao giờ hết. 7. CSS quan trọng nội tuyến Bạn không cần phải chỉnh sửa từng bit CSS của mình, mặc dù điều đó cũng hoạt động. Đặc biệt, bạn muốn nội tuyến CSS quan trọng đối với thiết kế tổng thể và bố cục của chủ đề của bạn.
Điều này giảm thiểu số lượng tệp riêng lẻ mà trình duyệt cần gọi từ máy chủ của bạn chỉ để tải bố cục ban đầu và vẽ nội dung ban đầu trên trang web của bạn.
8. Giảm thiểu CSS
Theo mặc định, CSS là một ngôn ngữ rất tối giản và có thể hoạt động hoàn toàn tốt mà không có khoảng trắng, thụt lề, nhận xét và các văn bản khác, giúp nó thân thiện hơn và dễ phát triển hơn. Trước khi tải mã mới lên trang web của bạn, hãy chạy mã này thông qua một công cụ để thu nhỏ mã và loại bỏ tất cả các phần thừa có tác động hiển vi nhưng rõ ràng đối với việc tải trang.
9. Hợp nhất các tệp và mã CSS
Có thể hấp dẫn để lưu trữ CSS trong nhiều tệp khác nhau và nằm rải rác trong mã của bạn, đặt nó ở nơi có vẻ như nó nên đặt hơn là nơi hợp lý để đặt nó. Nhớ lại; những gì dễ dàng nhất với tư cách là nhà phát triển không nhất thiết phải nhanh nhất đối với người dùng. Hợp nhất CSS của bạn, cho dù đó là nội tuyến hay trong các tệp riêng biệt và chỉ thực thi các phần tử cụ thể khi cần thiết.
10. Tối ưu hóa Phân phối CSS
CSS thường là một phần tử tải muộn của mã trang web. Thiết kế trang web truyền thống tải khuôn khổ cho trang web, sau đó là nội dung, sau đó là CSS để định dạng tất cả. Đặc biệt khi CSS được lưu trữ trong một tệp bên ngoài, điều này sẽ làm chậm tải đáng kể. Tải trước CSS của bạn là chiến lược được Google khuyến nghị để buộc trình duyệt tải CSS và chuẩn bị sẵn sàng khi cần thiết.
C. Tối ưu hóa JavaScript
JavaScript là một trong những nguồn mã lớn nhất gây ra sự phình to và chậm trễ trong việc tải trang web. Việc tối ưu hóa JS của trang web của bạn có thể giúp tăng tốc nó lên rất nhiều, ngay cả khi dường như nó không có nhiều tác dụng dựa trên những gì bạn đang làm với nó.
11. Giảm thiểu các tập lệnh JS
Giống như CSS, JavaScript không cần dấu cách và dấu ngắt không liên quan để hoạt động. Nó cũng không cần các tên biến dài dòng, rất hữu ích cho việc phát triển nhưng có thể tăng kích thước tập lệnh lên một lượng đáng kể. Chạy các tập lệnh của bạn thông qua trình thu nhỏ trước khi thêm chúng vào trang web của bạn.
12. Hợp nhất tập lệnh và giảm thiểu việc sử dụng
Nhiều mục đích mà các nhà thiết kế web sử dụng JavaScript đã có sẵn dưới dạng các tính năng trong HTML5 và CSS3 trong nhiều năm nay. Đặc biệt trong các trang web cũ hơn, việc sửa đổi hoặc xem xét các tập lệnh có thể tìm ra những cách thay thế, nhanh hơn để làm những việc tương tự. Xem xét và tối ưu hóa, giảm thiểu, hợp nhất và tách càng nhiều JavaScript khỏi trang web của bạn càng tốt.
13. Trì hoãn hoặc không đồng bộ tập lệnh bất cứ khi nào có thể
Tập lệnh là rào cản trong việc hiển thị một trang web. Khi trình duyệt phải hiển thị một tập lệnh JS, nó phải xử lý qua tập lệnh đó trước khi có thể tiếp tục tải trang. Vì nhiều nhà phát triển đặt các tập lệnh trong tiêu đề của họ, điều này làm chậm quá trình tải trang đáng kể. Sử dụng Defer cho phép trình duyệt tiếp tục tải trang trước khi thực thi script, trong khi Async cho phép chúng tải đồng thời. Sử dụng hai tính năng này cho phép bạn bù đắp độ trễ vốn có khi sử dụng các tập lệnh và tăng tốc độ tải trang ban đầu của bạn.
14. Loại bỏ jQuery Migrate
Bản cập nhật gần đây cho jQuery đã dẫn đến rất nhiều plugin và tập lệnh cũ không còn hoạt động. Để câu giờ và cho phép quản trị viên web cập nhật trang web của họ, mô-đun Migrate đã được giới thiệu. Về cơ bản đây là một mô-đun dịch cho phép jQuery cũ hoạt động trên các trang web sử dụng phiên bản jQuery mới hơn.
15. Sử dụng Google Hosted JS
Bất cứ khi nào có thể Google cung cấp một loạt các thư viện tiêu chuẩn được lưu trữ trên máy chủ của họ để sử dụng trên trang web của bạn. Thay vì phụ thuộc vào bên thứ ba cho các thư viện đó hoặc tự lưu trữ chúng, hãy sử dụng các phiên bản của Google để có thời gian tải nhanh nhất có thể.
D. Tối ưu hóa video
Video ngày càng phổ biến như một phần của trang web bình thường, từ các yếu tố cốt lõi của nội dung đến quảng cáo dựa trên video và mọi thứ ở giữa. Chúng cũng là các tệp cực kỳ lớn, ngay cả khi tải một phần và lưu vào bộ đệm video hiện đại. Tối ưu hóa việc sử dụng video của bạn nhiều nhất có thể.
16. Sử dụng Trình giữ chỗ
Hình ảnh cho Hình thu nhỏ Video Có rất nhiều người dùng duyệt web mà không muốn xem video, vì vậy việc buộc tải video trong nền đối với họ là hoàn toàn không cần thiết. Một giải pháp tốt là sử dụng trình giữ chỗ hình ảnh nơi video thường tải.
Hình ảnh tải nhanh hơn và trông giống như trình phát video với hình thu nhỏ đã tải. Khi người dùng nhấp vào nó để bắt đầu video, nó sẽ bắt đầu tải video nhưng không yêu cầu tải bất kỳ tệp video hoặc trình phát nào cho đến thời điểm đó.
17. Thu nhỏ video trong màn hình đầu tiên
Cũng giống như hình ảnh, các tệp video cực kỳ nặng, vì vậy tải chúng trong màn hình đầu tiên là độ trễ được đảm bảo trên bản vẽ nội dung đầu tiên của bạn. Đẩy chúng xuống dưới nếp gấp; hầu hết mọi người đều muốn đọc tiêu đề và phần giới thiệu trước khi họ xem video.
E. Tối ưu hóa phông chữ và biểu tượng
Việc sử dụng phông chữ và biểu tượng có thể nặng hơn rất nhiều về thời gian tải của trang web so với bạn mong đợi. Việc tối ưu hóa chúng có vẻ giống như công việc chi tiết nhỏ, nhưng khi bạn thấy tác động mà nó có thể có, bạn sẽ tự hỏi tại sao mình chưa từng thực hiện những tối ưu hóa nhỏ nhưng có tác động này trước đây.
18. Phông chữ tải trước
Tương tự như tập lệnh, khi trang web của bạn yêu cầu một phông chữ mà nó cần tải, việc tải phông chữ đó sẽ được ưu tiên và ngăn phần còn lại của mã hiển thị. Sử dụng lệnh tải trước để tải phông chữ sớm hơn mức cần thiết giúp tăng tốc độ tải trang, cũng như ngăn chặn hiệu ứng “nhấp nháy văn bản chưa được định kiểu” xảy ra trong tích tắc giữa quá trình tải văn bản và kiểu phông chữ xuất hiện.
19. Chỉ sử dụng phông chữ bạn cần
Nhiều phông chữ web và họ phông chữ tải toàn bộ bộ ký tự và bảng định kiểu của chúng khi được gọi, ngay cả khi trang của bạn không sử dụng 90% nội dung đó. Thông thường, bạn có thể giới hạn số lượng bạn tải, mặc dù bạn có thể phải trả tiền để truy cập phông chữ cao cấp. Nó có thể khá đáng giá nếu bạn đang sử dụng số lượng hạn chế của một phông chữ nhất định hoặc một phông chữ có bao gồm một bộ ký tự đặc biệt lớn.
20. Sử dụng SVG bất cứ khi nào có thể
SVG là Đồ họa Vectơ có thể mở rộng và là một cách để tạo các phần tử cực kỳ nhỏ của một trang, tuy nhiên, có thể mở rộng vô hạn, cũng như được thao tác riêng lẻ, ở mức độ lớn hơn nhiều so với các phông chữ và biểu tượng truyền thống. Nếu có thể, hãy chuyển sang sử dụng SVG thay vì các biểu tượng thông thường của bạn.
F. Tối ưu hóa máy chủ
Bất kể bạn thực hiện bao nhiêu tối ưu hóa cho mã của trang web, cho hình ảnh của bạn hoặc cho các phần tử khác của trang web của bạn, không có vấn đề gì trong số đó nếu máy chủ của bạn chậm. Sự gia tăng của các công ty lưu trữ web, sự phát triển không ngừng của công nghệ nhanh hơn và mạnh hơn, tất cả có nghĩa là lưu trữ web cho thấy tuổi của nó rất nhanh chóng. Vài năm một lần, có thể đáng giá khi thay đổi hoặc nâng cấp dịch vụ lưu trữ lên cơ sở hạ tầng nhanh hơn.
21. Nâng cấp lên Máy chủ nhanh hơn
Bạn không nhất thiết phải nâng cấp từ máy chủ chia sẻ lên máy chủ lưu trữ chuyên dụng, mặc dù điều này có thể giúp giải quyết một số vấn đề về tốc độ vốn có trong lưu trữ được chia sẻ. Thậm chí chỉ cần nâng cấp từ gói chậm hơn lên gói nhanh hơn cũng có thể là một cách sử dụng ngân sách hiệu quả.
22. Sử dụng CDN
Các mạng phân phối nội dung hiện đại có thể xử lý hầu hết các yếu tố của trang web của bạn nhanh hơn so với máy chủ web thông thường của bạn trong hầu hết mọi trường hợp. Ít nhất, hãy cân nhắc sử dụng CDN cho hình ảnh, video và các nội dung đa phương tiện khác. Bạn cũng có thể cân nhắc việc giảm tải các tệp script độc lập.
23. Tải trước các truy vấn DNS
Tải trước hoặc tìm nạp trước các truy vấn DNS giúp giảm thiểu độ trễ giữa nội dung được khách truy cập yêu cầu và hiển thị nội dung đó. Điều này kết hợp với việc sử dụng CDN để lưu trữ nội dung bằng cách tải và phân giải miền của CDN trước khi miền đó được gọi lần đầu tiên, giúp tăng tốc hơn nữa thời gian tải trang.
24. Tải trước bộ nhớ cache của bạn
Thông thường, một plugin hoặc tập lệnh bộ nhớ cache được sử dụng trên trang web sẽ kích hoạt khi khách truy cập đầu tiên đến xem trang. Khách truy cập đầu tiên đó có trải nghiệm chậm hơn, nhưng họ tải trang vào bộ nhớ cache cho những khách truy cập trong tương lai cho đến khi bộ nhớ cache hết hạn. Thật không may, lần truy cập đầu tiên thường là một bot của Google thu thập dữ liệu trang của bạn từ sơ đồ trang web XML hoặc liên kết nội bộ và điều đó có nghĩa là Google là người đầu tiên trải nghiệm phiên bản chậm của trang web của bạn. Bạn có thể giải quyết vấn đề này bằng cách tải trước bộ nhớ cache trên trang web của mình để lần truy cập tiếp theo của Google là một trang web tải nhanh được đảm bảo.
25. Xem xét Bộ nhớ cache phía máy chủ
Phần mềm như Varnish Cache hoạt động như một bộ nhớ đệm phía máy chủ để tăng tốc hơn nữa việc tạo và phân phối phiên bản đã lưu trong bộ nhớ cache của trang của bạn, làm cho nó nhanh nhất có thể với ít lệnh gọi máy chủ nhất có thể.
G. Tối ưu hóa bổ sung
Mọi thứ không phù hợp với danh mục khác đã được thêm vào đây. Những tối ưu hóa bổ sung này có thể không áp dụng cho thiết kế trang web của bạn, nhưng nếu có, việc chăm sóc chúng có thể là một lợi ích tuyệt vời.
26. Giảm thiểu tập lệnh của bên thứ ba
Các quản trị viên web vào năm 2021 sẽ cần phải cân bằng giữa tối ưu hóa tốc độ trang web và các công cụ tương tác của người dùng. Nhiều plugin, chẳng hạn như nút chia sẻ xã hội, hệ thống nhận xét của bên thứ ba và nhúng phương tiện đều cần thực thi các tập lệnh của bên thứ ba để hoạt động, nhưng những tập lệnh đó làm chậm trang web. Giảm thiểu chúng càng nhiều càng tốt và cố gắng tìm các phiên bản nhanh nhất của mỗi loại.
27. Tránh nạp trước bộ nạp
Một kỹ thuật phổ biến cho các trang web có thời gian tải chậm hơn là thêm một vòng xoay, một biểu tượng tải, hoạt ảnh hoặc một dạng nội dung khác tải và hiển thị để cho người dùng biết rằng trên thực tế, trang web đang tải. Mặc dù điều này có thể giúp giảm thiểu số trang không truy cập, nhưng đó là một tác động lớn đối với tải ban đầu được đo bằng các chỉ số web cốt lõi. Xóa những thứ này và cố gắng tăng tốc trang web của bạn để bạn không cần chúng.
28. Xem xét thiết kế lại trang web
Khi tất cả đã được nói và làm xong, đôi khi bạn cần thực hiện nhiều thay đổi đối với rất nhiều yếu tố nền tảng của trang web, đến mức dễ dàng hơn chỉ cần loại bỏ thiết kế hiện tại của bạn và thiết kế một thiết kế mới với tốc độ nhanh chóng. Hãy coi đó là một khả năng và phân tích những lợi ích bạn sẽ nhận được từ các quan trọng web cốt lõi được tối ưu hóa. Vẫn chưa ai biết những chỉ số đó sẽ có ảnh hưởng như thế nào đối với thuật toán tổng thể, nhưng chắc chắn việc tối ưu hóa cho chúng sẽ không ảnh hưởng gì.
Xem thêm: Thiết kế web tại Cần Thơ
James Parsons là người sáng lập Content Powered, một công ty quản lý blog & tiếp thị nội dung. Ông đã làm việc với tư cách là nhà tiếp thị nội dung cấp cao trong hơn một thập kỷ và viết bài cho Forbes, Entrepreneur, Inc và Business Insider.
Nguồn: https://www.searchenginewatch.com/2021/01/13/core-web-vitals-report-28-ways-to-supercharge-your-site/
