Làm sao để tăng tốc độ load website trên desktop từ 4 hành động cơ bản của SEO

Tầm quan trọng của thời gian tải trang web

Ngày nay, người dùng không còn kiên nhẫn đối với các trang web có tốc độ tải kém hoặc hoạt động kém hiệu quả.

Trong một nghiên cứu được thực hiện bởi Akamai, hơn 50% người dùng web mong muốn trang web họ truy cập có thể load tròng vòng 2 giây hoặc ít hơn. Và nếu như lố 2 giây, thông người dùng sẽ thoát khỏi trang.

Một báo cáo khác cũng chỉ ra rằng hơn 64% người mua hàng online không hài lòng với trải nghiệm mua sắm vì thời gian load thông tin hàng, và họ sẽ kiếm trang có tốc độ nhanh hơn để coi.

Dựa vào báo cáo trên ta thấy được bạn không chỉ mất lượng khách truy cập hiện tại mà tỷ lệ chuyển đổi cũng giảm, còn dẫn đến nguy cư trang web của bạn mất đi traffic từ những khách hàng có thể đã giới thiệu trang web của bạn cho những người khác. Ở bài khác, chúng ta sẽ nói về cách làm sao để tăng traffic cho website.

Trong thời buổi hiện nay, 1 giây cũng sẽ tạo nên sự khác biệt. Bạn không thế giữ nguyên hiện trạng load chậm của trang bởi các hình ảnh và tệp chưa được tối ưu hóa.

Với ý nghĩ đó, chúng ta hãy xem các cách để tối ưu hóa trang web của bạn để có hiệu suất tốt nhất có thể.

4 hành động giúp bạn tăng tốc độ load trên website

Giảm thiểu các HTTP

HTTP là yêu cầu được tính bất cứ khi nào trình duyệt tìm kiếm tệp, trang hoặc ảnh từ máy chủ web.

Theo Yahoo, những yêu cầu này có xu hướng chiếm khoảng 80% thời gian tải của một trang web. Trình duyệt cũng giới hạn yêu cầu từ 4-8 kết nối đồng thời trên mỗi miền, có nghĩa là tải hơn 30 nội dung cùng một lúc không phải là một tùy chọn.

Điều này có nghĩa là bạn càng có nhiều HTTP, thì thời thì thời gian truy cập trang web và truy xuất tất cả chúng càng lâu, sẽ dẫn đến việc load trang diễn ra chậm hơn.

Cách giảm yêu cầu HTTP:

• Kết hợp các tệp CSS / JS: Thay vì buộc trình duyệt truy xuất nhiều tệp CSS hoặc Javascript để tải, hãy thử kết hợp các tệp CSS của bạn thành một tệp lớn hơn. Mặc dù điều này có thể là một thách thức nếu các bảng định kiểu và tập lệnh của bạn khác nhau giữa các trang, nhưng việc quản lý để hợp nhất chúng cuối cùng sẽ giúp ích cho thời gian tải của bạn về lâu dài.

• Sử dụng truy vấn để chỉ tải những gì cần thiết: Nếu bạn thấy rằng mình chỉ cần tải một số hình ảnh nhất định trên máy tính để bàn hoặc chỉ cần chạy một tập lệnh cụ thể trên thiết bị di động, thì việc sử dụng câu lệnh có điều kiện để tải chúng có thể là một cách tuyệt vời để tăng tốc độ. Bằng cách này, bạn không buộc trình duyệt tải nhiều tập lệnh hoặc hình ảnh không hữu ích cho một số thiết bị hoặc chế độ xem nhất định.

