Giành chiến thắng trong cuộc đua tốc độ tải trang: Làm thế nào để biến trang web "cục gạch" của bạn thành một chiếc xe đua?

Tóm lược về sứ mệnh của Google trong việc làm cho web nhanh hơn

Để khuyến khích các chủ sở hữu trang web thực sự quan tâm đến vấn đề này, vào năm 2010, Google đã thông báo rằng tốc độ tải trang sẽ trở thành một yếu tố trong thuật toán xếp hạng công cụ tìm kiếm trên máy tính để bàn (không phải thiết bị di động). Điều này có nghĩa là các trang web tải nhanh sẽ có lợi thế về SEO so với các trang web khác.

Sáu năm sau, vào năm 2015, Google thông báo rằng số lượng tìm kiếm được thực hiện trên thiết bị di động đã vượt qua số lượng tìm kiếm được thực hiện trên máy tính để bàn . Tỷ lệ này tiếp tục tăng lên. Thống kê mới nhất cho thấy, tính đến năm 2019, 61% số lượt tìm kiếm trên Google được thực hiện từ thiết bị di động .

Vai trò thống trị của thiết bị di động trong tìm kiếm hiện nay đã dẫn đến việc Google phát triển dự án “Trang di động tăng tốc” (AMP). Sáng kiến ​​này nhằm khuyến khích các chủ sở hữu trang web tạo ra một giao diện di động khác, về cơ bản là một giao diện đáp ứng (responsive mobile theme) khác, tuân thủ một bộ hướng dẫn phát triển và hiệu suất rất nghiêm ngặt.

Mặc dù nhiều chủ sở hữu trang web và chuyên gia SEO phàn nàn về việc phải chú trọng đến tốc độ tải trang và AMP bên cạnh hơn 200 yếu tố xếp hạng khác đã gây đau đầu cho họ, nhưng tốc độ tải trang thực sự là một nỗ lực đáng giá mà các chủ sở hữu trang web nên tập trung vào. Năm 2017, Google đã tiến hành một nghiên cứu và kết quả đã chứng minh rất rõ ràng sự tập trung của họ vào việc làm cho web nhanh hơn. Họ nhận thấy rằng “ Khi thời gian tải trang tăng từ một giây lên 10 giây, xác suất người dùng di động rời khỏi trang web tăng 123%. ”

Vào tháng 7 năm 2018, tốc độ tải trang đã trở thành một yếu tố xếp hạng cho tìm kiếm trên thiết bị di động , và hôm nay Google sẽ tích hợp thêm nhiều yếu tố liên quan đến tốc độ (gọi là Core Web Vitals ) vào thuật toán xếp hạng của mình.

Với thời gian tập trung trung bình của con người ngày càng giảm và sự phụ thuộc vào thiết bị di động ngày càng tăng, không thể phủ nhận rằng tốc độ tải trang là và sẽ tiếp tục là một yếu tố vô cùng quan trọng mà các chủ sở hữu trang web cần chú trọng.

Cách tối ưu hóa tốc độ website

Hãy suy nghĩ như một tay đua xe.

Để chiến thắng cuộc đua tốc độ tải trang, bạn cần những yếu tố tương tự như chiến thắng một cuộc đua xe. Để thắng một cuộc đua xe, bạn cần đảm bảo xe của mình càng nhẹ càng tốt, càng mạnh càng tốt và bạn phải điều khiển xe trên đường đua một cách hiệu quả nhất có thể.

Tôi sẽ dùng ví dụ này để giúp các kỹ thuật tối ưu hóa tốc độ tải trang trở nên dễ hiểu hơn.

Hãy làm cho nó nhẹ

Ngày nay, các trang web đẹp và đa chức năng hơn bao giờ hết — nhưng điều đó cũng có nghĩa là chúng lớn hơn bao giờ hết. Hầu hết các trang web hiện đại tương đương với một chiếc xe buýt tiệc tùng hoặc một chiếc xe limousine. Chúng siêu sang trọng, được trang bị đủ loại tiện nghi, và do đó RẤT NẶNG và CHẬM. Trong “đường đua” của công cụ tìm kiếm, bạn sẽ không thắng với một chiếc xe buýt tiệc tùng hay một chiếc xe limousine. Bạn sẽ trông thật ngầu, nhưng bạn sẽ thua.

