Bạn có từng như mình, xây dựng website xong là cứ thế đâm đầu vào viết và SEO nội dung. Mà chẳng để ý gì đến các khía cạnh khác như hiệu suất trang web, tốc độ website. Một yếu tố cực kì quan trọng ảnh hưởng trực tiếp đến trải nghiệm của các bạn độc giả và thứ hạng website của bạn.

Cho đến một ngày, ngay cả mình cũng nhận thấy trang web của mình hơi chậm so với lúc mới tạo. Thế là mình mới cắp đít đi tìm hiểu nguyên do vì sao. Và mình được biết nó có thể bắt nguồn từ rất nguyên nhân như cài đặt quá nhiều plugins, tải lên nhiều hình ảnh mà không tối ưu hoặc là từ bên đơn vị cung cấp hosting.

Và trong trường hợp lúc đó thì thủ phạm chính là những hình ảnh trên web của mình. Không những toàn là hình size quá khổ mà còn chất đầy cả cái Media Library. Có những hình mình tải rồi còn chẳng dùng.

Nên trong bài viết này mình sẽ chia sẻ với bạn 5 cách mà mình đã áp dụng để cải thiện tốc độ trang web nhờ vào tối ưu hình ảnh. Bắt đầu luôn nha…

Mục lục đọc nhanh:

Tốc độ website là gì?

Cho một số bạn còn chưa hiểu cụ thể và đầy đủ về tốc độ tải trang. Tốc độ tải trang là thời gian mà một website cần để có thể hiển thị đầy đủ tất cả các hình ảnh, video, nội dung và các yếu tốc khác cần hiển thị trên trình duyệt của độc giả – những người bấm vào đường link URL dẫn đến website của bạn.

Thời gian tính toán để xác định tốc độ của trang web của bạn sẽ bắt đầu từ lúc người dùng nhấp vào liên kết hoặc nhập URL của trang web cho đến khi trang web được hiển thị hoàn chỉnh hoàn toàn.

tối ưu tốc độ website

Tốc độ website quan trọng như thế nào?

Rất rõ ràng là website mà tải chậm sẽ hạn chế rất nhiều tiềm năng phát triển. Nhưng cụ thể như thế nào?!

Dưới đây là 5 lý do tại sao tốc độ website có thể ảnh hưởng đến sự phát triển về lâu dài của một trang web:

  • Quyết định thứ hạng website trên Google search results vì Google ưa thích các trang web tải nhanh hơn.
  • Tăng tương tác xã hội. Vì độc giả có trải nghiệm tốt sẽ dẫn đến nhiều khả năng họ sẽ chia sẻ nội dung của bạn về các trang mạng xã hội của họ.
  • Ảnh hưởng trực tiếp đến trải nghiệm của người dùng. Người dùng có thể cảm thấy khó chịu với trang web tải chậm. Và có xu hướng rời bỏ trang web trước khi nó tải xong.
  • Cải thiện tương tác với quảng cáo giúp bạn kiếm được nhiều lượt click hơn. Từ đó, tối ưu được thu nhập mà website có thể mang lại cho bạn.
  • Nếu bạn kinh doanh thì sẽ ảnh hưởng trực tiếp đến doanh thu. Vì khách hàng không thể mua sắm vui vẻ với một website tải chậm.

Các bước cải thiện tốc độ tải trang và hiệu quả website nhờ tối ưu hình ảnh

Sau khi đã hiểu hết về tốc độ tải của một trang web và tầm quan trọng của nó. Bạn sẽ cảm thấy ngay lập tức muốn làm gì đó để giúp cho website của mình hoạt động tốt hơn. Nhưng làm sao?

Qua kinh nghiệm của mình, dưới đây là 5 bước hay ho mà bạn có thể áp dụng qua việc tối ưu hình ảnh:

Bước 1: Resize hình ảnh (image size)

Thông thường để có được những hình ảnh thu hút cho trang web, mình sẽ truy cập vào 2 sources chính là FreepikPexels để tải ảnh về. Tuy nhiên, kích thước của những hình ảnh mới tải về cực kì lớn một cách không cần thiết.

Hơn nữa, đối với một số CMS sẽ có một vài size chuẩn chung cho blog post, banner, header… Bạn có thể search Google để tìm ra image size phù hợp cho trang web của mình.

Hoặc một số trường hợp khi bạn cài đặt theme cho trang web, nhà cung cấp cũng sẽ khuyến khích bạn sử dụng kích thước hình ảnh riêng giúp website của bạn được tối ưu và đẹp mắt hơn. Cụ thể như theme mình đang sử dụng là 1170 x 780 pixels.

Cho nên, việc resize lại hình ảnh trước khi tải lên rất cần thiết. Và đây là cách mình đã làm:
  • Truy cập vào phần mềm hỗ trợ resize ảnh. Mình sử dụng Paint, một phần mềm chỉnh ảnh siêu cơ bản mà mình đoán là máy tính hệ Microsoft nào cũng có vì thông thường khi mới mua máy chúng đã được mặc định cài đặt rồi. Đối với Mackbook, nếu không có Paint thì bạn có thể sử dụng tool online là Resizepixel
  • Sau khi tải ảnh, bạn chọn vào phần Resize
  • Chọn Pixels và bỏ tick tại ô “Maintain aspect ratio”
  • Nhập chiều dài và rộng bạn muốn cho hình ảnh và chọn “OK”
resize ảnh

Lưu ý: Hình ảnh có thể bị kéo dãn theo chiều ngang hoặc dọc một cách kì cục sau khi resize. Để khắc phục, bạn có thể “crop” ảnh trước để có chúng có tỉ lệ tương đối với tỉ lệ ảnh sau resize.