• Giảm số lượng hình ảnh bạn sử dụng: Nếu bạn thấy một số trang của mình khá nặng hình ảnh, hãy thử xóa một số hình ảnh, đặc biệt nếu kích thước tệp của chúng lớn. Điều này có thể không chỉ giúp giảm yêu cầu HTTP hình ảnh mà còn có thể cải thiện trải nghiệm người dùng của bạn bằng cách xóa các hình ảnh gây mất tập trung không tương ứng với nội dung bằng văn bản của bạn.
• Kết hợp các tệp CSS / JS: Thay vì buộc trình duyệt truy xuất nhiều tệp CSS hoặc Javascript để tải, hãy thử kết hợp các tệp CSS của bạn thành một tệp lớn hơn. Mặc dù điều này có thể là một thách thức nếu các bảng định kiểu và tập lệnh của bạn khác nhau giữa các trang, nhưng việc quản lý để hợp nhất chúng cuối cùng sẽ giúp ích cho thời gian tải của bạn về lâu dài.
• Sử dụng truy vấn để chỉ tải những gì cần thiết: Nếu bạn thấy rằng mình chỉ cần tải một số hình ảnh nhất định trên máy tính để bàn hoặc chỉ cần chạy một tập lệnh cụ thể trên thiết bị di động, thì việc sử dụng câu lệnh có điều kiện để tải chúng có thể là một cách tuyệt vời để tăng tốc độ. Bằng cách này, bạn không buộc trình duyệt tải nhiều tập lệnh hoặc hình ảnh không hữu ích cho một số thiết bị hoặc chế độ xem nhất định.
• Giảm số lượng hình ảnh bạn sử dụng: Nếu bạn thấy một số trang của mình khá nặng hình ảnh, hãy thử xóa một số hình ảnh, đặc biệt nếu kích thước tệp của chúng lớn. Điều này có thể không chỉ giúp giảm yêu cầu HTTP hình ảnh mà còn có thể cải thiện trải nghiệm người dùng của bạn bằng cách xóa các hình ảnh gây mất tập trung không tương ứng với nội dung bằng văn bản của bạn.
• CSS sprites: Khi có thể, việc kết hợp các hình ảnh bạn sử dụng khá thường xuyên trên trang web của mình thành một sprite sheet và truy cập các hình ảnh bằng cách sử dụng CSS background-image và background-position ngăn trình duyệt của bạn liên tục cố gắng truy xuất một số hình ảnh mỗi khi các trang nhất định trên trang web của bạn tải. Bằng cách này, trình duyệt chỉ truy xuất hình ảnh mà bạn có thể sử dụng nhiều lần trên trang bằng cách định vị đúng hình ảnh phù hợp để xem cho từng khu vực của trang.

Xem thêm các bài liên quan đến SEO tại mục dịch vụ của chúng tôi bạn nhé.

Sử dụng CDN và loại bỏ các tập lệnh / tệp không sử dụng

Nhiều khả năng là nhiều người dùng của bạn sẽ không ở gần máy chủ web của bạn.

Giảm khoảng cách này bằng cách trải rộng nội dung của bạn trên nhiều máy chủ phân tán theo địa lý không phải là một lựa chọn khả thi và sẽ hơi phức tạp để thực hiện.

Đây là nơi mạng phân phối nội dung (CDN) xuất hiện. CDN là một tập hợp các máy chủ web được phân phối trên nhiều vị trí để nội dung có thể được phân phối hiệu quả hơn đến người dùng.

CDN thường được sử dụng cho nội dung tĩnh hoặc tệp cần được chạm vào sau khi tải lên.

Máy chủ được chọn dựa trên thước đo mức độ gần mạng của người dùng.

Các công ty lớn hơn có xu hướng sở hữu CDN của riêng họ, trong khi các doanh nghiệp vừa sẽ sử dụng nhà cung cấp CDN như EdgeCast .

Các công ty nhỏ hơn có thể thấy CDN không cần thiết hoặc nằm ngoài ngân sách của họ, vì vậy việc sử dụng các trang web như CNDjs có thư viện tệp JS và CSS và khuôn khổ có thể giúp bạn ngăn việc lưu trữ một số tệp nhất định trên máy chủ của riêng bạn đồng thời tăng thời gian tải của chúng.  

Nếu bạn nhận thấy trang web của công ty mình có thể được hưởng lợi từ việc sử dụng CDN, hãy dành thời gian này để đánh giá trang web của bạn để nhận ra nếu có các tập lệnh hoặc tệp CSS không được sử dụng trên trang web của bạn.

