Влияние плагинов на адаптивность сайта

Ваш отзыв

Wordress плагин

Не далее как вчера была мной была опубликована статья, которая рапортовала о смене шаблона данного сайта на адаптивный, что означает, что его страницы на различных устройствах отображаются без горизонтальной прокрутки, все элементы сайта могут быть воспроизведены на любом современном и не очень устройстве. Яндекс в начале этого месяца запустил новый алгоритм «Владивосток», который будет ранжировать сайты в зависимости от удобства просмотра их на мобильных устройствах. Правда, при просмотре сайтов на обычных десктопах данный алгоритм ранжирования применяться не будет. Но это сегодня, а что будет завтра, Яндекс его знает. Я бодро копировала URLы страниц сайта и обнаружила, что только половина из них детектируется Яндексом и Гуглом, как адаптированные к просмотру на мобильных устройствах. На всех остальных же присутствовала горизонтальная прокрутка. Чтобы разобраться в ситуации, я достала свой Nokia e72, отмеченный в прошлой истории, и начала просматривать с него страницы с этой пресловутой горизонтальной прокруткой. Тут-то все стало ясно…

Для того, чтобы можно было легко визуально распознать код C#, PHP, CSS, HTML на странице сайта, необходимо для этого установить один из распространенных плагинов. Среди них можно выделить два:

  • Crayon Syntax Highlighter
  • SyntaxHighlighter Evolved

Оба они хороши, и я по вкусу выбрала второй. Все было замечательно до тех пор, пока  не началась вся эта история с адаптивностью. У плагина SyntaxHighlighter Evolved версии 2 предусмотрен перенос строк, но дело в том, что функции на том же PHP зачастую носят название, состоящие из 30-40 символов! Вызов функции с параметрами также делают без пробелов между названием функции и ее первым параметром, получается еще более длинная строка. При этом делать пробелы во всех таких местах, сами понимаете, не выход. Так что вот такая приятная мелочь, как подсветка синтаксиса, может привести к пессимизации страницы в выдаче пока только на мобильных устройствах.

Было принято решение о замене существующего плагина на Crayon Syntax Highlighter. Он для кода создает специальные области с горизонтальной прокруткой. При этом у пользователя есть возможность просмотра на отдельной странице кода в «полную величину».

Чтобы не быть голословной, вот результаты обследования одной из страниц на предмет ее адаптивности.

  1. SyntaxHighlighter Evolved

Результаты Google:

before-google

Результаты Yandex:

before-yandex

2. После начала использования плагина Crayon Syntax Highlighter:

Результаты Google:

after-google

Результаты Yandex:

after-yandex

Таким образом, при применении адаптивного шаблона необходимо также просмотреть список имеющихся на Вашем блоге плагинов и удостовериться, что они не нарушают Ваших планов по продвижению сайта  .


Оставьте комментарий

XHTML: Вы можете использовать следующие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url=""> <img src="" alt="" class="" width="" height="">

http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ab.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ac.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ag.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ah.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ai.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ak.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/am.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/an.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ao.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/aq.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ar.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/at.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/av.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/aw.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ay.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/az.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/bb.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/bc.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/bd.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/be.gif 
больше...