Убираем лишнее из формы комментариев блога на Blogger

Ускорение загрузки блога на Blogger за счёт удаления из шаблона формы комментариев всего лишнего. Статья рассчитана на продвинутого пользователя и требует чёткого понимания того, что вы делаете. Однако результат стоит затраченного времени на 100%.

Проверяя отдельную страницу (работающего на платформе Blogger) блога в Google инструменте PageSpeed Insights, я обратил внимание на проблемы с рядом CSS и JavaScript файлов, связанных с формой отправки комментария.

PageSpeed Insights

Если взять простейший вариант системы комментариев в Blogger, с использованием b:includable id='comment-form', то там мы найдём следующий код (привожу только фрагмент!):

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

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

По крайней мере, в случае использования одноуровневой системы комментариев, он сгенерирует следующий HTML-код, например:

<a href='https://www.blogger.com/comment-iframe.g?blogID=2318043484134145872&postID=594486772191789399' id='comment-editor-src'></a>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='400' id='comment-editor' name='comment-editor' src='' width='100%'></iframe>
<script type="text/javascript" src="https://www.blogger.com/static/v1/jsbin/3369861379-comment_from_post_iframe.js"></script>
<script type='text/javascript'>BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html', '18127172147079218923');</script>

Как вы видите, здесь мы имеем:

  • ссылку с URL-адресом формы «оставить комментарий» для IFRAME;
  • изначально пустой IFRAME, в который подгружается форма «оставить комментарий»;
  • подгрузку JavaScript-файла 3369861379-comment_from_post_iframe.js с функцией BLOG_CMT_createIframe() и иже;
  • вызов функции BLOG_CMT_createIframe(), которая подгружает форму «оставить комментарий» из ссылки в iframe.

Примечание: всё это работает совершенно не асинхронно и создаёт проблемы при загрузке веб-страницы, на которой находится формой «оставить комментарий».

Очевидно, что подобная реализации нужна для тех случаев, когда мы работаем с различными «наворотами» в системе комментариев (функция «ответить», многоуровневые комментарии и т.д.). Если же нам это не нужно, то весь представленный выше код шаблона можно заменить всего одной строкой:

<iframe style="width:100%;height:240px" allowtransparency='true' expr:src='data:post.commentFormIframeSrc'  frameborder='0'/>

Здесь вызов формы «оставить комментарий» происходит в самом IFRAME. Никакого JavaScript! Только то, что есть на странице формы «оставить комментарий».

По сути, формат URL-адреса этой страницы имеет вид:

http://www.blogger.com/comment-iframe.g?blogID=XXXXXXX&postID=XXXXXXX

А при необходимости «ответ на комментарий»:

http://www.blogger.com/comment-iframe.g?blogID=XXXXXXX&postID=XXXXXXX&parentID=XXXXXX

Последнее реализовать сложнее, но тем не менее:

  • blogID это шаблонная переменная data:blog.blogId;
  • postID это шаблонная переменная data:post.id;
  • parentID это шаблонная переменная data:comment.id.

Так что если есть желание, можно реализовать достаточно многое, в том числе и с функцией «ответить на комментарий». На счёт последнего, рекомендую глянуть статью «Membuat Fitur Komentar Berbalas (Threaded Comments) pada Blogger dengan Fungsional yang Asli», проследовав по этой ссылке, почерпнёте много интересного.

Twitter Facebook ВКонтакте Одноклассники Google+

11 комментариев:

Сайхан Сосланбеков
Очень давно искал такой пост и вот наконец нашел. Спасибо автору, наконец-то я удалю этот никому не нужный код.
Константин Кирилюк
2Сайхан Сосланбеков Рекомендую предварительно всё-таки сделать резервную копию шаблона. Честно говоря, меня несколько смущает тот факт, что в атрибуте src тега iframe, при использовании JavaScript, добавляется ещё один параметр – blogspotRpcToken. По идее это не должно создавать проблему, но тем не менее.

