10/14/2016

Cách tối ưu hóa SEO hình ảnh trên Blogspot - PageSpeed Insights [best SEO blogspot]

Nguyễn Nhật Thiên | 10/14/2016|

PageSpeed Insights là trang kiểm tra tốc độ, hiệu suất website mà hầu hết rất được nhiều người quan tâm. Điểm số PageSpeed Insights trả về sau khi kiểm tra là điểm số mà website/blog của bạn đạt được. Trong đó điểm số 100 là cao nhất. 

Link kiểm tra web:  https://developers.google.com/speed
Phải thừa nhận một điều rằng web/blog tuyệt vời đối với trải nghiệm người dùng không chỉ về mảng nội dung tốt mà tốc độ load nhanh, hình thức blog đẹp cũng là lợi thế rất được chú ý. Và nếu như kiểm tra trên PageSpeed Insights thì điểm số của website của bạn sẽ bị ảnh hưởng hình ảnh, một website/blog chuyên viết về hướng dẫn thủ thuật như blog Thủ Thuật Hay của mình thì không thể xóa hết hình ảnh hoặc không có hình ảnh để minh họa trong blog nghèo nàn và kém tính trực quan. 

Bài viết này sẽ hướng dẫn Sửa lỗi Tối ưu hóa hình ảnh blogspot tăng điểm PageSpeed Insights nhưng vẫn giữ được hình ảnh cho web/blogspot.

Tối ưu hóa hình ảnh trog blogspot đặc biệt là ở trang chủ với sự hiện diện của ảnh thumbnail đại diện mỗi bài viết, đại diện bài viết liên quan, bài viết phổ biến,... vậy chỉ cần xử lý những hình ảnh này thì sẽ cải thiện được tốc độ load của web/blog của bạn.
Đối với blogspot sử dụng hình ảnh đầu tiên trong bài viết làm ảnh thumbnail thì chỉ cần xử lý hình ảnh đầu tiên trong mỗi bài viết.

Sửa lỗi Tối ưu hóa hình ảnh blogspot - tăng PageSpeed Insights như thế nào?

- Sử dụng Base64 Image để mã hóa hình ảnh. Base64 Image là gì, có những ưu và hạn chế gì bạn có thể tìm hiểu thêm trên mạng, tuy nhiên mình trích định nghĩa tại izwebz.com để các bạn tiện theo dõi.

#Base64 là gì?

Base64 là một chương trình mã hóa chuỗi ký tự bằng cách dùng thay thế các ký tự trong bảng mã ASCII 8 bit thông dụng thành bảng mã 6 bit. Nó thường được sử dụng để mã hóa các tập tin đa phương tiện (hình ảnh, âm thanh, video,…). Ký tự 64 trong Base64 là đại diện cho 64 ký tự trong bãng mã ASCII. Base64 thường được sử dụng trong việc truyền tải email. Tuy nhiên, ngày nay người ta đã sử dụng nó vào việc truyền tải hình ảnh trên website.

#Cách sử dụng Base64 Image

Trước tiên, để sử dụng được thì chúng ta cần phải chuyển đổi từ định dạng hình ảnh sang định dạng ký tự ASCII bằng một số công cụ trực tuyến như sau: Web coder tools, Web Semantics Data URI Converter. Đây là hai công cụ chuyển đổi online phổ biến được dùng, cách sử dụng cũng đơn giản thôi, chúng ta chỉ việc chọn file hình cần chuyển đổi, sau đó nhấp vào convert. Chương trình sẽ upload hình ảnh lên server và sẽ tiến hành xử lý để kết quả trả về ở dạng đã encode Base64.
Như đã nếu ở trên Tối ưu hóa hình ảnh trên blogspot bằng việc mã hóa hình ảnh trước khi đưa vào bài viết blogspot. Vì sau khi mã hóa một chuỗi ký tự khá dài nên chỉ cần ta thực hiện mã hóa hình ảnh đầu tiên trong bài viết là được.

Bước 1: Vào trang http://base64image.org

- Tìm đến hình ảnh muốn được mã hóa và chọn copy as HTML
Sửa lỗi Tối ưu hóa hình ảnh blogspot - PageSpeed Insights [best SEO blogspot]

Bước 2: Chèn vào trong bài viết blogspot

- Trong bài viết blogspot bạn chuyển sang chế độ HTML và tìm vị trí phù hợp chèn nội dung hình ảnh đã được mã hóa ở bước 1.
- Để hình ảnh được căn giữa bài viết hãy nhúng đoạn mã hóa Bước 1 vào giữa hai thẻ
<center>
ảnh đã được mã hóa
</center>


Sửa lỗi Tối ưu hóa hình ảnh blogspot - PageSpeed Insights [best SEO blogspot]

  • Lưu ý: Ta sẽ không thể nhìn ảnh hình ảnh ở trang soạn thảo bài viết, để xem ảnh bạn bấm vào nút Xem trước để xem thử.
Chỉ vậy thôi, bạn đã xử lý xong hình ảnh để tăng tốc độ load cho web/blog. Hy vọng thủ thuật blogspot này đem lại sựu tối ưu cho blog của bạn.