Cho bạn nào chưa biết thì image size là kích thước của hình ảnh. Bao gồm chiều rộng (width) và chiều cao (height) của nó, được đo bằng pixel. Còn file size là kích thước (dung lượng) của tệp hình ảnh. Được đo bằng byte hoặc kilobyte (KB), megabyte (MB), gigabyte (GB), v.v

Bước 2: Nén ảnh (file size)

Thông thường, file size tối ưu cho website sẽ không quá 1MB đối với hình size lớn như hình background full-screen hoặc không quá 300KB với các hình nhỏ hoặc hình cho các bài blog posts.

Cho nên, sau khi xử lý image size thì bạn sẽ thấy dù file size đã giảm đi đáng kể. Nhưng vẫn chưa đủ, để tối ưu mình nên tiếp tục sử dụng công cụ khác để nén ảnh.

Một công cụ mà mình thường sử dụng cho bước này là Compressjpeg. Bạn chỉ cần “upload files” lên và chờ cho quá trình nén ảnh diễn ra tự động và rồi download về lại máy là xong. Bạn nhớ xóa file cũ đi để tránh bị lẫn ở bước này nha.

Bước 3: Dọn dẹp các hình ảnh không sử dụng

Trong quá trình viết bài rất có thể bạn cũng như mình. Kén chọn hình ảnh và tải lên nhưng sau đó lại quyết định không sử dụng. Hoặc bạn xóa bài viết hoặc trang mà chứa hình ảnh, nhưng hình ảnh vẫn tồn tại trong thư viện.

Để rồi nó cứ nằm ở đó mà chẳng được nhớ đến. Và điều này cũng ảnh hưởng trực tiếp đến tốc độ tải của website.

Trường hợp này, cách tốt nhất thì chúng ta nên “tổng vệ sinh” lại trang web của mình ở mục Media Library hàng tháng. Để xử lý bước này:

  • Bạn trỏ chuột vào mục Media chọn “Library”
  • Tại đây bạn chọn hiển thị giao diện dạng list nhé để dễ chọn được nhiều hình một lúc hơn
  • Chọn “Unattached” tại mục All media items để chỉ hiển thị các hình bạn đang không sử dụng.
  • Chọn hết hoặc chọn những hình bạn muốn xóa và click “Delete permanently” tại ô Bulk actions
cải thiện tốc độ website bằng cách dọn dẹp hình ảnh không sử dụng

Bước 4: Sử dụng lại hình ảnh

Đây là một tip mà mình sử dụng sau khi trang blog đã đăng 3-4 bài viết. Thường mỗi bài chúng ta sẽ sử dụng từ 2-4 hình để mô tả cho nội dung được trình bày. Và những hình ảnh này hoàn toàn có thể sử dụng lại được cho bài viết mới ở dạng thumnails hoặc nội dung của bài mới nếu có liên quan.

Mình dùng cách này để giảm tải lưu lượng lưu trữ cho trang web cũng như tối ưu cache hình ảnh trên trình duyệt của bạn đọc.

Nếu bạn chưa biết cache là gì, thì cache là cơ chế lưu trữ dữ liệu tạm thời. Trong website, cache sẽ giúp chúng ta lưu trữ những hình ảnh, nội dung… sau lần tải đầu tiên. Và khi người dùng truy cập lại, trình duyệt sẽ sử dụng lại hình ảnh, nội dung đã được cache. Giúp giảm thời gian tải trang và tiết kiệm băng thông.

Bước 5: Thêm title và alt tag cho ảnh

Đây có thể là bước không liên quan nhiều đến cải thiện tốc độ tải trang. Nhưng lại rất quan trọng trong việc quyết định website của bạn hoạt động hiệu quả và được Google “ưu ái” hay không nên mình quyét định thêm vào luôn.

Khi bạn thêm alt tag và title cho ảnh, các công cụ tìm kiếm và trình duyệt có thể hiểu nhanh nội dung của ảnh mà không cần phân tích nội dung đó. Điều này giúp tăng lưu lượng truy cập tự nhiên đến trang web của bạn thông qua Google Image Search và cải thiện thứ hạng của trang

Vì vậy hãy đặt tên tiêu đề và alt tag cho ảnh của bạn đảm bảo 2 yếu tố:

  • Mô tả đúng hình ảnh
  • Có chứa từ khóa

Kiểm tra tốc độ website như thế nào?

Sau khi hoàn thành 5 bước trên, bạn có thể kiểm tra được tốc độ tải của website với Pingdom.

Với công cụ này, bạn sẽ biết tốc độ tải của website của bạn đạt bao nhiêu điểm, page size, thời gian tải và số lượng HTTP requests. Cũng như sẽ đưa ra cho bạn một vài gợi ý để cải thiện tốc độ cho website.

Vậy là mình đã chia sẻ xong với bạn 5 bước giúp mình tối ưu hình ảnh cho website. Từ đó, giúp website của bạn hoạt động mượt mà và hiệu quả hơn. Mình hi vọng bài viết này hữu ích với bạn. Để lại câu hỏi cho mình tại phần bình luận bên dưới nếu bạn có thắc mắc khác nhé.

Nếu yêu thích bài viết, bạn có thể chia sẻ lên Facebook. Hoặc chọn donate cho blog để mình có thể tiếp tục sản xuất những content miễn phí trên kênh Linh Ở Đây nhé.

Leave a Comment

THÔNG TIN LIÊN HỆ

Copyright @2023 Linh Ở Đây