Tốc độ trang từ lâu đã trở thành một yếu tố xếp hạng của Google. Bắt đầu với thông báo đầu tiên vào năm 2010, và sau đó củng cố nó bằng một bản cập nhật khác vào năm 2018, và sau đó kết thúc thỏa thuận với việc giới thiệu Core Web Vitals vào năm 2020. Trong bài viết này, chúng ta sẽ xem xét tốc độ trang hiện nay, cách đo lường nó và quan trọng nhất là cách cải thiện điểm tốc độ trang cho trang web của bạn.
Tốc độ trang là gì?
Trong một thời gian dài, bản thân Google đã phải vật lộn với việc đo tốc độ trang. Các chỉ số phù hợp là gì? Bạn sử dụng dữ liệu hiện trường hay dữ liệu phòng thí nghiệm? Bạn có thời gian cho toàn bộ trang hay chỉ phần trên cùng? Có hàng tá chỉ số liên quan đến tốc độ trang và sẽ là một chặng đường dài để tìm ra chỉ số nào thực sự quan trọng đối với người dùng.
Cuối cùng, Google đã giải quyết được bộ ba chỉ số hiện được coi là quan trọng nhất đối với tốc độ trang: Sơn có nội dung lớn nhất (LCP), Độ trễ đầu vào đầu tiên (FID) và Dịch chuyển bố cục tích lũy (CLS). Được gọi chung là Core Web Vitals, các chỉ số này nhằm đo tốc độ trang cảm nhận thay vì tốc độ trang thực tế.
Sơn có nội dung lớn nhất
Sơn có nội dung lớn nhất là thời gian cần để phần tử lớn nhất trong chế độ xem tải hoàn toàn. Điểm chuẩn cho số liệu này như sau:
Thông thường phần tử lớn nhất là hình ảnh, vì vậy tối ưu hóa hình ảnh là yếu tố chính đóng góp vào số liệu này. Trên hết, LCP phụ thuộc vào thời gian phản hồi của máy chủ, mã chặn hiển thị và hiển thị phía máy khách.
Độ trễ đầu vào đầu tiên
Độ trễ đầu vào đầu tiên là độ trễ giữa phần tử tương tác được sơn và thời điểm nó hoạt động. Giả sử, một nút được vẽ trên trang, bạn nhấp vào nút đó, nhưng nó chưa phản hồi. Điểm chuẩn cho số liệu này như sau:
FID có thể được tối ưu hóa bằng cách tách mã và sử dụng ít JavaScript hơn.
Dịch chuyển bố cục tích lũy
Tích lũy Layout Shift đo lường xem các phần tử trên trang có di chuyển xung quanh khi tải hay không. Giả sử, một trang có vẻ như đã sẵn sàng để sử dụng, nhưng sau đó một hình ảnh mới xuất hiện ở trên cùng và phần còn lại của nội dung bị đẩy xuống dưới – đó là sự thay đổi bố cục. Điểm chuẩn cho số liệu này như sau:
CLS phụ thuộc vào các thuộc tính kích thước được đặt đúng cách và việc tải tài nguyên của bạn theo một trình tự cụ thể, từ trên xuống dưới.
Làm thế nào để đo tốc độ trang trên trang web của bạn?
Có rất nhiều công cụ do Google cung cấp cung cấp Core Web Vitals như một phần của quá trình kiểm tra trang của họ:
Một vấn đề là một số công cụ sử dụng dữ liệu phòng thí nghiệm thay vì dữ liệu trường, trong khi Google xếp hạng các trang của bạn chỉ dựa trên dữ liệu thực địa. Bạn có thể phân biệt các công cụ này vì chúng thay thế chỉ số FID chỉ ở trường bằng chỉ số TBT (Tổng thời gian chặn) được đo trong phòng thí nghiệm.
Vấn đề khác là hầu hết các công cụ chỉ có thể đánh giá một trang tại một thời điểm, đây không phải là cách tiếp cận thực tế để tối ưu hóa toàn bộ trang web của bạn.
Trong số các công cụ của Google được liệt kê ở trên, công cụ tốt nhất để sử dụng có lẽ là Google Search Console. Tại đó, bạn có thể chuyển đến Experience> Core Web Vitals và xem báo cáo cho tất cả các trang của mình cùng một lúc:
Trong báo cáo, có một danh sách tất cả các chỉ số không thành công:
Và từ đó, bạn có thể thực hiện theo quy trình chi tiết để tìm các vấn đề cụ thể trong từng số liệu, sau đó là các trang bị ảnh hưởng bởi vấn đề và sau một vài lần nhấp, bạn sẽ đến báo cáo PageSpeed Insights cho một trang cụ thể. Vì vậy, mặc dù báo cáo cấp cao nhất được cung cấp hàng loạt, nhưng việc tìm ra những trang nào bị ảnh hưởng bởi những vấn đề nào có thể là một quá trình mệt mỏi.
Một cách tốt hơn được cho là để đo tốc độ trang là sử dụng WebSite Auditor. Ở đó, bạn có thể chuyển đến Cấu trúc trang web> Kiểm tra trang web và nhận báo cáo tốc độ trang hàng loạt cho toàn bộ trang web của mình cũng như xem tất cả các trang bị ảnh hưởng – tất cả từ một trang tổng quan:
Báo cáo Core Web Vitals trong WebSite Auditor
Hoặc bạn có thể chuyển sang Site Audit > Pages > Page Speed và xem danh sách các trang có vấn đề về tốc độ ảnh hưởng đến chúng. Nhấp vào bất kỳ trang nào và bạn cũng sẽ nhận được danh sách các phần tử trang có thể được tối ưu hóa để có hiệu suất tốt hơn:
Nhìn chung, tôi thấy WebSite Auditor thuận tiện hơn khi thực hiện công việc thực tế là tối ưu hóa các trang của bạn, trong khi Google Search Console là một công cụ báo cáo nhiều hơn.
Làm thế nào để cải thiện tốc độ trang trên trang web của bạn?
Bây giờ bạn đã có danh sách các trang bị ảnh hưởng, đã đến lúc cải thiện tốc độ trang của bạn. Dưới đây là một số cơ hội tối ưu hóa phổ biến nhất cũng như một số lời khuyên về cách bạn có thể khai thác chúng.
1). Đặt kích thước hình ảnh Hãy bắt đầu nó với một cái gì đó đơn giản.
Khi bạn bỏ qua kích thước hình ảnh khỏi mã của mình, có thể mất một khoảng thời gian để trình duyệt có thể định kích thước hình ảnh và video của bạn một cách chính xác. Điều này có nghĩa là nội dung trên trang của bạn sẽ nhảy xung quanh và ảnh hưởng tiêu cực đến điểm CLS của bạn.
Để tránh vấn đề này, hãy luôn đặt thuộc tính chiều rộng và chiều cao cho hình ảnh của bạn, như sau:
<img src=”pillow.jpg” width=”640″ height=”360″ alt=”purple pillow with flower pattern” />
Với thông tin này, bất kỳ trình duyệt nào cũng có thể tính toán kích thước hình ảnh của bạn và dành đủ chỗ trên trang. Điều này sẽ quan tâm đến hầu hết, nếu không phải tất cả các vấn đề CLS của bạn.
2). Cung cấp hình ảnh ở định dạng thế hệ tiếp theo
Không phải tất cả các định dạng hình ảnh đều được tạo ra như nhau. Các định dạng JPEG và PNG đáng tin cậy của chúng tôi hiện có đặc điểm chất lượng và nén kém hơn nhiều so với AVIF, JPEG 2000, JPEG XR và WebP.
Trong số các định dạng được liệt kê này, có lẽ WebP là định dạng cần xem xét đầu tiên. Nó hỗ trợ cả nén mất dữ liệu và không mất dữ liệu, cũng như cho phép tạo hình ảnh động và minh bạch. Trên hết, các tệp WebP thường nhẹ hơn từ 25% đến 35% so với PNG và JPEG có chất lượng tương tự. Và mặc dù trước đây người ta thường lo lắng rằng định dạng WebP không được một số trình duyệt hỗ trợ, nhưng gần đây Safari đã bổ sung hỗ trợ cho WebP trong phiên bản 14, do đó, tổng số hỗ trợ định dạng giữa các trình duyệt hiện nay là hơn 90%.
Nếu trang web của bạn được xây dựng trên WordPress, bạn có thể dễ dàng tạo bản sao WebP của hình ảnh của mình bằng một plugin tối ưu hóa hình ảnh như Imagify. Nếu trang web của bạn không được xây dựng trên nền tảng CMS hoặc bạn không muốn cài đặt quá nhiều plugin, bạn có thể chuyển đổi hình ảnh của mình bằng trình chuyển đổi trực tuyến hoặc trình chỉnh sửa đồ họa.
3). Nén hình ảnh
Cho dù bạn có sử dụng định dạng hình ảnh thế hệ tiếp theo hay không, nén hình ảnh của bạn vẫn là một cách hợp lệ để giảm kích thước trang tổng thể. Một lần nữa, nếu trang web của bạn được xây dựng trên WordPress, bạn có thể nén hàng loạt hình ảnh của mình bằng các plugin hình ảnh như WP Smush. Bạn cũng có thể sử dụng trình nén trực tuyến nếu không muốn cài đặt quá nhiều plugin và có nguy cơ làm chậm trang web của bạn. Phương án cuối cùng – sử dụng trình chỉnh sửa đồ họa để nén hình ảnh của bạn trước khi tải chúng lên trang web của bạn.
Chỉ để cung cấp cho bạn ý tưởng về số tiền bạn có thể tiết kiệm, tôi đã chạy thử nghiệm nhanh trên một lựa chọn ngẫu nhiên các hình ảnh từ thư mục tải xuống của tôi:
Sử dụng một máy nén trực tuyến, tôi đã tiết kiệm được từ 30% đến 75% trên mỗi hình ảnh và tổng cộng là 68% (hình ảnh nặng hơn kéo nhiều trọng lượng hơn và làm sai lệch tỷ lệ phần trăm).
4). Trì hoãn hình ảnh ngoài màn hình
Hình ảnh ngoài màn hình là những hình ảnh xuất hiện dưới màn hình đầu tiên, có nghĩa là người dùng sẽ không nhìn thấy chúng cho đến khi anh ta cuộn ra ngoài màn hình ban đầu. Và đây sẽ là chủ đề chung trong suốt phần còn lại của bài viết – việc tải mọi thứ dưới màn hình đầu tiên nên được hoãn lại cho đến khi các phần tử trong màn hình đầu tiên được tải đầy đủ. Khu vực trong màn hình đầu tiên là những gì Google sử dụng để đo tốc độ trang của bạn, vì vậy, đó là nơi mà hầu hết nỗ lực tối ưu hóa của bạn nên được tập trung vào.
Kỹ thuật xử lý hình ảnh ngoài màn hình được gọi là tải chậm. Về cơ bản, hình ảnh trong màn hình đầu tiên được tải trước và hình ảnh ngoài màn hình chỉ được tải khi người dùng cuộn xuống trang. Tham khảo hướng dẫn này về tải chậm hình ảnh của bạn để biết thêm thông tin.
5). Chuyển đổi gif sang video
Nghe có vẻ phản trực giác, nhưng gif thường sẽ có kích thước tệp lớn hơn video. Nó không có ý nghĩa gì, tôi không biết nó xảy ra như thế nào, nhưng chuyển đổi một gif lớn thành một video sẽ giảm kích thước lên đến 500% hoặc thậm chí nhiều hơn. Vì vậy, nếu báo cáo tốc độ trang của bạn yêu cầu bạn sử dụng các định dạng video cho nội dung động, bạn cũng có thể xem xét nó một cách nghiêm túc.
Để chuyển đổi gif sang video, bạn có thể sử dụng bất kỳ công cụ chuyển đổi trực tuyến nào hoặc tải xuống một công cụ như FFmpeg. Google thực sự khuyên bạn nên tạo hai định dạng video: WebM và mp4. WebM tương tự như WebP ở chỗ nhẹ hơn, nhưng chưa được hỗ trợ bởi tất cả các trình duyệt. Vì vậy, khi bạn thêm video của mình vào trang, bạn nên liệt kê phiên bản WebM trước rồi đến phiên bản mp4 làm bản sao lưu:
<video autoplay loop muted playsinline>
<source src=”animation.webm” type=”video/webm”>
<source src=”animation.mp4″ type=”video/mp4″>
</video>
Lưu ý rằng phần tử video cũng có bốn thuộc tính bổ sung: tự động phát, vòng lặp, tắt tiếng và lượt phát. Các thuộc tính này làm cho video của bạn hoạt động giống như ảnh gif: video bắt đầu phát tự động, video lặp lại, không có âm thanh và phát nội tuyến.
6). Trì hoãn CSS không sử dụng
CSS không được sử dụng có thể làm chậm quá trình xây dựng cây kết xuất của trình duyệt. Vấn đề là, một trình duyệt phải đi qua toàn bộ cây DOM và kiểm tra các quy tắc CSS nào áp dụng cho mọi nút. Do đó, càng có nhiều CSS không được sử dụng, trình duyệt sẽ cần nhiều thời gian hơn để tính toán các kiểu cho mỗi nút.
Mục tiêu ở đây là xác định các phần CSS không được sử dụng hoặc không quan trọng và xóa chúng hoàn toàn hoặc thay đổi thứ tự mà chúng tải. Vui lòng tham khảo hướng dẫn này về cách trì hoãn CSS không sử dụng.
7). Giảm thiểu JS và CSS
Các tệp JS và CSS thường có thể chứa các chú thích, khoảng trắng, ngắt dòng và đoạn mã không cần thiết. Xóa chúng có thể làm cho tệp của bạn nhẹ hơn tới 50%, mặc dù mức thu nhỏ trung bình nhỏ hơn nhiều. Tuy nhiên, đó là một đóng góp nhỏ vào tốc độ trang của bạn và rất đáng để thử.
Nếu bạn có một trang web nhỏ, bạn có thể rút gọn mã bằng các trình thu nhỏ trực tuyến, như Trình thu nhỏ CSS, Trình thu nhỏ JavaScript và Trình nén HTML. Hoặc, nếu trang web của bạn được xây dựng trên nền tảng CMS, như WordPress, chắc chắn có một số plugin có thể thực hiện công việc cho bạn. Đối với trang web được xây dựng tùy chỉnh, vui lòng tham khảo hướng dẫn này về giảm thiểu CSS và hướng dẫn này về giảm thiểu JS.
8). Trích xuất CSS quan trọng
Theo mặc định, CSS là tài nguyên chặn hiển thị. Trang của bạn sẽ không được hiển thị cho đến khi trình duyệt tìm nạp và phân tích cú pháp các tệp CSS, điều này có thể khá tốn thời gian.
Để giải quyết vấn đề này, bạn chỉ có thể trích xuất những kiểu cần thiết cho vùng trong màn hình đầu tiên của trang và thêm chúng vào <head> của tài liệu HTML. Phần còn lại của các tệp CSS của bạn có thể được tải không đồng bộ. Điều này sẽ cải thiện đáng kể điểm LCP của bạn và làm cho các trang của bạn xuất hiện nhanh hơn với người dùng.
9). Cải thiện thời gian phản hồi của máy chủ
Điều khó chịu nhất về sự chậm trễ phản hồi của máy chủ là có rất nhiều lý do có thể gây ra chúng. Ví dụ: những điều này có thể là định tuyến chậm, logic ứng dụng chậm, CPU đói tài nguyên, truy vấn cơ sở dữ liệu chậm, bộ nhớ đói, khung công tác chậm, v.v.
Một giải pháp dễ dàng cho những vấn đề này là chuyển sang lưu trữ tốt hơn, trong nhiều trường hợp, điều này có nghĩa là từ lưu trữ được chia sẻ sang lưu trữ được quản lý. Lưu trữ được quản lý thường đi kèm với mạng CDN và các thủ thuật phân phối nội dung khác sẽ ảnh hưởng tích cực đến tốc độ trang. Tuy nhiên, nếu bạn muốn làm bẩn tay, đây là hướng dẫn chi tiết hơn về cách khắc phục máy chủ quá tải.
10). Trì hoãn / không đồng bộ JS của bên thứ ba
Các tài nguyên của bên thứ ba, chẳng hạn như các nút chia sẻ xã hội và nhúng trình phát video, có xu hướng tiêu tốn rất nhiều tài nguyên. Hơn nữa, bất cứ khi nào trình duyệt gặp một đoạn JS, nó sẽ tạm dừng thực thi HTML cho đến khi nó xử lý JS. Tất cả những điều này có xu hướng làm giảm tốc độ trang có thể đo lường được.
Nếu bất kỳ tài nguyên bên thứ ba nào của bạn không cần thiết, tức là chúng không quan trọng đối với giao diện hoặc chức năng của màn hình đầu tiên, bạn nên chuyển chúng ra khỏi đường dẫn hiển thị quan trọng. Để tải tài nguyên của bên thứ ba hiệu quả hơn, bạn có thể sử dụng thuộc tính async hoặc defer. Thuộc tính async nhẹ nhàng hơn – nó cho phép tải xuống đồng thời HTML và JS, nhưng nó vẫn sẽ tạm dừng HTML để thực thi JS. Thuộc tính defer khó hơn – nó sẽ không tạm dừng HTML để thực thi JS, mà sẽ chỉ được thực thi ở phần cuối.
11). Kết nối trước với tài nguyên của bên thứ ba
Theo quy luật, việc thiết lập các kết nối, đặc biệt là các kết nối an toàn, mất rất nhiều thời gian. Vấn đề là, nó yêu cầu tra cứu DNS, bắt tay SSL, trao đổi khóa bí mật và một số đường vòng tới máy chủ cuối cùng chịu trách nhiệm về yêu cầu của người dùng. Vì vậy, để tiết kiệm thời gian quý báu này, bạn có thể kết nối trước với các điểm xuất phát bắt buộc.
Để kết nối trước trang web của bạn với nguồn bên thứ ba, bạn chỉ cần thêm thẻ liên kết vào trang của mình:
<link rel=”preconnect” href=”https://example.com”>
Sau khi bạn triển khai thẻ, trang web của bạn sẽ không cần phải tốn thêm thời gian để thiết lập kết nối với máy chủ được yêu cầu, giúp người dùng của bạn không phải chờ đợi một số bước vòng bổ sung.
12). Chia nhỏ các nhiệm vụ dài
Bất cứ khi nào có một đoạn JavaScript mất hơn 50 mili giây để thực thi, trang của bạn có thể xuất hiện không phản hồi với người dùng. Để giải quyết vấn đề này, bạn nên tìm kiếm các tác vụ dài này, chia chúng thành các phân đoạn nhỏ hơn và làm cho chúng tải không đồng bộ. Bằng cách này, sẽ có các cửa sổ phản hồi ngắn được tích hợp trong quá trình tải trang của bạn.
Bạn có thể sử dụng Công cụ dành cho nhà phát triển của Chrome để xác định các tác vụ quá dài – chúng là những tác vụ được đánh dấu bằng cờ đỏ:
Khi bạn xác định được các tác vụ dài trên các trang của mình, bạn có thể chia chúng thành các tác vụ nhỏ hơn, trì hoãn việc thực thi chúng hoặc thậm chí di chuyển chúng ra khỏi chuỗi chính thông qua trình nhân viên web.
13. Tải trước các tài nguyên chính
Trình duyệt quyết định tải tài nguyên nào trước tiên. Do đó, họ thường cố gắng tải các tài nguyên quan trọng nhất như CSS trước các tập lệnh và hình ảnh, chẳng hạn. Thật không may, đây không phải lúc nào cũng là cách tốt nhất để đi. Bằng cách tải trước tài nguyên, bạn có thể thay đổi mức độ ưu tiên tải nội dung trong các trình duyệt hiện đại bằng cách cho họ biết những gì bạn sẽ cần sau này.
Với sự trợ giúp của thẻ <link rel = “preload”>, bạn có thể thông báo cho trình duyệt rằng tài nguyên là cần thiết như một phần của mã chịu trách nhiệm hiển thị nội dung trong màn hình đầu tiên và làm cho nó tìm nạp tài nguyên ngay khi khả thi.
Dưới đây là một ví dụ về cách thẻ có thể được sử dụng:
<link rel=”preload” as=”script” href=”script.js” />
<link rel=”preload” as=”style” href=”style.css” />
<link rel=”preload” as=”image” href=”img.png” />
<link rel=”preload” as=”video” href=”vid.webm” type=”video/webm” />
<link rel=”preload” href=”font.woff2″ as=”font” type=”font/woff2″ crossorigin />
Xin lưu ý rằng tài nguyên sẽ được tải với cùng một mức độ ưu tiên. Sự khác biệt là quá trình tải xuống sẽ bắt đầu sớm hơn vì trình duyệt biết trước về việc tải trước.
14). Bật bộ nhớ đệm của trình duyệt
Không có bộ nhớ đệm của trình duyệt, mỗi khi bạn truy cập cùng một trang, toàn bộ trang sẽ được tải từ đầu. Với bộ nhớ đệm của trình duyệt, một số phần tử trang được lưu trữ trong bộ nhớ trình duyệt, vì vậy chỉ một phần của trang phải được tải từ máy chủ. Đương nhiên, trang tải nhanh hơn nhiều khi có lượt truy cập lặp lại và điểm tốc độ trang tổng thể của bạn tăng lên.
Thông thường, mục tiêu là lưu vào bộ nhớ cache nhiều tài nguyên trang nhất có thể càng lâu càng tốt và để đảm bảo các tài nguyên cập nhật được xác thực lại cho bộ nhớ đệm. Bạn thực sự có thể kiểm soát tất cả các tham số này bằng các tiêu đề HTTP đặc biệt chứa các hướng dẫn trong bộ nhớ đệm. Một nơi tốt để bắt đầu tìm hiểu về bộ đệm HTTP là hướng dẫn này từ Google.
15). Giảm kích thước DOM
Một cây DOM quá lớn với các quy tắc kiểu phức tạp có thể ảnh hưởng tiêu cực đến những thứ như tốc độ, thời gian chạy và hiệu suất bộ nhớ. Thực tiễn tốt nhất là có một cây DOM, có tổng số ít hơn 1500 nút, có độ sâu tối đa là 32 nút và không có nút cha nào có trên 60 nút con.
Một phương pháp rất hay là xóa các nút DOM mà bạn không cần nữa. Để điều chỉnh đó, hãy cân nhắc xóa các nút hiện không được hiển thị khỏi tài liệu đã tải và cố gắng tạo chúng chỉ sau khi người dùng cuộn xuống trang hoặc nhấn vào một nút.
16). Tránh chuyển hướng quá nhiều
Loại bỏ tất cả các chuyển hướng không cần thiết là một trong những điều tốt nhất bạn có thể làm đối với tốc độ trang web của mình. Mỗi lần chuyển hướng bổ sung sẽ làm chậm quá trình hiển thị trang và thêm một hoặc nhiều đường vòng phản hồi yêu cầu HTTP.
Cách tốt nhất là không sử dụng chuyển hướng hoàn toàn. Tuy nhiên, nếu bạn thực sự cần sử dụng, điều quan trọng là phải chọn loại chuyển hướng phù hợp. Tốt nhất là sử dụng chuyển hướng 301 để chuyển hướng vĩnh viễn. Nhưng nếu, giả sử bạn sẵn sàng chuyển hướng người dùng đến một số trang quảng cáo ngắn hạn hoặc URL dành riêng cho thiết bị, thì chuyển hướng 302 tạm thời là lựa chọn tốt nhất.
Tổng kết
Các vấn đề được liệt kê ở trên không phải là tất cả các vấn đề có thể ảnh hưởng đến tốc độ trang, mà là những vấn đề phổ biến nhất và những vấn đề có tiềm năng cải thiện cao nhất. Đảm bảo điều chỉnh các chiến lược tối ưu hóa của bạn cho phù hợp với các vấn đề được phản ánh trong báo cáo tốc độ trang của bạn. Hãy nhớ rằng các vấn đề hiện có trên nhiều trang của trang web của bạn thường có thể được giải quyết hàng loạt bằng cách triển khai các thay đổi trên toàn trang web.