Mặc dù điều dễ dàng nhất (nhưng tốn nhiều thời gian nhất) là yêu cầu nhà phát triển của bạn xem qua trang web của bạn và kiểm tra từng trang, có một số công cụ như UnCSS có thể xóa các kiểu không sử dụng khỏi trang web của bạn và giảm kích thước tệp CSS của bạn.

Bộ nhớ đệm của trình duyệt

Bộ nhớ đệm của trình duyệt cho phép nội dung trên trang web của bạn được tải xuống ổ cứng của mình một lần vào bộ nhớ đệm hoặc không gian lưu trữ tạm thời. Các tệp đó hiện được lưu trữ cục bộ trên hệ thống của bạn, điều này cho phép tốc độ tải trang tiếp theo tăng lên.

Yahoo từng giải thích rằng 40-60% khách truy cập hàng ngày vào trang web của bạn đến với bộ nhớ cache trống. Vì vậy, khi người dùng truy cập, bạn cần phải làm cho trang đầu tiên họ thấy tải đủ nhanh để họ chắc chắn sẽ tiếp tục qua phần còn lại của trang web của bạn.

Nội dung tĩnh có thời gian tồn tại trong bộ nhớ cache là ít nhất một tuần, trong khi các mục của bên thứ ba như tiện ích hoặc quảng cáo chỉ tồn tại một ngày.

CSS, JS, hình ảnh và các tệp phương tiện phải có thời hạn một tuần, nhưng lý tưởng nhất là một năm, vì nếu lâu hơn nữa sẽ vi phạm các nguyên tắc RFC .

Nén hình ảnh và tối ưu hóa tệp

Hình ảnh hiện chiếm 60% tổng số byte trung bình được tải trên mỗi trang, khoảng 1504KB. Khi so sánh với các nội dung trang khác như tập lệnh (399KB), CSS (45KB) và video (294KB), hình ảnh chiếm một lượng lớn yêu cầu HTTP được gửi.

Như tôi đã đề cập ở phần đầu, hãy xóa bất kỳ hình ảnh nào về nội dung mà bạn tin rằng mình không cần. Điều này bao gồm các thư viện biểu tượng bạn chỉ sử dụng hai trong số ba phông chữ bổ sung mà bạn nghĩ rằng bạn có thể sử dụng nhưng không sử dụng và các hình ảnh có thể được sao chép bằng CSS.

Sau khi bạn xóa những nội dung đó, hãy xem những hình ảnh bạn có trên trang web của mình và kiểm tra kích thước của chúng.

Thường xuyên hơn không, nhiều người có xu hướng tải xuống hình ảnh từ các trang web lưu trữ ảnh và tải chúng lên máy chủ của họ và sử dụng chúng mà không bao giờ bận tâm đến việc tối ưu hóa chúng cho web.

Nếu bạn thấy mình đang sử dụng hình ảnh lớn, hãy chạy chúng thông qua một phần mềm tối ưu hóa.

Giữ tất cả hình ảnh của bạn dưới 150KB, không có hình ảnh nào có chiều rộng trên 1920px, ở mức chất lượng trung bình / trung bình / 72dpi. Lớn hơn bất kỳ và bạn sẽ nhận thấy hình ảnh tải rất muộn sau khi trang hiển thị cũng như thời gian phản hồi chậm đối với hành vi của người dùng.

Mặc dù hình ảnh vẫn sẽ chiếm phần lớn các yêu cầu HTTP của bạn, nhưng việc tối ưu hóa chúng và các nội dung khác của bạn cuối cùng sẽ giúp giảm kích thước của chúng và tăng hiệu suất tổng thể của trang web của bạn.

Tất nhiên, là ngoài việc tối cho website thì bạn cũng phải làm các phương pháp làm sao để tăng tốc độ load website trên mobile để giúp cho có tỷ lệ chuyển đổi tốt nhất.