Website bạn tải chậm, điểm PageSpeed thấp và bạn đang tìm cách tăng tốc độ load website? Bài viết này sẽ chứa tất cả những thông tin mà bạn cần để cải thiện và tối ưu tốc độc tải của trang web, hãy cùng tìm hiểu nhé.
Nếu đã từng gặp phải tình trạng trang website load chậm, bạn sẽ hiểu tốc độ tải trang có thể ảnh hưởng đến trải nghiệm người dùng và hiệu quả của chiến lược SEO web như thế nào. Không ai muốn đợi đến tận 10 giây – hoặc thậm chí nhiều hơn – để truy cập vào thông tin họ đang cần tìm kiếm và Google sẽ không để cho một website cung cấp một trải nghiệm kém ở vị trí hàng đầu trong kết quả tìm kiếm.
Những trang tải nhanh có tỷ lệ giữ chân người dùng tốt hơn và tỷ lệ thoát thấp hơn, đồng thời giành được lòng tin của người dùng nhanh hơn.
Bất kể thiết kế hoặc nội dung của bạn mạnh đến đâu, nếu trang web của bạn hoạt động kém, người dùng sẽ không thể bỏ nhiều thời gian để vào trang web của bạn.
Trên thực tế, một nghiên cứu đã phát hiện ra rằng các trang web Thương mại điện tử có độ trễ một giây sẽ bị “giảm 11% lượt xem trang, giảm 16% mức độ hài lòng của khách hàng và giảm 7% chuyển đổi”.
Hơn nữa, tốc độ tải trang cũng đang trở thành một yếu tố xếp hạng trong Core Web Vitals.
Vì trải nghiệm người dùng rất quan trọng, nên Google đang tích cực theo dõi các chỉ số tốc độ tải như Large Contentful Paint (LCP), First Input Delay (FID) và Cumulative Layout Shift (CLS). Ba yếu tố là điều bắt buộc để có được điểm TỐT. Bạn có thể đo lường được trang web của mình đang hoạt động tốt như thế nào thông qua các báo cáo về web trong Google Search Console.
3 công cụ để đo tốc độ tải trang của website
Bạn không thể tối ưu tốc độ load website nếu không hiểu trước về hiệu suất hoạt động. Có ba công cụ đơn giản bạn có thể sử dụng:
Google Search Console
Mặc dù về mặt kỹ thuật, nó không đo tốc độ trang web, nhưng bạn có thể sử dụng báo cáo quan trọng về web để tìm các vấn đề tải mà bạn cần quan tâm. Google Search Console sẽ chấm điểm tổng thể trang web và cung cấp cho bạn danh sách các URL cần được tối ưu hóa.
PageSpeed Insights
Được phát triển bởi Google, PageSpeed Insights là một trình kiểm tra tốc độ trang web có khả năng xác định các vấn đề cơ bản về tốc độ tải. Nó sử dụng rất đơn giản như nhập URL bạn muốn kiểm tra và công cụ sẽ thu thập dữ liệu trang web của bạn và tạo một báo cáo đầy đủ.
Công cụ này sẽ tính điểm website trên Máy tính để bàn và Thiết bị di động cùng một số đề xuất để tối ưu hóa trang.
Đây là điểm số mà chúng ta đang hướng tới:
Và đây là những gì chúng ta cần tránh:
Gtmetrix
Nếu bạn muốn các tính năng nâng cao hơn hoặc nếu bạn muốn kiểm tra tốc độ trang của mình trên các vị trí cụ thể, GTmetrix là một công cụ hữu ích.
Nó sẽ kiểm tra tốc độ tải trang của web của bạn từ các vị trí khác nhau để bạn có thể tập trung vào việc tăng trải nghiệm người dùng trên trang web của mình trong các khu vực địa lý mà bạn đang nhắm. Điều làm cho công cụ này trở nên hữu ích là các cài đặt nâng cao. Bạn có thể đặt vị trí, thiết bị, độ phân giải màn hình, v.v. để thu thập thông tin chính xác hơn mà bạn có thể thực hiện.
8 Cách tăng tốc độ load website
Với những kiến thức cơ bản, hãy cùng khám phá 8 cách để cải thiện tốc độ tải trang web của bạn:
Tối ưu hóa hình ảnh của bạn
Khi nói về tối ưu hóa hình ảnh cho tốc độ trang web, chúng tôi đang đề cập đến ba điều:
Kích thước file hình ảnh
Hình ảnh là một cách tuyệt vời để thêm ngữ cảnh, giải thích các chủ đề phức tạp hoặc chỉ tạo khoảng trống giữa các khối nội dung. Tuy nhiên, hình ảnh nặng sẽ làm chậm trang của bạn.
Bạn nên nhắm đến kích thước file nhỏ nhất có thể. Điểm tốt cho hình ảnh lớn nên có kích thước từ 150kb đến 500kb. Các hình ảnh này sẽ góp phần vào kích thước tổng thể của trang web.
Nếu bạn cần nén chúng, TinyPNG là một công cụ trực tuyến miễn phí tuyệt vời mà bạn có thể sử dụng. Bạn chỉ cần tải hình ảnh lên, nén chúng và tải xuống sau đó đưa lên lại hosting.
Tip: Nên tối ưu hóa tên, thuộc tính alt và định dạng của những hình này.
Định dạng file
Không có gì lạ khi sử dụng hình ảnh PNG để tạo nội dung. Chúng dễ xử lý hơn.
Vấn đề là đây là những loại hình ảnh nặng góp phần làm tốc độ tải chậm. Nếu không quan trọng về phần mở rộng của hình ảnh thì bạn nên sử dụng hình .JPG. Đây đã trở thành định dạng tiêu chuẩn cho hình ảnh trên web. Chúng không làm giảm chất lượng và kích thước file nhỏ.
Một định dạng bán mới đang nhận được nhiều sự chú ý là WebP. Định dạng này cực kỳ nhẹ, nhẹ hơn 33% so với JPG. Nhược điểm là định dạng vẫn có vấn đề về khả năng tương thích với một số trình duyệt.
Kích thước hình ảnh
Độ phân giải hình ảnh của website là quan trọng. Tuy nhiên, trừ khi nó bao phủ hết trên màn hình của người dùng thì bạn không thực sự cần hình ảnh có kích thước đến 4000×4000.
Đảm bảo tải lên một hình ảnh đẹp và không làm giảm chất lượng khi scaling như hình ảnh 800×1200 là phổ biến nhất trên các bài viết.
Ngoài ra, bạn phải để kích thước hình ảnh của mình ngay trong thẻ img. Trình duyệt sẽ tính toán không gian mà nó cần để “tiết kiệm” cho hình ảnh trước khi tải, làm giảm CLS của trang của bạn (cumulative layout shift).
Bạn có thể thêm các thuộc tính chiều rộng và chiều cao. Ví dụ:
<img src=”puppy.jpg” width=”640" height=”360" alt=”Puppy with balloons” />
Minify CSS và JavaScript
Giảm thiểu các file CSS và JavaScript của bạn có nghĩa là để giảm lượng thời gian trình duyệt tải mọi phần tử cần thiết để hiển thị trang web.
Bởi vì máy không nhạy cảm với các lựa chọn stylistic, chúng ta có thể tạo các file có kích thước nhỏ hơn bằng cách xóa khoảng trắng, xóa comment, sử dụng tên ngắn hơn và về cơ bản loại bỏ bất kỳ phần nào trong mã không cần thiết để máy chúng ta có thể chạy nó.
Tất nhiên, không cần phải nén code gốc mà bạn đang làm việc, vì nó sẽ gần như không thể đọc được.
Thay vào đó, bạn sẽ tạo một phiên bản rút gọn của file và đưa chúng trên dự án trực tiếp của mình. Để làm như vậy, chúng tôi đề xuất hai công cụ trực tuyến đơn giản:
- https://cssminifier.com/
- https://javascript-minifier.com/
Đây là những công cụ đơn giản chỉ yêu cầu bạn dán code của mình vào và sau đó nhấn minify để chuyển đổi code của bạn thành phiên bản thu nhỏ sau đó bạn có thể sao chép và dán trên projec của mình
Ngoài việc thu nhỏ file, bạn cũng có thể bật tính năng nén Gzip để giảm thêm kích thước file.
Cẩn thận với script của bên thứ ba
Nếu đang sử dụng các công cụ như Google Analytics, bạn đang dùng các script của bên thứ ba. Các script này rất hữu ích để thêm chức năng mới vào trang web. Tuy nhiên, chúng vẫn là những đoạn code được hiển thị hoặc đọc ở phía máy khách và góp phần giảm thời gian tải tốc độ trang.
Đảm bảo code cần thiết mà bạn thêm vào được tối ưu hóa và xóa bất kỳ thứ gì không được sử dụng.
Sử dụng dịch vụ lưu trữ VPS
Server mà nhà cung cấp dịch vụ lưu trữ của bạn sử dụng rất quan trọng đối với tốc độ trang web. Nếu server chậm phản hồi yêu cầu của người dùng, thì trình duyệt sẽ nhận thông tin chậm, bất kể kết nối internet của người dùng có nhanh đến mức nào.
Một yếu tố khác là kế hoạch bạn đang thực hiện. Thông thường, các gói shared không tốn kém nhiều vì nhà cung cấp dịch vụ lưu trữ thuê cùng một máy chủ cho một số khách hàng, quá đủ cho các trang web có lưu lượng truy cập thấp.
Tuy nhiên, nếu bạn thực sự cần cải thiện tốc độ trang web của mình, bạn sẽ cần phải truy cập nhiều tài nguyên hơn từ server. Hơn thế nữa, bạn sẽ cần có sự nhất quán về số lượng tài nguyên mà trang web của bạn có quyền truy cập.
Điều đầu tiên cần nghĩ đến là một dedicated server. Về cơ bản, bạn đang thuê toàn bộ một máy chủ cho chính mình. Nhưng điều này có thể tốn kém và đối với hầu hết các trường hợp sử dụng, nó còn nhiều hơn những gì bạn cần.
Vậy lựa chọn tốt nhất là gì? Một dịch vụ lưu trữ VPS.
Máy chủ riêng ảo là chính xác như đã nghe. Về cơ bản, nhà cung cấp dịch vụ lưu trữ tạo một lớp trên hệ điều hành của máy chủ, cho phép bạn kiểm soát hoàn toàn tài nguyên của máy ảo và tách biệt nó với những người dùng còn lại. Điều này ngăn các trang web khác lấy tài nguyên từ của bạn và cho phép bạn tùy chỉnh server của mình theo cách bạn cần.
Sử dụng Mạng phân phối nội dung (CDN)
Như nói ở trên, hosting không hơn gì một cỗ máy lưu trữ dữ liệu trang web của bạn và phân phối dữ liệu đó qua internet khi trình duyệt đưa ra yêu cầu.
Tốc độ trang web thế nào khi nơi lưu trữ của bạn càng xa người dùng, điều này có nghĩa là sẽ càng mất nhiều thời gian để phân phối dữ liệu. Do đó mạng lưới CDN được phát triển để thực hiện phân phối nội dung.
Nói một cách dễ hiểu, CDN là một mạng lưới máy chủ trên toàn thế giới cung cấp nội dung trang web của bạn (như hình ảnh, video, tệp HTML, file JSON, file JS, v.v.) cho người dùng cuối của bạn từ máy chủ gần nhất với nơi họ.
Bạn sẽ tìm thấy một số tùy chọn ở đó, nhưng nếu đang vội bạn nên khám phá Cloudflare. Nếu bạn không sử dụng mạng phân phối nội dung, đây có thể là cách nhanh nhất để tăng tốc độ tải trang mà bạn có thể nhận được.
Trì hoãn tải JavaScript
Khi trang web của bạn tải, trình duyệt sẽ tải xuống mọi nội dung mà trang web cần, bao gồm cả các tệp JavaScript.
Tuy nhiên, trọng tâm chính của bạn cần phải là cung cấp cho người dùng thông tin họ muốn xem trên trang. Đó là lý do tại sao việc trì hoãn JavaScript của bạn rất hữu ích để rút ngắn thời gian tải trang.
Nói một cách dễ hiểu, việc trì hoãn tệp sẽ ngăn tệp tải cho đến khi các phần tử khác (thiết yếu hơn) được tải. Bạn có thể tải HTML và CSS của mình trước để người dùng có thể truy cập nội dung nhanh hơn và chỉ sau đó các tập lệnh mới tải để thêm chức năng bổ sung mà bạn đã hình dung cho trang của mình.
Bạn có thể làm điều này bằng cách sử dụng thuộc tính defer.
Mẹo: Một cách khác để tải JavaScript hiệu quả là thêm các tập lệnh của bạn ngay trước khi đóng thẻ body. Điều này sẽ làm cho trình duyệt phân tích cú pháp toàn bộ trang web trước khi tìm nạp và thực thi tập lệnh của bạn.
Bật bộ nhớ đệm của trình duyệt
Mỗi khi người dùng truy cập trang web của bạn, trình duyệt cần tải xuống tất cả các tệp tạo trang. Điều gì sẽ xảy ra nếu bạn có thể làm cho trình duyệt lưu trữ dữ liệu để lần sau khi người dùng nhập URL của bạn, trình duyệt đã có tất cả thông tin cần thiết để hiển thị nội dung của nó?
Để được vậy, bạn cần bật bộ nhớ đệm của trình duyệt từ tệp .htaccess của mình bằng cách đặt ngày hết hạn cho nội dung của bạn.
## EXPIRES CACHING ## <IfModule mod_expires.c> ExpiresActive On ExpiresByType text/css "access 28 days" ExpiresByType text/html "access 28 days" ExpiresByType image/gif "access 28 days" ExpiresByType image/png "access 28 days" ExpiresByType image/jpg "access 28 days" ExpiresByType image/jpeg "access 28 days" ExpiresByType image/webp "access 28 days" ExpiresByType image/x-icon "access 28 days" ExpiresByType application/pdf "access 28 days" ExpiresByType application/javascript "access 28 days" ExpiresByType text/x-javascript "access 28 days" ExpiresByType application/x-shockwave-flash "access 28 days" ExpiresDefault "access 28 days" </IfModule> ## END EXPIRES CACHING ##
Thao tác này sẽ yêu cầu trình duyệt giữ các tệp đó cho đến thời gian đã đặt. Đây là một cách tuyệt vời để tăng tốc độ tải trang web của bạn cho những người dùng cũ.
Sử dụng lazy loading
Bây giờ, chúng ta hãy giảm thời gian tải cho những khách truy cập lần đầu tiên, phải không?
Chúng tôi muốn làm cho trình duyệt hiển thị đầu trang trước (trong nội dung màn hình đầu tiên) trước khi tải phần còn lại của trang.
Vì vậy, thay vì đợi tất cả hình ảnh và video tải để trang tương tác, trình duyệt sẽ đảm bảo rằng phần đầu tiên của trang web mà người dùng nhìn thấy sẽ tải ngay lập tức. Quá trình này được chúng tôi gọi là lazy loading.
Điều tuyệt vời về nó là chúng ta có thể triển khai bằng cách sử dụng thuộc tính loading sẵn có trong hình ảnh và iframe của chúng ta.
<img src=”myimage.jpg” loading=”lazy” alt=”…” />
<iframe src=”content.html” loading=”lazy”></iframe>
Các thuộc tính này sẽ thông báo cho trình duyệt chỉ tải xuống các phần tử khi người dùng đã cuộn đến phần tử và nó hiện hiển thị trên khung nhìn.
Kết luận
Tốc độ load trang web rất quan trọng để giảm tỷ lệ thoát và tăng tỷ lệ giữ chân người dùng, do vậy điểm số PageSpeed Insights của website càng cao tương đương với chất lượng web càng tốt. Website chất lượng sẽ phải dựa vào nhiều yếu tố khác nhau, trong đó yếu tố quan trọng nhất vẫn là trải nghiệm của người dùng
Tất nhiên, đây không phải là những cách duy nhất để cải thiện hiệu suất trang web.
Trên thực tế, có những phương pháp khác như sử dụng kỹ thuật tìm nạp trước để yêu cầu trình duyệt tìm nạp một số phần tử trước thời hạn. Tuy nhiên, sau khi thực hiện tám bước này, tốc độ trang của trang web của bạn sẽ đạt mức tối ưu hơn.