Để chiến thắng cuộc đua tốc độ tải trang, bạn cần một chiếc xe đua thực thụ, có trọng lượng nhẹ. Xe đua không có radio, giá đựng cốc, hộp đựng đồ, hay bất cứ thứ gì không thực sự cần thiết. Tương tự, trang web của bạn không nên chứa quá nhiều hình ảnh động phức tạp, video nền, hình ảnh khổng lồ, tiện ích cầu kỳ, plugin dư thừa, hoặc bất cứ thứ gì khác không thực sự cần thiết.

Ngoài việc loại bỏ những yếu tố trang trí không cần thiết và các plugin dư thừa khỏi trang web của bạn, bạn cũng có thể giảm dung lượng website bằng cách:

• Giảm số lượng các đoạn mã của bên thứ ba (các đoạn mã gửi hoặc nhận dữ liệu từ các trang web khác).

• Chuyển sang giao diện nhẹ hơn (ít mã lập trình hơn) và giảm số lượng phông chữ được sử dụng.

• Triển khai AMP

• Tối ưu hóa hình ảnh

• Nén và thu nhỏ mã

• Thực hiện tối ưu hóa cơ sở dữ liệu thường xuyên.

Trên hệ thống quản lý nội dung mã nguồn mở như WordPress, có sẵn các plugin tăng tốc có thể giúp đơn giản hóa rất nhiều tác vụ này. WP Rocket và Imagify là hai plugin WordPress có thể được sử dụng cùng nhau để giảm đáng kể dung lượng website của bạn thông qua tối ưu hóa hình ảnh, nén, thu nhỏ và nhiều phương pháp tối ưu hóa tốc độ trang khác.

Hãy trao cho nó nhiều quyền lực hơn

Bạn sẽ không lắp động cơ xe golf vào xe đua, vậy tại sao bạn lại đặt trang web của mình trên gói lưu trữ chia sẻ giá rẻ bèo? Có thể bạn sẽ thấy khó chịu khi phải trả nhiều hơn vài đô la mỗi tháng cho dịch vụ lưu trữ nếu bạn đã sử dụng một trong những gói đó trong thời gian dài, nhưng một lần nữa, động cơ xe golf so với động cơ xe đua: bạn muốn thắng cuộc đua này hay không?

Các gói dịch vụ lưu trữ chia sẻ truyền thống nhồi nhét hàng chục nghìn trang web vào một máy chủ duy nhất. Điều này khiến mỗi trang web riêng lẻ thiếu hụt sức mạnh xử lý.

Nếu bạn muốn cạnh tranh ở cấp độ cao, đã đến lúc bạn cần một gói dịch vụ lưu trữ chuyên nghiệp. Đối với các trang web WordPress, các công ty cung cấp dịch vụ lưu trữ được quản lý như WP Engine và Flywheel sử dụng các máy chủ mạnh mẽ và được tinh chỉnh đặc biệt để phục vụ các trang web WordPress nhanh hơn.

Nếu dịch vụ lưu trữ WordPress được quản lý không phù hợp với bạn, hoặc nếu bạn không có trang web WordPress, việc nâng cấp lên VPS (Máy chủ ảo riêng) sẽ giúp trang web của bạn có nhiều tài nguyên tính toán hơn. Bạn cũng sẽ có nhiều quyền kiểm soát hơn đối với môi trường lưu trữ của mình, cho phép bạn "tinh chỉnh hệ thống" với những thứ như các phiên bản PHP, MySQL, bộ nhớ đệm Varnish mới nhất và các công nghệ máy chủ web hiện đại khác. Bạn sẽ không còn phải phụ thuộc vào lòng tham của công ty lưu trữ chia sẻ khi họ nhồi nhét ngày càng nhiều trang web vào máy chủ vốn đã quá tải của bạn.

Tóm lại, việc đặt trang web của bạn trên một môi trường lưu trữ được tối ưu hóa tốt có thể giống như việc lắp thêm bộ siêu tăng áp cho chiếc xe đua của bạn.

Lái xe tốt hơn

Cuối cùng, nhưng không kém phần quan trọng, một chiếc xe đua nhẹ và mạnh mẽ chỉ có thể đạt tốc độ nhất định nếu không có người lái được đào tạo bài bản, biết cách điều khiển xe trên đường đua một cách hiệu quả.

