Tự sửa link ảnh để tăng tốc cho Blogger

Tốc độ tải trang mà một trong những điều làm đau đầu nhất trong Blogger / Blogspot. Lúc trước mới bắt đầu xài và tìm hiểu Blogger thì mình thường sử dụng đủ mọi thủ thuật mà người khác hướng dẫn, đặc biệt là mất hiệu ứng sử dụng Javascript với jQuery vì bọn nó trông khá là ngầu và blog của mình ngày càng như rùa bò vậy. Nó rùa bò đã đành từ đấy nó còn làm giảm lưu lượng truy cập trên blog mình xuống gần hết nữa.

Tốc độ là nhất
Sau nhiều đợt thay template cho đến việc tự tay làm nhiều template để sử dụng cũng như để chia sẻ trong vòng gần một năm qua, những số liệu mình thu thập được trên blog về độ tương tác với người dùng với những thứ đó là rất thấp. Cho tới gần nay thì mình quyết định loại bỏ hầu hết toàn bộ và viết ra một template tối ưu và đơn giản nhất có thể, chỉ có những thứ mà người dùng hay tương tác thôi.

Các bạn có thể thấy hiện tại thì tốc độ mình khá tốt, và với thống kê gần đây thì lượng người truy cập mới có vẻ tiến triển nhanh hơn trước đây. Lúc mới làm xong template thì check trên Page Speed Insights của Google thì điểm khá tốt 88~90 lựng cơ, nhưng vào khoảng độ vài tuần sau minh có thêm vào blog mấy cái nút mạng xã hội thì điểm chấm trên đó nó tụt xuống cũng đáng kể xuống gần 80 luôn. Do đó mình nghĩ phải làm cái gì đó để bù đáp lại cái thất thoát này.

Cái mà mình nghĩ tới đầu tiên ngoài jQuery và Javascript ra chỉ còn lại hình ảnh nữa thôi. Lúc đầu thì mình tính xài thêm Javascript để tự động để cắt lại hình ảnh với mẹo thay đôi liên kết ở link hình ảnh như mình có bài hướng dẫn "Một số thủ thuật nhỏ với ảnh tải lên ở Blogger và Picasa", nhưng mà làm vậy hoàn toàn không hiệu quả, vì hình ảnh trong bài viết nó xuất hiện rồi thì mình mới bắt đầu xử lý, làm vậy càng chậm blog thêm. Thế nên quyết định chơi bằng tay không luôn, không mất bao nhiêu thời gian cả.

Tự sửa link ảnh để tăng tốc cho Blogger

Hiện tại thì công việc mình sẽ làm như sau, chiều rộng phần chứa bài viết của mình trên blog là 730px, do đó hình ảnh mà mình up lên mình sẽ chỉ cần chiều rộng khoảng tưng đó là đủ. Như vậy việc mình sẽ làm ra thay s1600 trong link của mọi hình ảnh mình tải lên bằng s600, đáng ra là phải 730 cho chuẩn độ rộng nhưng vì lười quá nên mình chỉ xóa số 1 thôi chứ không sửa lại thành 730 haha.

Sửa s1600 thành s600
Lưu ý là nên sửa cái link bên trong thẻ "img" thôi nhé, chúng ta nên để nguyên link trong thẻ "a" để khách truy cập họ có thế xem kích thức thực của ảnh như thế nào.

Mình không làm với toàn bộ bài viết mà chỉ những bài viết hiện tại mới nhất ở trang chủ thôi, vì sửa hết cũng khổ lắm. Và sau khi hoàn thành thì kiểm tra lại trên Google Page Speed Insights thì kết quả đúng là có khả quan hơn và mình khá hài lòng về nó 86~89. Cảm giác load hình ảnh ra tại trang bài viết mình cũng thấy rất là tốt, và từ nay thì bỏ ra một ít thời gian để chỉnh sửa những bài mới khi viết bài luôn.

Bài viết này dài như thế nhưng chỉ làm có vậy thôi, cũng không có gì ấn tượng lắm nhưng mình vẫn muốn chia sẻ với các bạn về nó. Cảm ơn các bạn đã đọc bài viết ^^

13 bình luận

  1. avatar says

    lúc 20:30 25 tháng 9, 2014

    bài viết tuy đơn giản nhưng rất có ích cho việc tăng tốc độ load trang, cám ơn bạn :v

  2. avatar says

    lúc 21:19 29 tháng 9, 2014

    Có 2 link hình lận, sửa cả 2 cái luôn à

  3. avatar says

    lúc 21:25 29 tháng 9, 2014

    Cái bao ngoài là thẻ a nên để yên cái đó để người dùng có thể xem ảnh với kích thước thật nếu họ muốn, chúng ta chỉ nên chỉnh sửa cái bên trong thẻ img thôi nhé :D

  4. avatar says

    lúc 21:29 29 tháng 9, 2014

    Cập nhật bài viết luôn cám ơn anh Thọ nhiều :)

  5. avatar says

    lúc 09:51 20 tháng 6, 2015

    Cho mình hỏi bây giờ còn trang nào để up các file .js lấy d-link như google code hồi trước không?

  6. avatar says

    lúc 10:46 20 tháng 6, 2015

    Up lên google driver theo bài này nè!
    http://www.kslzone.net/2013/10/luu-tru-css-va-javascript-tren-google.html

  7. avatar says

    lúc 11:30 20 tháng 6, 2015

    Cám ơn bạn! đã đổi thành công, mà tốc độ tải trang mình từ 65 xuống còn 59 =))

  8. avatar says

    lúc 13:16 20 tháng 6, 2015

    Cái này thì đành chịu thôi, tốc độ và tiền bạc thường đi đôi với nhau cả :D

  9. avatar says

    lúc 22:07 4 tháng 7, 2015

    Bên nhà bác duy mình thấy link trong thẻ a bác ấy xóa luôn hay sao ấy. Làm thế liệu được không Lâm :) ?

  10. avatar says

    lúc 08:15 5 tháng 7, 2015

    Thẻ a thì không nhất thiết phải có, em thì em giữ lại để có thể mọi người cần xem full size của nó thôi.

  11. avatar says

    lúc 22:47 13 tháng 8, 2016

    Bài viết hữu ích lắm. ^^

  12. avatar says

    lúc 21:15 14 tháng 8, 2016

    help me! (ngoài lề)
    tấm ảnh của mình có 306kb. sau khi xóa nền(chỉ có xóa nền thôi) thì nó lên 13MB.
    Bạn mình nó bảo upload lên blog thì khi hiển thị cũng không chậm hơn. Vì khi hiện thị nó tối ưu gì gì đó hok biết. ^_^.

    Theo như bác thì nó có làm blog load chậm đi không zậy?

  13. avatar says

    lúc 21:59 14 tháng 8, 2016

    Thứ nhất save mà nó lên 13MB là do size, cách nén,.. nói chung là PTS bác chỉnh sai nên nó mới lên như thế.

    Nếu mà để hiện thị full size thì chắc chắn chậm 13mb lựng mà. Nếu bác kêu nó vẫn cảm giác bình thường thì chắc size ảnh ko đúng với ảnh gốc hoặc bác để tính năng tự nén ảnh (http://www.kslzone.net/2014/05/khac-phuc-viec-anh-bi-giam-chat-luong.html). Bác có thể chuột phải mở hình ảnh tab mới và down xuống kiểm tra dung lượng.

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.