Пы.Сы. вы получили мои письма, я отправлял их на ваш Gmail адрес.
Сайхан Сосланбеков
Да обязательно сделаю копию. Сейчас проверю, что-то давно я почту не проверял ).
Olga Protasova
Костя здравствуй. Не сохраняет шаблон, если удалить только указанный у Вас в статье код и вставить вместо него предложенный. Получается сохранить, если удалить такой фрагмент кода, вот скрин:
http://goo.gl/rKOPFd

Посмотри, если удалю, никаких последствий не будет?
И еще у меня вопрос по исключенным страницам в яше,
Вот скриншот http://goo.gl/J3d4rG

Все исключенные страницы, как написано у Вас в статье, с комментариями и ответами на коммент. Что нужно сделать, посоветуйте.
Константин Кирилюк
2Olga Protasova Здесь всё сложно, нужно понимать детали. Можно конечно сделать так, чтобы заменить только для десктопной версии формы комментария, но тут надо писать отдельную инструкцию для новичков – я же описал только сам концепт.

Что до Яши, похоже он просто предупреждает, что URL-страницы не совпадает с адресом указанным в мета-теге canonical или типа того. Тут надо глянуть на список этих самых страниц, а так сказать что-то сложно.
Olga Protasova
Костя, я тестировала на демо блоге. Удалила весь код, вставила с вашей статьи, Пробовала написать и ответить на комментарий, все работает. Это я понимаю, для скорости загрузки?

Яша предупреждает, что http://goo.gl/9rk3LC

Вот страницы: http://goo.gl/ScRHVz Это страницы с комментами и моими ответами на них. Появилось не сразу, где-то меньше года назад, а блогу 3г. С другой стороны комментов у меня намного больше, почему только на этих и ко всем новым комментам. А у Вас такого нет?
Константин Кирилюк
2Olga Protasova Обратила внимание, что в коде стандартного шаблона блога на Blogger есть условие:

<b:if cond='data:mobile'>…<b:else/>…<b:if>

Это проверка – отображается «мобильная» версия шаблона или «десктопная».

В случае с «моблиьной» версией форма (по умолчанию) скрыта и имеет дополнительную JavaScript надстройку - показать/скрыть по клику на кнопке.

Как лучше сделать новичку?
По идее, всё рано, должно быть всё норм, но могут быть и проблемы. Поэтому для новичка, наверное, проще оставить мобильную версию с инициализацией формы «отправить комментарий». Для этого строки, идущие после условия – шаблонные переменные friendConnectJs и cmtfpIframe, а также тег script с инициализацией формы, нужно перенести в конец между:

<b:if cond='data:mobile'>…<b:else/>

А вот замену формы для текстопной версии можно производить так как указано в статье, но между:

<b:else/>…<b:if>

Зачем это надо и что даёт?
1. Да, это ускоряет скорость загрузки, т. к. не нужно подгружать JavaScript библиотеку …-comment_from_post_iframe.js, которая к тому же имеет проблемы с кэшированием (см. картинку с сервиса PageSpeed Insight).

2. Это делает систему комментариев более стабильной, т. к. в этом случае не используется JavaScript, который может не сработать (например, если JavaScript отключен). В тоже время, скорей всего, зачем-то это надо, есть варианты, когда это нужно. Но в простом виде – норм.

Некононические URL-страницы
Да, есть на Blogger такая проблема. У каждого комментария есть свой уникальный URL через параметр showComment. Тут надо смотреть ссылку в комментарии, где-то там + счётчик Яндекс.Метрика сообщает поисковику о таких страницах. В целом – это не проблема, просто предупреждение, можешь не беспокоиться.

Пы. Сы. картинки в комментариях моего блога можно вставлять через bbCode, используя тег img (маленькими буквами) в квадратных скобках с URL-адресом картинки между ними ;)
Olga Protasova
Костя, сделала как написано в статье, все получилось и сохранилось. Не знаю, что меня вчера заклинило, ночь, жара наверное повлияли. Спасибо за развернутые ответы на вопросы.


NMitra
"при использовании JavaScript, добавляется ещё один параметр – blogspotRpcToken" - это стили CSS. Я пробовала их менять, но безуспешно.
EL Posts
Подскажите как редактировать существующие комментарии?
Константин Кирилюк
2EL Posts никак, только удалить.
Отправить комментарий