Оптимизация формы комментариев ВК (ВКонтакте) для Google PageSpeed по самые помидоры
Если честно... Я задолбался бодаться с Гуглом за скорость загрузки страницы и ее оптимизацию. Вот честно. И это при том, что у меня самописный движок практически на чистом PHP и HTML!
Уже перепилены кнопки поделиться на свои собственные и сделана асинхронная загрузка комментариев Контакта... но Гуглу этого мало! Теперь он ругается на любой внешний файл. Даже на счетчики вроде Метрики и на свою же рекламу.
В общем, я немного психанул и решил загружать комментарии ВК по клику на такую вот форму:
<? if (isset($_COOKIE['vk_comments'])) { ?>
<div id="vk_comments"></div>
<script type="text/javascript">
//Куки
function SetCookie(id, days){
var ws=new Date();
ws.setDate((days-0+ws.getDate()));
document.cookie=id+"; path=/; expires="+ws.toGMTString();
}
function start(){
VK.init({apiId: 1111111, onlyWidgets: true});
VK.Widgets.Comments("vk_comments", {limit: 5, width: "650", attach: "*", autoPublish: "1"});
}
</script>
<script async onload="start();" type="text/javascript" src="//vk.com/js/api/openapi.js?116"></script>
<? } else { ?>
<div onclick="SetCookie('vk_comments=on', '30'); window.location.reload();" id="vk_comments" style="width: 650px; border: 1px solid #e1e4eb; border-radius: 4px; background: #fafbfc; margin-left: auto; margin-right: auto; cursor: pointer; "><div style="background: #4a76a8; border-radius: 4px 4px 0px 0px; text-align: left; font-weight: bold; color: #fff; font-size: 12px; padding: 8.5px 15px; position: relative;">Комментарии<div style="position: absolute; right: 15px; top: 10px; font-weight: bold; font-size: 16px; letter-spacing: -4px; transform: rotate(-3deg);
">VK</div></div><div style="margin: 14px; min-height: 81px; background: #fff; border: 1px solid #d3d9de; padding: 14px 40px 14px 14px; text-align: left; color: #848383; font-size: 12px; box-sizing: border-box; position: relative;">Нажмите, чтобы загружать комментарии...<div style="position: absolute; right: 14px; top: 14px; border: 2px solid #bec3c7; color: #bec3c7; font-weight: bold; width: 15px; height: 15px; text-align: center; line-height: 15px; border-radius: 50%; transform: rotate(91deg); padding: 0px;">:)</div></div></div>
<? } ?>
После первого клика страница перезагрузится и комментарии будут показываться (посетителю) на сайте нужное количество дней. Ну и на этот же скрипт я повесил загрузку различных виджетов от групп соцсетей.
Прирост по Гугл Пейджспид составил где-то 5 - 10 пунктов.