Phần "điều hướng hành trình" trong phép so sánh này đề cập đến quá trình trình duyệt web tải một trang web. Mỗi thành phần của một trang web là một khúc quanh hoặc một bước ngoặt mà trình duyệt phải điều hướng khi nó di chuyển qua mã và xử lý đầu ra của trang.

Tôi sẽ tạm thời chuyển sang một ví dụ khác để giải thích rõ hơn. Khi sửa sang nhà cửa, người ta thường sơn các phòng trước rồi mới làm lại sàn nhà. Nếu bạn làm lại sàn nhà trước rồi mới sơn các phòng, sàn nhà mới sẽ bị dính sơn và bạn sẽ phải quay lại xử lý sàn nhà lần nữa sau đó.

Khi trình duyệt tải một trang web, nó trải qua một quá trình được gọi là (một sự trùng hợp ngẫu nhiên) “vẽ”. Mỗi trang được “vẽ” khi trình duyệt nhận được các mẩu dữ liệu từ mã nguồn của trang web. Quá trình vẽ này có thể được thực hiện một cách hiệu quả (ví dụ: sơn tường trước khi sửa chữa sàn nhà), hoặc nó có thể được thực hiện một cách hỗn loạn và không theo thứ tự, đòi hỏi phải quay lại nhiều lần từ đầu quá trình để làm lại, sửa chữa hoặc thêm những thứ đáng lẽ ra phải được thực hiện sớm hơn.

Đây là phần có thể trở nên phức tạp hơn về mặt kỹ thuật, nhưng điều quan trọng là bạn cần làm mọi cách để giúp trang web của mình vận hành "lộ trình" hiệu quả hơn.

Bộ nhớ đệm là một khái niệm mà mọi trang web nên có để giúp việc tải trang trên trình duyệt nhanh hơn. Trình duyệt đã mất khá nhiều thời gian để xử lý toàn bộ mã nguồn của một trang và hiển thị nó cho người dùng, vì vậy bạn nên chuẩn bị sẵn mã nguồn đó trên máy chủ. Theo mặc định, nếu không có bộ nhớ đệm, điều đó sẽ không xảy ra.

Nếu không có bộ nhớ đệm, hệ thống quản lý nội dung (CMS) và máy chủ của trang web vẫn có thể đang xử lý việc tạo mã nguồn của trang web trong khi trình duyệt đang chờ hiển thị trang. Điều này có thể khiến trình duyệt phải tạm dừng và chờ thêm mã được gửi từ máy chủ. Với bộ nhớ đệm, mã nguồn của một trang được biên dịch trước trên máy chủ để sẵn sàng được gửi đến trình duyệt một cách hoàn chỉnh chỉ trong một lần. Hãy tưởng tượng nó giống như một máy photocopy có sẵn nhiều bản sao của một tài liệu và sẵn sàng để phát, thay vì phải tạo bản sao theo yêu cầu mỗi khi có người cần.

Bạn có thể thực hiện nhiều loại và cấp độ bộ nhớ đệm khác nhau thông qua các plugin, nhà cung cấp dịch vụ lưu trữ và/hoặc thông qua CDN (Mạng phân phối nội dung). CDN không chỉ cung cấp bộ nhớ đệm mà còn lưu trữ các bản sao mã website đã được tạo sẵn trên nhiều máy chủ trên khắp thế giới, giảm thiểu ảnh hưởng của khoảng cách vật lý giữa máy chủ và người dùng đến thời gian tải trang. (Và đúng vậy, internet thực sự được tạo thành từ các máy chủ vật lý phải giao tiếp với nhau qua các khoảng cách vật lý. Web không thực sự là một "đám mây" theo nghĩa đó.)

Quay trở lại với ví dụ về xe đua, việc sử dụng bộ nhớ đệm và CDN sẽ giúp xe chạy nhanh hơn rất nhiều trên đường đua.

Đó là hai trong số những yếu tố cơ bản để vẽ trang hiệu quả, nhưng còn nhiều kỹ thuật khác nữa có thể được sử dụng. Trên WordPress, những điều sau đây có thể được thực hiện thông qua một hoặc nhiều plugin (một lần nữa, WP Rocket và Imagify là sự kết hợp đặc biệt tốt để đạt được nhiều điều này):

