Cách tối ưu hóa hình ảnh trang của bạn để tăng tốc độ trang web

Khẩu hiệu chính thức của Google là “Đừng trở nên xấu xa”, nhưng từ lâu đã có tin đồn rằng công ty có phương châm nội bộ thứ hai mà họ có xu hướng giữ kín:

“Hoặc là bạn nhanh hoặc bạn đang bị hỏng.”

Chúng tôi đã viết về tốc độ trang web trong quá khứ và không có nghi ngờ gì về tầm quan trọng của nó (nếu vậy, hãy chú ý đến phần thống kê của bài đăng này), nhưng đối với các nhà tiếp thị nội dung, việc cải thiện tốc độ trang web của bạn thường trở nên đặc biệt phức tạp bài tập kỹ thuật hoàn toàn ngoài tầm kiểm soát của bạn. Chỉ một kỹ sư full-stack back-end mới có thể tăng tốc mọi thứ lên rất nhiều, phải không?

Hóa ra, không có gì có thể được xa hơn từ sự thật. Như Tom Bennet từ Builtvisible đã giải thích trong bài thuyết trình xuất sắc của mình tại Brighton SEO. Sau đây, tôi sẽ đi qua một số điểm chính mà Tom đã nêu ra để chỉ ra cách thức và lý do tại sao bạn nên tập trung vào việc cung cấp trải nghiệm nhanh như chớp cho người dùng.

Tại sao tốc độ trang web lại quan trọng?

Tôi đã đề cập đến số liệu thống kê, phải không?

Theo blog quản trị trang web chính thức của Google, tốc độ trang web rất quan trọng. Bản thân Google cũng dành rất nhiều thời gian để kiểm tra xem trang web của bạn có thể theo kịp đối thủ cạnh tranh hay không. Nếu bạn đi chậm hơn, vị trí của bạn trong kết quả tìm kiếm sẽ bị ảnh hưởng.

Nhưng đó không phải là yếu tố quan trọng duy nhất ở đây. Tốc độ của trang web cải thiện trải nghiệm người dùng tổng thể. Ví dụ, Tom đã đề cập đến thống kê đặc biệt này từ Firefox:

Brighton-seo-site-speed-cho-nội dung-tiếp thị

Khi Firefox tăng thời gian tải trang trung bình lên 2,2 giây, lượt tải xuống biểu mẫu tăng 15,4%. Điều đó tương ứng với hơn 10 triệu lượt tải xuống mỗi năm.

Một khi bạn nghe những con số như thế này, giá trị sẽ trở nên rõ ràng. Tom cũng đã dành thời gian để trích dẫn Steve Souder, một nhà tiên phong trong công việc hiệu suất web ngày nay:

Brighton-seo-site-speed-for-content-marketers-Steve-Souders

Vì vậy, chúng tôi biết chúng tôi có thể làm điều gì đó về nó. Nhưng chúng ta nên tập trung nỗ lực vào đâu?

Chúng ta có thể làm gì để chống lại nó?

Để minh họa, Tom đã tạo một trang nội dung đơn giản, khá chuẩn bằng Bootstrap và jQuery. Ngành công nghiệp tiếp thị nội dung tạo ra hàng nghìn cái này mỗi ngày, vì vậy nó phải khá phù hợp:

Brighton-seo-site-speed-cho-nội dung-tiếp thị

Tiếp theo, chúng tôi bắt đầu trang và đo lường nó bằng cách sử dụng kết hợp các bộ quy tắc Yslow của Yahoo và Google PageSpeed. Đây là kết quả đầu tiên:

Brighton-seo-site-speed-cho-nội dung-tiếp thị

Điểm F này sẽ gây tổn hại nghiêm trọng đến uy tín của chúng tôi trong mắt Google và 3,9 giây sẽ giống như một vòng lặp đối với người dùng. Nếu bạn không tin tôi, hãy đếm chậm đến bốn. Bạn có sẵn sàng đợi rất lâu cho mỗi trang trên một trang web được mở không?

Nhưng các nhà tiếp thị nên tập trung nỗ lực của họ vào đâu để có được tác động nhiều nhất?

Trên một trang điển hình như trang này, hình ảnh cho đến nay là yếu tố lớn nhất và phổ biến nhất, vì vậy trước tiên hãy tập trung vào đây.

Brighton-seo-site-speed-cho-nội dung-tiếp thị

Đây không chỉ là việc mở và thu nhỏ hình ảnh của bạn trong Photoshop. Độ phân giải rất quan trọng (chúng tôi vẫn muốn các trang của mình trông đẹp mắt) nhưng chỉ ở một điểm nào đó, vì vậy bước đầu tiên là kiểm tra lại kích thước hình ảnh của chúng tôi:

Brighton-seo-site-speed-cho-nội dung-tiếp thị

Như bạn có thể thấy từ phần tử trang, hình ảnh này được tải lên ở 1024 x 683 pixel, nhưng người dùng chỉ nhìn thấy nó ở tối đa 420 x 289 pixel, nhỏ hơn một nửa kích thước tải lên.

Như mọi khi, điều quan trọng là phải xem xét trải nghiệm người dùng, vì vậy chúng ta hãy tự hỏi mình một số câu hỏi:

  • Chúng ta nên sử dụng những định dạng nào cho hình ảnh? PNG rất phù hợp cho những hình ảnh có ít màu sắc hơn hoặc trong suốt hơn, trong khi PEGS là lựa chọn hoàn hảo cho ảnh.
  • Kích thước: Chiều rộng và chiều cao tối đa của hình ảnh là bao nhiêu?
  • Bạn có thực sự cần tất cả những hình ảnh này?

Nếu bạn có văn bản trong một hình ảnh, hãy xóa nó và sử dụng phông chữ thực tế thay thế và sử dụng đồ họa vector hoặc CSS cho những thứ như biểu trưng hoặc bóng trên trang. Như Tom đã nói

“Yêu cầu HTTP nhanh nhất là yêu cầu không được thực hiện.”

Google có một số nguyên tắc và lời khuyên mà bạn nên xem qua.

Vì vậy, Tom đã thu nhỏ kích thước, định dạng lại hoặc thay thế các bức ảnh của mình. Điều này đã ảnh hưởng đến tốc độ tổng thể của trang web như thế nào?

Brighton-seo-site-speed-cho-nội dung-tiếp thị

Việc xử lý hình ảnh cẩn thận là đủ để cắt giảm 1,2 giây khổng lồ – hoặc 30% – tổng thời gian tải trang.

Nó vẫn chưa phải là tốc độ tên lửa vào thời điểm này, nhưng nó tốt hơn rất nhiều. Tom đã chia sẻ một số mẹo hữu ích khác trong bài thuyết trình của mình mà tôi cũng sẽ thử trong tương lai, nhưng bây giờ đã đến lúc hợp lý hóa những hình ảnh đó.

Nguồn: www.searchenginewatch.com

Trả lời