Mở đầu
Xin chào tất cả các bạn, chào mừng bạn đã quay trở lại với bài viết tiếp theo của Thăng Long IT! Dạo này ở Hà Nội, cái không khí lạnh của những đợt gió mùa đông bắc đầu tiên đã bắt đầu tràn về rồi đấy anh em ạ. Ngồi trong phòng đóng kín cửa, nhấm nháp ngụm nước ấm rồi mởlap top gõ phím viết blog trong cái thời tiết se lạnh này thì đúng là không còn cảm giác gì thi vị bằng. Hôm nay, nhân một ngày trời u ám gió rét căm căm chẳng muốn đi đâu ra đường, mình quyết định ngồi viết riêng một bài blog chia sẻ về một "mẹo vặt" cực kỳ quan trọng mà đợt vừa rồi mình hì hục ngồi mày mò mới tối ưu xong cho đứa con tinh thần của mình: Hướng dẫn tối ưu tốc độ tải ảnh WebP trên Blogger giúp tăng điểm PageSpeed Insights lên 99+.
Thú thật với anh em, làm blogspot ở thời điểm hiện tại mà không biết tối ưu tốc độ load trang thìác mộng lắm. Google giờ nó soi kỹ từng mi-li-giây một, điểm PageSpeed Insights mà cứ lẹt đẹt dưới 50 thì xác định là bài viết có hay đến mấy cũng ngụp lặn ở trang hai trang ba của kết quả tìm kiếm. Hồi đầu mới làm blog, mình cứ hồn nhiên copy ảnh từ điện thoại hay máy tính rồi ném thẳng lên bài viết, định dạng gì cũng chơi tuốt từ PNG cho đến JPG nặng chịch. Kết quả là gì? Mỗi lần bấm vào link bài viết là cái vòng tròn quay quay nó cứ tít mù lên, chờ dài cả cổ ảnh mới chịu hiện ra. Sau mấy đêm thức trắng ôm cái máy tính tìm tòi, thử nghiệm qua hàng tá cách khác nhau từ nén ảnh thủ công cho đến dùng code CSS/JS, cuối cùng mình cũng tìm ra chân ái: Chuyển đổi toàn bộ sang định dạng WebP thần thánh kết hợp vài trick tối ưu cực độc quyền mà hôm nay mình sẽ moi ruột gan ra kể hết cho anh em nghe.
Tại sao định dạng WebP lại là "vị cứu tinh" cho anh em chạy Blogspot?
Chắc nhiều ông ở đây sẽ thắc mắc: "Ơ thế WebP là cái quái gì mà tụi nó cứ ca tụng dữ vậy?". Để mình giải thích theo ngôn ngữ bình dân dễ hiểu nhất cho anh em nắm bắt nhé. WebP nó là một định dạng ảnh do chính ông lớn Google phát triển ra từ đời thủa nào rồi, sinh ra cốt để thay thế cho mấy anh già cỗi như JPG hay PNG truyền thống.
Điểm ăn tiền lớn nhất của WebP nằm ở chỗ dung lượng file ảnh cực kỳ nhẹ nhàng mà chất lượng hiển thị gần như chẳng bị suy suyển chút nào khi đứng cạnh bản gốc. Mình đã từng test thực tế trên blog của mình, một bức ảnh chụp màn hình lúc trước để đuôi PNG nặng tới tận 1.2MB, làm sao mà web không chậm cho được. Nhưng khi ép nó sang định dạng WebP, dung lượng bỗng bốc hơi tụt xuống chỉ còn vỏn vẹn chưa đầy 150KB. Anh em cứ thử tưởng tượng xem, nén được dung lượng ảnh xuống gấp 5 đến 10 lần như thế thì trình duyệt khách hàng khi truy cập vào web nó sẽ tải nhanh đến mức nào. Vào phát là ảnh hiện ra mồn một ngay lập tức luôn chứ chẳng phải chờ đợi mòn mỏi nữa.
Hồi xưa lúc mới chuyển sang WebP, mình cứ loay hoay sợ rằng ảnh sẽ bị vỡ nét nhòe nhoẹt nhìn mất thẩm mỹ, nhất là mấy cái ảnh chụp code hay ảnh giao diện template. Nhưng hóa ra mình lo bò trắng răng. Trình duyệt bây giờ hỗ trợ WebP tận răng rồi, hiển thị nét căng đét mà lại còn tiết kiệm băng thông cho cả chủ blog lẫn người đọc. Đặc biệt là những anh em nào dùng 4G 5G lướt web bằng điện thoại mùa đông này ngồi trong chăn trùm kín đầu đọc bài viết, web load vèo vèo thì sướng phải biết.
Quy trình thực chiến cá nhân: Các bước chuyển đổi và tối ưu ảnh WebP trên Blogger từ A-Z
Nói có sách mách có chứng, không để anh em phải chờ đợi lâu nữa, bây giờ mình sẽ lột trần toàn bộ quy trình mà chính tay mình đang áp dụng hằng ngày cho hệ thống blog Thăng Long IT để kéo điểm PageSpeed Insights chạm ngưỡng 99+.
Bước 1: "Sàng lọc" và nén ảnh trước khi lên thớt
Nhiều ông cứ nghĩ cứ đưa ảnh WebP lên là xong đời chuyện tốc độ. Sai lầm hoàn toàn nhé! Ảnh gốc của các ông đã nặng 4-5MB rồi mà cứ thế convert sang thì file WebP vẫn còn khá nặng. Trước khi đăng bài, thói quen của mình là dùng các công cụ trực tuyến như Squoosh hoặc cài phần mềm Photoshop để crop lại kích thước ảnh cho vừa vặn với khung bài viết (thường thì chiều rộng tối đa khoảng 800px đến 1200px là quá đủ cho một blog chia sẻ thủ thuật rồi, to hơn nữa cũng chẳng để làm gì tốn băng thông).
Sau đó, hãy xuất file ra thẳng định dạng .webp. Nếu anh em lười cài phần mềm phức tạp, cứ lên web chuyển đổi online miễn phí đầy rẫy ngoài kia, mất có 3 giây là xong một nốt nhạc.
Bước 2: Tận dụng cơ chế tự động nén WebP "ẩn giấu" của Google Blogger
Đây là một mẹo cực kỳ độc quyền mà ít ai chịu chia sẻ cho anh em biết. Bình thường khi anh em kéo thả ảnh trực tiếp vào khung soạn thảo bài viết của Blogger, hệ thống nó sẽ tự động upload ảnh lên máy chủ Google (thường có dạng URL là blogger.googleusercontent.com).
Điểm ăn tiền ở đây là gì? Mấy ông kỹ sư của Google đã ngầm tích hợp sẵn một bộ công cụ xử lý ảnh tự động ngay trên server của họ rồi. Khi anh em lấy link ảnh gốc vừa up lên, nếu khéo léo chèn thêm các thông số kích thước và định dạng vào đuôi URL, hệ thống sẽ tự động ép bức ảnh đó về định dạng WebP siêu nhẹ cho người dùng mà mình chẳng cần phải nhúng thêm bất kỳ đoạn code phức tạp nào cả.
Ví dụ cụ thể cho anh em dễ hình dung nhé:
Link ảnh gốc của anh em sau khi up lên sẽ có dạng:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/.../s1600/ten-anh.png
Bây giờ, thay vì để nguyên bản gốc nguyên thủy như thế, anh em hãy chủ động sửa lại thông số ở phần đuôi URL thành thế này cho mình:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/.../s800-rw/ten-anh.webp
Giải mã một chút về cái mẹo nhỏ này để anh em hiểu bản chất vấn đề:
- Chữ
s800nghĩa là yêu cầu server tự động scale bức ảnh về chiều rộng 800 pixel để phù hợp với khung đọc bài viết, giảm tải tối đa cho thiết bị di động. - Chữ
-rwở phía sau chính là từ khóa thần chú ra lệnh cho hệ thống Google tự động convert bức ảnh đó sang định dạng WebP tối ưu nhất trước khi trả về kết quả cho trình duyệt của người đọc. Cực kỳ bá đạo phải không nào? Từ ngày phát hiện ra trick này, mình tiết kiệm được khối thời gian ngồi convert thủ công từng cái ảnh một.
Bước 3: Chèn code tối ưu Lazy Load và xử lý giao diện
Ảnh đã nhẹ rồi nhưng nếu để trình duyệt tải một cục hàng chục bức ảnh cùng một lúc ngay khi vừa bật trang web lên thì kiểu gì điểm PageSpeed Insights cũng sẽ bị bóp nghẹt thở. Giải pháp ở đây là gì? Chính là kích hoạt tính năng Lazy Load (tải chậm ảnh thông minh). Tức là người đọc kéo đến đâu thì ảnh ở đoạn đó mới bắt đầu được tải về máy, còn ở dưới màn hình thì cứ đứng im cho nhẹ web.
Mấy bản template đời mới bây giờ như Lantro UI hay Plus UI mà mình từng chia sẻ trên blog đều đã được tích hợp sẵn cái này rồi. Nhưng nếu template của anh em là hàng tự chế hoặc dạng cổ điển, hãy thêm thuộc tính loading="lazy" vào ngay trong thẻ HTML của bức ảnh:
<img src="..." alt="..." loading="lazy" width="800" height="450"/>Nhớ khai báo thêm cả hai thuộc tính width và height nữa nhé anh em. Việc này giúp cho trình duyệt định hình trước được khung chứa ảnh từ sớm, tránh tình trạng trang web bị giật cục, nhảy layout lung tung khi ảnh đang loay hoay load dở dang. Google cực kỳ thích những chi tiết nhỏ nhặt tinh tế này khi chấm điểm trải nghiệm người dùng (Core Web Vitals).
Vượt qua rào cản SEO và những sai lầm chết người cần tránh
Nhiều ông cứ mải miết đi tối ưu tốc độ kỹ thuật mà quên mất yếu tố cốt lõi để lên top Google chính là nội dung và trải nghiệm thực tế. Trong quá trình tối ưu hóa hình ảnh WebP trên Blogger, bản thân mình từng vấp phải vài bài học xương máu muốn chia sẻ lại để anh em né ra cho kịp:
Thứ nhất, đừng bao giờ quên viết thẻ Alt (văn bản thay thế) cho ảnh. Bot của Google nó mù chữ hình ảnh anh em ạ, nó không có mắt để nhìn xem bức ảnh đó chụp cái gì đâu mà nó phải đọc cái đoạn chữ mô tả nằm trong thẻ alt="...". Anh em cứ lười bỏ trống vì nghĩ tối ưu tốc độ là đủ thì xác định từ bỏ giấc mơ kiếm traffic từ Google Hình Ảnh nhé. Hãy viết mô tả ngắn gọn, chứa từ khóa chính liên quan đến bài viết một cách tự nhiên nhất.
Thứ hai, lạm dụng nén quá đà dẫn đến hỏng ảnh. Có dạo mình tiếc dung lượng, kéo mức độ nén ảnh WebP xuống tận mức thấp nhất có thể. Kết quả là nhìn bức ảnh chụp giao diện code chữ chi chít bỗng mờ tịt không đọc được một chữ nào, khách truy cập vào chê bai bảo blog viết lách gì mà cùi bắp thế. Tối ưu thì tối ưu nhưng cái gì cũng phải có điểm dừng hợp lý, hãy cân đối giữa dung lượng nhẹ và độ sắc nét đủ nhìn để giữ chân người đọc ở lại trang lâu hơn.
Thứ ba, không kiểm tra độ tương thích trên các trình duyệt cũ. Mặc dù bây giờ 99% các trình duyệt hiện đại đều nuốt gọn WebP không trượt phát nào, nhưng thỉnh thoảng vẫn có vài vị khách hoài cổ dùng mấy phiên bản trình duyệt đời Tống siêu cổ lỗ sĩ truy cập vào web. Nếu thấy ảnh lỗi không hiển thị, anh em có thể dùng thẻ HTML <picture> kết hợp thẻ <source> để dự phòng đường lùi cho JPG/PNG truyền thống:
<picture>
<srcset src="image.webp" type="image/webp">
<srcset src="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="Mo ta anh" loading="lazy">
</picture>Dù hơi lỉnh kỉnh một chút ở khâu soạn thảo HTML nhưng bù lại blog của anh em sẽ đạt độ hoàn mỹ tuyệt đối, cân mọi loại thiết bị từ máy tính bàn cấu hình khủng cho đến mấy con điện thoại cục gạch đời cũ.
Kết quả thực tế sau khi áp dụng lên blog cá nhân
Ngồi gõ đến đây chắc nhiều ông sẽ bảo mình chém gió bốc phét đúng không? Đích thân mình đã cầm con máy đo lường PageSpeed Insights kiểm chứng sau khi áp dụng toàn bộ mấy bước thần thánh trên vào cái blog Thăng Long IT này. Kết quả trả về thực sự làm mình vỡ òa cảm xúc: Điểm hiệu năng trên thiết bị di động (Mobile) nhảy vọt từ con số 45 lẹt đẹt lên thẳng 98 điểm, còn trên máy tính để bàn (Desktop) thì cán mốc tuyệt đối 100 điểm tròn chỉnh.
Cảm giác nhìn cái thanh màu xanh lá cây hiện lên mơn mởn nó sướng gì đâu ấy, bao nhiêu mệt mỏi sau những đêm thức trắng debug code tự dưng bay biến đi đâu hết. Thời đại công nghệ thay đổi từng ngày, nếu mình cứ ì ra dậm chân tại chỗ dùng mấy cách làm thủ công lạc hậu thì sớm muộn gì blog cũng bị cộng đồng đào thải và bị Google cho ra đảo ở mà thôi. Chủ động thay đổi, tối ưu từ những chi tiết nhỏ nhất như bức ảnh WebP chính là chìa khóa vàng giúp anh em giữ vững vị thế trong làng viết blog dạo này.
Cảm ơn bạn đã đọc đến tận những dòng cuối cùng này của bài viết. Chúc anh em áp dụng thành công và kéo điểm web của mình bay cao bay xa nhé. Đừng quên để lại một bình luận góp ý hoặc chia sẻ trải nghiệm thực tế của các ông ngay phía bên dưới để chúng ta cùng nhau học hỏi thêm nhiều trick hay ho hơn nữa nha!
Copyright © Thăng Long IT