• Tải tập lệnh không đồng bộ và/hoặc trì hoãn. Về cơ bản, đây là cách nói hoa mỹ để chỉ việc tải nhiều thứ cùng một lúc hoặc chờ đến sau để tải những thứ không cần thiết ngay lập tức.

• Tải trước và lấy trước dữ liệu. Về cơ bản, đó là việc lấy trước dữ liệu về các liên kết thay vì chờ người dùng nhấp vào chúng.

• Tải lười (Lazy loading). Thuật ngữ này nghe có vẻ mỉa mai vì khái niệm này tồn tại nhằm mục đích tăng tốc độ tải trang, nhưng theo mặc định, hầu hết các trình duyệt đều tải TẤT CẢ hình ảnh trên một trang, ngay cả những hình ảnh nằm ngoài tầm nhìn cho đến khi người dùng cuộn xuống. Việc triển khai tải lười có nghĩa là yêu cầu trình duyệt "lười biếng" và chờ tải những hình ảnh nằm ngoài tầm nhìn đó cho đến khi người dùng thực sự cuộn xuống đến vị trí của chúng.

• Hiển thị hình ảnh ở định dạng thế hệ mới. Các định dạng hình ảnh mới như WebP có thể được trình duyệt tải nhanh hơn nhiều so với các định dạng JPEG và PNG cũ. Tuy nhiên, điều quan trọng cần lưu ý là không phải tất cả các trình duyệt đều hỗ trợ các định dạng mới này — vì vậy hãy đảm bảo sử dụng một plugin có thể hiển thị các phiên bản thế hệ mới cho các trình duyệt hỗ trợ chúng, nhưng vẫn cung cấp các phiên bản cũ cho các trình duyệt không hỗ trợ. WP Rocket, khi kết hợp với Imagify, có thể thực hiện được điều này.

Tối ưu hóa cho Core Web Vitals

Cuối cùng, việc tối ưu hóa các chỉ số Core Web Vital mới (Largest Contentful Paint, First Input Delay và Cumulative Layout Shift) cũng có thể giúp quá trình tối ưu hóa diễn ra hiệu quả hơn nhiều.

Đây là những khái niệm khá chuyên ngành, nhưng dưới đây là một cái nhìn tổng quan nhanh để giúp bạn làm quen với ý nghĩa của chúng:

• Largest Contentful Paint (LCP) đề cập đến việc hiển thị nội dung của phần tử lớn nhất trên trang. Công cụ PageSpeed ​​Insights của Google sẽ cho bạn biết phần tử nào được coi là phần tử LCP của một trang. Thông thường đó là hình ảnh chính (hero image) hoặc khu vực trình chiếu lớn, nhưng nó thay đổi tùy thuộc vào từng trang, vì vậy hãy chạy công cụ để xác định LCP trên trang của bạn và sau đó suy nghĩ về những gì bạn có thể làm để giúp phần tử đó tải nhanh hơn.

• Độ trễ đầu vào đầu tiên (FID) là độ trễ giữa hành động đầu tiên của người dùng và khả năng phản hồi của trình duyệt. Một ví dụ về vấn đề FID là một nút hiển thị cho người dùng sớm hơn so với thời điểm nó có thể nhấp chuột được. Độ trễ này là do chức năng nhấp chuột tải chậm hơn đáng kể so với chính nút đó.

• Hiện tượng dịch chuyển bố cục tích lũy (Cumulative Layout Shift - CLS) là một cụm từ gồm ba từ lớn nhưng cùng đề cập đến một khái niệm đơn giản. Bạn có biết khi đang tải một trang web trên điện thoại và muốn nhấp vào hoặc đọc nội dung nào đó, nhưng trang lại bị giật lên hoặc xuống vì có nội dung khác được tải phía trên hoặc phía dưới không? Hiện tượng đó chính là CLS, nó cực kỳ khó chịu và là hệ quả của việc vẽ trang không hiệu quả.

Tóm lại, xe đua > xe golf

Tối ưu hóa tốc độ tải trang chắc chắn rất phức tạp và khó hiểu, nhưng nó là một yếu tố thiết yếu để đạt được thứ hạng tốt hơn. Là chủ sở hữu trang web, bạn đang tham gia cuộc đua này dù muốn hay không — vì vậy, tốt hơn hết bạn nên làm những gì có thể để biến trang web của mình thành một chiếc xe đua thay vì một chiếc xe golf!