Оптимизируя блог, я обратил внимание на то, что самым узким местом при загрузке страниц являются социальные кнопки: время отклика с серверов Facebook, Twitter, Google, Вконтакте и прочих довольно большое, и оно влияет на скорость загрузки страницы, увеличивая ее в два-три раза. Чем больше вы устанавливаете социальных кнопок, использующих рекомендуемый разработчиками код, тем больше обращений уходит к внешним источникам. Конечно, придуман асинхронный код, который как бы не должен замедлять время загрузки страниц, но все же большинство социальных кнопок основательно тормозит загрузку страниц блога.
К тому же есть еще и неприятный эстетический момент – страницы с социальными кнопками, использующими код асинхронной загрузки, постоянно дергаются, неравномерно подгружая данные по мере их поступления, а сами кнопки практически не поддаются кастомизации, в большинстве из них невозможно указать собственную картинку, изменить надпись, цвет. Так же трудно поддается настройке и расположение кнопок – они постоянно норовят куда-то съехать, они по разному используют отведенное им пространство, имеют разные размеры.
В общем, кастомизация, индивидуальная настройка вида социальных кнопок – одна из самых популярных тем в интернете, о которую было сломано немало копий. Масло в огонь подливают еще и некоторые социальные сети, условиями пользовательских соглашений не позволяющие вмешиваться в код. Чтобы устранить эти визуальные неприятности и ускорить загрузку страниц, пришлось полностью отказаться от стандартных социальных кнопок, активно использующих множество скриптов и малонастраиваемый код, и заменить их на статические ссылки, позволяющие обозначать свою социальную активность вокруг обсуждаемой темы. Заодно я поставил задачу открывать страницы социальных сервисов не на отдельной вкладке, а в отдельном всплывающем окне, в котором уже будут заполнены все необходимые поля, c минимальным оформлением и отсутствием элементов управления – такое окно легко вызвать, и легко закрыть, не покидая сайт. Приведу примеры того, что получилось.
<a class="post-to-googleplus-link" title="Отправить в социальную сеть Google+" rel="nofollow" href="https://plus.google.com/share?url=" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=no,status=0,height=365,width=640,left='+(screen.availWidth/2-225)+',top='+(screen.availHeight/2-150)+'');return false;">
<a class="post-to-facebook-link" title="Отправить в социальную сеть Facebook" rel="nofollow" href="JavaScript:newWindow = window.open('http://www.facebook.com/sharer.php?u=&t=','none','top=100,left=100,toolbar=0,location=0,directories=0,status=0,menuBar=0,scrollBars=0,resizable=1,width=600,height=240');newWindow.focus();" > <a class="post-to-twitter-link" title="Отправить в социальную сеть Twitter" rel="nofollow" href="JavaScript:newWindow = window.open('http://twitter.com/home?status= / ','none','left='+(screen.availWidth/2-225)+',top='+(screen.availHeight/2-150)+',toolbar=0,location=0,directories=0,status=0,menuBar=0,scrollBars=0,resizable=1,width=640,height=240');newWindow.focus();" > ID ), 'full' ); ?>
<a class="post-to-pinterest-link" title="Отправить страницу в социальную сеть Pinterest" rel="nofollow" href="JavaScript:newWindow = window.open('http://pinterest.com/pin/create/button/?url=ID)); ?>&media=&description= / ','none','top=100,left=100,toolbar=0,location=0,directories=0,status=0,menuBar=0,scrollBars=0,resizable=1,width=600,height=240');newWindow.focus();"> </pre>
<pre><a class="post-to-vkontakte-link" title="Отправить в социальную сеть Вконтакте" rel="nofollow" href="JavaScript:newWindow = window.open('http://vkontakte.ru/share.php?url=','none','top=100,left=100,toolbar=0,location=0,directories=0,status=0,menuBar=0,scrollBars=0,resizable=1,width=800,height=600');newWindow.focus();" > <a class="post-to-livejournal-link" title="Опубликовать в LiveJournal" rel="nofollow" href="JavaScript:newWindow = window.open('http://www.livejournal.com/update.bml?event=&subject=','none','top=100,left=100,toolbar=0,location=0,directories=0,status=0,menuBar=0,scrollBars=1,resizable=1,width=800,height=600');newWindow.focus();" > <a class="post-to-mailru-link" title="Отправить в Мой Мир Mail.ru" rel="nofollow" href="JavaScript:newWindow = window.open('http://connect.mail.ru/share?share_url=','none','top=100,left=100,toolbar=0,location=0,directories=0,status=0,menuBar=0,scrollBars=0,resizable=1,width=800,height=600');newWindow.focus();"> <a class="post-to-blogger-link" title="Отправить в Blogger" rel="nofollow" href="JavaScript:newWindow = window.open('http://www.blogger.com/blog_this.pyra?t&u=&n=&a=ADD_SERVICE_FLAG&passive=true&alinsu=0&aplinsu=0&alwf=true&hl=ru&skipvpage=true&rm=false&showra=1&fpui=2&naui=8','none','top=100,left=100,toolbar=0,location=0,directories=0,status=0,menuBar=0,scrollBars=0,resizable=1,width=800,height=600');newWindow.focus();"> <a class="post-to-ok-link" title="Отправить в Одноклассники" rel="nofollow" href="ID)); ?>" onclick="ODKL.Share(this);return false;" >
<a class="post-to-li-link" title="Опубликовать в Liveinternet" rel="nofollow" rel="nofollow" href="JavaScript:newWindow = window.open('http://www.liveinternet.ru/journal_post.php?action=n_add&cnurl=ID)); ?>&cntitle=&cntext=&cntags=handmade','none','top=100,left=100,toolbar=0,location=0,directories=0,status=0,menuBar=0,scrollBars=1,resizable=1,width=820,height=600');newWindow.focus();" > <a class="post-to-delicious-link" title="Добавить в закладки Delicious" rel="nofollow" href="JavaScript:newWindow = window.open('http://del.icio.us/post?url=&title=','none','top=100,left=100,toolbar=0,location=0,directories=0,status=0,menuBar=0,scrollBars=0,resizable=1,width=800,height=600');newWindow.focus();" > <a class="post-to-google-bookmarks-link" title="Добавить в закладки Google Bookmarks" rel="nofollow" href="JavaScript:newWindow = window.open('http://www.google.com/bookmarks/mark?op=add&bkmk=&title=','none','top=100,left=100,toolbar=0,location=0,directories=0,status=0,menuBar=0,scrollBars=0,resizable=1,width=800,height=600');newWindow.focus();" > <a class="post-to-yandex-bookmarks-link" title="Добавить в Яндекс.Закладки" rel="nofollow" href="JavaScript:newWindow = window.open('http://zakladki.yandex.ru/newlink.xml?url=&name=','none','top=100,left=100,toolbar=0,location=0,directories=0,status=0,menuBar=0,scrollBars=0,resizable=1,width=800,height=600');newWindow.focus();" > </pre>
<p>Пример оформления социальной кнопки:</p>
<pre>.post-to-twitter-link {display:inline-block; height:32px; background: url(images/subscribe-to-twitter.png) center center no-repeat; padding:0 0 0 32px; margin:0;} Все коды кнопок устанавливаются в файл single.php используемой вами темы, код CSS – в файл style.css.
Количество скриптов, загружаемых с внешних источников, сократилось с 15 до 2, да и те грузятся только в случае открытия внешней ссылки, ведущей на социальный сервис, время загрузки страницы только за счет отказа от кнопок, рекомендуемых разработчиками, в среднем сократилось примерно с 2.8 секунд до 0.6 секунд.
Выбирайте только актуальные социальные шаблоны WordPress для своего сайта.
