Lazy load Blogger Comment Iframe

Khung bình luận mặc định trong mỗi blog là 1 iframe load từ server của bloggger, mặc định nó luôn được tải đồng thời khi tải trang. Tuy nhiên do thời gian phản hồi cực lâu từ phía server blog là nguyên nhân chính khiến trang của bạn bị chậm hơn rất nhiều, điều này khiến một số blogger dù muốn nhưng vẫn phải từ bỏ blogger comment để tìm 1 hệ thống bình luận khác giúp trang tải nhanh hơn. Vậy có giải pháp khắc phục vẹn toàn cho bài toán này không ? Câu trả lời sẽ được trình bày trong bài viết này

Comment form trong v1 và v2 không khác nhau mấy, chúng chỉ khác phần định nghĩa các thẻ b:includable. Để tạo ra 1 iframe blogger sử dụng 4 thành phần cơ bản sau

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>

<data:post.cmtfpIframe/>

<script type='text/javascript'>
  BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
</script>

Đoạn code này thường xuất hiện 2 lần, 1 trong comment-form 1 trong threaded-comment-form. Với blogger chuyên nghiệp họ sẽ định nghĩa 1 thẻ b:includable mới và gọi chúng để đỡ mất công sao chép nhiều lần làm tăng size template.

Đoạn code trên khi render ra mã HTML sẽ thu được như sau

<a href='https://www.blogger.com/comment-iframe.g?blogID=xxx&postID=xxx' id='comment-editor-src'></a>

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='xxx px' id='comment-editor' name='comment-editor' src='' width='100%'></iframe>

<script src='https://www.blogger.com/static/v1/jsbin/xxx-comment_from_post_iframe.js' type='text/javascript'></script>

<script type='text/javascript'>
     BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html');
</script>

Bản chất nó sẽ lấy href trong thẻ a truyền vào src của iframe để tạo ra khung bình luận. Như vậy để có thể lazy load iframe này ta sẽ sử dụng sự kiện windows onload truyền id và href cho thẻ a là xong !

Trước tiên tôi sẽ tìm trong template của mình tất cả thẻ a có dạng

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

Xóa expr:href='data:post.commentFormIframeSrc' id='comment-editor-src' của nó đi để không tạo được iframe, đặt cho nó 1 class để chốc nữa truyền lại href và id ví dụ tôi đặt là class='comment-editor-src'. Sau khi xóa và thêm class cho các thẻ a sẽ được như sau

<a class='comment-editor-src'/>

Tiếp tục tôi sẽ tìm và thay thế tất cả đoạn code

<data:post.cmtfpIframe/>
<script type='text/javascript'>
  BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
</script>

Bằng code sau

<script type='text/javascript'>
// Lazy load Blogger Comment Iframe by Hung1001
$(window).on(&quot;load&quot;,function(){
var df_if = &quot;<data:post.commentFormIframeSrc/>&quot;;
//<![CDATA[
$(".comment-editor-src").attr("href", df_if).attr("id","comment-editor-src");

// dán toàn bộ đoạn code lấy từ link https://www.blogger.com/static/v1/jsbin/xxx-comment_from_post_iframe.js vào đây

//]]>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
});
</script>

Như đã trình bày do có rất nhiều đoạn code trùng lặp nên nếu bạn là 1 blogger chuyên nghiệp có thể định nghĩa thêm 1 thẻ b:includable để gọi lại nhiều lần sẽ tối ưu hơn. Cái này nếu bạn quan tâm có thể liên hệ với tôi để biết thêm

OK giờ bạn lưu lại mẫu và test thử xem tốc độ tải trang bài viết/trang tĩnh có nhúng bình luận blogger xem có nhanh hơn ban đầu không. Hi vọng với thủ thuật này nếu bạn nào đã hủy bình luận của blogger có thể suy nghĩ lại việc tái kích hoạt để sử dụng

Good Luck !