Сделать сайт адаптивным, W3C валидным и дружественным PageSpeed

Автор: Роман Чернышов    Опубликовано: 10 февраля 2018

Доброго времени, друзья! Сегодня я расскажу о том, как я оптимизировал свой блог для повышения его быстродействия и правильного отображения на всех устройствах(адаптивная верстка), что позволило достичь оценки Google PageSpeed Insights 100/100. Также была проделана работа по исправлению ошибок и замечаний по HTML верстке шаблона сайта, в соответствии с рекомендациями W3C, в результате чего код прошел проверку на качество без единого замечания W3C Validator‘а. Несмотря на то, что я неоднократно проводил подобную оптимизацию на сайтах клиентов, я решил рассказать именно про свой блог. Во первых это хороший и наглядный пример, не отходя от кассы, а во вторых мне как типичному сапожнику без сапог, давно это нужно было сделать;)

Содержание

• Зачем это нужно?
• Сайт до оптимизации
• Редизайн
• Адаптивная верстка
• Соответствие стандартам W3C
• Дружественный PageSpeed Insights, оценка 100/100
• Мои услуги в вашем распоряжении
• Заключение

Зачем это нужно?

Чем более качественен ваш сайт, тем больше он нравиться пользователям, что отражается на их поведении — меньше отказов, больше времени проводят на сайте, лучше воспринимают информацию, чаще возвращаются снова и как следствие совершают больше заказов и покупок. Поведенческие факторы фиксируются сервисами статистики и поисковыми службами, в результате чего доверие к сайту с их стороны также повышается, что положительно сказывается на ранжировании сайта в поисковой выдаче. Более быстрый и удобный сайт, это одна из составляющих успеха развития сайта и вашего бизнеса. А такие сервисы как PageSpeed Insights позволяют получить важные рекомендации по улучшению сайта.

Сайт до оптимизации

Рассмотрим то, каким был сайт до оптимизации, возможно если вы читаете эту статью, ваш сайт тоже имеет ряд схожих замечаний. Проверяем сайт инструментом PageSpeed Insights и видим ужасный результат с оценкой  51 балл из 100 для ПК и 61 из 100 для мобильных устройств.

Показатель предельно низкий, очевидно сказывается использование старого шаблона на HTML 4 и отсутствие адаптивной верстки, кроме оценки мы видим список рекомендаций:

• Используйте кеш браузера;
• Оптимизируйте изображения;
• Включите сжатие;
• Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы;
• Оптимизируйте загрузку видимого контента;
• Сократите JavaScript;
• Сократите CSS;
• Сократите время ответа сервера.

Собраны почти все рекомендации, какие только могут быть (их может быть гораздо больше, при проверке другими сервисами). В списке отсутствуют: «Сократите HTML» и «Не используйте переадресацию с целевой страницы», по причине того, что HTML шаблон минимизирован(сокращен) изначально, а с целевой страницы нет редиректа. В ином случае оценка PageSpeed была бы еще ниже.

Проверка сайта валидатором W3C сообщает нам о наличии 148 ошибок и замечаний, среди которых использование устаревших HTML тегов, отсутствие атрибутов или их неправильное использование, а также несколько незакрытых тегов. Шаблон сайта теперь можно считать устаревшим, несмотря на то, что несколько лет назад он был вполне актуален, скорость развития технологий дает о себе знать.

Отдельно стоит обратить внимание на дизайн сайта, с одной стороны он волне сносный, такой стиль типичного блога, приятные тона и классическая структура расположения элементов на странице. С другой стороны он содержит лишние детали, имитацию теней в виде полупрозрачных изображений, несколько ребристых картинок в качество фона подложки, примитивные шрифты типа Arial и размер текста 12px, что на современных мониторах смотрится мелко и убого. Дизайн требует изменений.

Редизайн

Начнем с дизайна, с того, что первым делом бросается в глаза и просит обновления.

Вариант 1. В большинстве случаев при актуализации дизайна сайта, берется просто новый современный шаблон в замен старого, но несмотря на все очевидные плюсы такого решения, это не всегда удобно и выгодно. Например, хороший готовый не уникальный шаблон для WordPress стоит 40-50$, столько же стоит установить его на сайт, вместе с ним всего скорее будет также установлено несколько плагинов. Я встречал шаблоны где в комплекте идет до 20 плагинов, половина из которых обязательна к установке для нормальной работы шаблона. Также после установки, всего скорее пропадет совместимость с ранее установленными плагинами отвечающими за вывод тех или иных блоков в теле шаблона или потребуется их повторная перенастройка (из опыта, в некоторых случаях такие плагины автоматом в новый шаблон не подтягиваются). В итоге мы получаем современный дизайн сайта, с кучей лучших плагинов, который требует доработок и улучшений структуры, некоторых визуальных решений, чтобы хоть как-то сделать дизайн сайта уникальным.

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

Вариант 2. Следующий возможный вариант, это заказ отрисовки макета дизайна у профессионального веб-дизайнера, с последующей его версткой и натяжкой на движок. Вариант один из лучших в том плане, что шаблон будет уникальным, не будет излишней функциональности, не нужных скриптов и плагинов. Но, в этом варианте есть существенные недостатки, первый это стоимость такой работы (от 30т.р.), второй это время которое потребуется на всю работу от и до(примерно 2-3 недели). Столько времени у меня нет, вариант не мой.

Вариант 3. Актуализация текущего шаблона. О чем речь? Изменить текущий шаблон таким образом, чтобы он стал соответствовать критериям сегодняшнего дня, перерисовав основные его части, это — шапка, сайдбар и подвал страницы, а также некоторые элементы в его центральной части, работа в основном затрагивает HTML и CSS, иногда изменяется PHP код. По мимо прочего стоит изменить шрифты, их размер, иконки, логотипы, размеры заголовков. Хорошим решением будет, добавить новые элементы на страницу, такие как — переключаемые вкладки с контентом(табы), карусель, слайдер, лайтбокс. Часть из этого, при выборе первого или второго варианта, все равно пришлось бы устанавливать или настраивать. Также этот вариант подходит сайтам где сменить дизайн крайне сложно из-за структуры сайта, используемой CMS(например самописная система) или в том случае, если на сайте присутствует множество собственных доработок, которые могут пострадать при смене шаблона целиком. Весь перечень работ занимает у опытного специалиста не более трех часов(данные из личной практики), что как я считаю вполне приемлемо.

Ни один из вариантов не решает проблемы с валидацией HTML кода, а также с воплощением в жизнь рекомендаций PageSpeed. По этому выбираем самый простой, быстрый, дешевый и эффективный вариант редизайна, в моем случае это вариант три.

Что было сделано в рамках редизайна:

• Полностью изменен стиль шапки, новый логотип и цветовая палитра;
• Изменено главное меню и его стиль;
• Стандартные шрифты типа Arial, заменены на современные Roboto и Poppins, увеличен их размер;
• Изменен стиль блоков в сайдбаре;
• Убраны неактуальные фоновые изображения;
• Убраны CSS стили границ блоков (border), устаревший стиль;
• Убраны эффекты псевдо-тени блоков в виде полупрозрачных изображений;
• Полностью перерисован подвал страницы, новое расположение блоков и цветовая палитра;
• Добавлены новые виджеты (новое на сайте, популярные посты, комментарии, виджет Инстаграм);
• Установлены новые иконки.

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

Адаптивная верстка

Адаптивная верстка(поддержка мобильной версии сайта) — подразумевает корректное отображение страниц на всех устройствах, во всех браузерах, при любом разрешении экрана. Инструмент Google PageSpeed Insights тестирует мобильную версию сайта отдельно и выводит для неё свою оценку и рекомендации по улучшению. Кроме этого адаптивный шаблон это обязательный функционал любого современного сайта, его отсутствие негативно сказывается(это один из факторов ранжирования) на поисковой выдаче, страниц вашего сайта.

Был проделан следующий перечень работ:

• Добавлен мета тег Meta Viewport;
• Добавлены новые стили для разрешений по ширине экрана до 320, 500, 770, 900, до 1090 и выше ;
• Корректное отображение видео, таблиц и форм на всех экранах;
• Скрытие некоторых элементов страницы при маленьком разрешении экрана или перемещение их в другую область страницы;
• Изменение отступов у блоков в зависимости от разрешения экрана(относительные значения);
• Изменение размеров шрифтов в зависимости от разрешения экрана(относительные значения);
• Установлены максимально допустимые значения размеров изображений при разных разрешениях;
• Добавлено мобильное меню, которое отображается на мобильных устройствах и маленьких разрешениях экрана в замен стандартного (генерируется с помощью JavaScript).

Проведены тесты во всех основных браузерах, во всех возможных разрешениях экрана.

Соответствие стандартам W3C

W3C расшифровывается как World Wide Web Consortium(Консорциум Всемирной Паутины) который занимается определением стандартов HTML кода, на основании которых браузеры осуществляют интерпритацию HTML страниц сайтов. Несмотря на то, что все браузеры умеют корректировать содержащий ошибки HTML код, что называется — на лету, все же рекомендуется писать код страниц таким образом, чтобы ошибок и замечаний не было. Наличие ошибок в HTML коде может приводить к замедлению работы браузера, замедлению рендеринга(отрисовки) и времени вывода страницы на экран, или к неправильному отображению некоторых блоков страницы. Также неправильный HTML код может обрабатываться поисковыми системами некорректно, роботы могут не понимать микро-разметку страниц, в результате чего могут страдать СЕО показатели сайта, вплоть до понижения ранжирования сайта в поисковой выдаче, снижение посещаемости и как следствие вашего дохода.

Какие ошибки были исправлены:

• Изменен doctype на HTML 5 (это было сделано еще в рамках работы над редизайном);
• Наличие незакрытых HTML тегов;
• Устаревшие HTML теги не рекомендованные к применению;
• Неправильная вложенность тегов;
• Неправильная структура HTML DOM дерева;
• Некорректные атрибуты тегов, дублирование или их отсутствие;
• Устаревшие атрибуты тегов не рекомендованные к применению;
• Неправильно выводимые спецсимволы и кавычки.

Это перечень типичных и достаточно распространенных ошибок, некоторые из них не считались ошибками в HTML 4, но стали таковыми в HTML 5.

Дружественный PageSpeed Insights, оценка 100/100

Как я сказал ранее, PageSpeed Insights рекомендовал оптимизировать сайт по восьми критериям, работа по одним пунктам заняла всего несколько минут, по другим несколько часов, а для устранения проблем с сокращением времени ответа сервера вообще потребовалось сделать кеширование всех страниц, сменить версию и режим работы PHP. Далее пройдемся по всем пунктам подробнее.

Используйте кеш браузера

Чтобы увеличить скорость повторной загрузки страницы сайта, браузер может кешировать(сохранять на вашем жестком диске) некоторые элементы страницы(картинки, JS скрипты, CSS стили) и повторно их не загружать с сайта, а брать из кеша. Для этого нужно браузеру сообщить какие именно файлы нужно кешировать и в течении какого времени хранить этот кеш.

Вариант 1.

Если у вас на хостинге используется Apache, то нужно в файле .htaccess прописать следующий код

ExpiresActive On
ExpiresDefault "access 7 days"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
ExpiresByType text/css "access plus 1 year"
ExpiresByType text/html "access plus 7 day"
ExpiresByType text/x-javascript "access 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType application/x-shockwave-flash "access 1 year"
 
 
# Cache-Control
 
# 1 Год
<FilesMatch "\.(ico|pdf|flv)$">
Header set Cache-Control "max-age=29030400, public"
 
# 1 неделя
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=604800, public"
 
# 2 дня
<FilesMatch "\.(xml|txt|css|js)$">
Header set Cache-Control "max-age=172800, proxy-revalidate"
 
# 1 минута
<FilesMatch "\.(html|htm|php)$">
Header set Cache-Control "max-age=60, private, proxy-revalidate"

Вариант 2.

Если у вас установлен nGinx, нужно разместить в /etc/nginx/sites_enabled/default следующий код

location ~* \.(ico|pdf|flv)$ {
                expires 1y;
                add_header Cache-Control public;
                root /home/mdance/public;
        }
        location ~* \.(jpg|jpeg|png|gif|swf)$ {
                expires 1w;
                add_header Cache-Control public;
                try_files $uri  @backend;
        }
        location ~* \.(txt|css|js|zip|rar)$ {
                expires 1M;
                gzip_vary on;
                add_header Cache-Control proxy-revalidate;
                root /home/mdance/public;
        }
        location ~* \.(html|htm|php)$ {
                expires 1m;
                add_header Cache-Control private;
                add_header Cache-Control proxy-revalidate;
                proxy_set_header Host $http_host;
                proxy_set_header X-Forwarded-Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                #try_files $uri  @backend;
        }

Вариант 3.

Если у вас на хостинге установлена панель управления ISPManager, то все еще проще. Для включения кеширования, нужно зайти во вкладку «www-домены», затем выбрать нужный сайт, нажать «изменить», перейти к секции «Оптимизация WWW-домена» и поставить галочки напротив «Настроить кэширование» (7 дней) и сразу включим сжатие «Настроить сжатие» (степень сжатия 6).

Оптимизируйте изображения

Речь идет об уменьшении размера файла изображения без ухудшения его качества и разрешения. Фотографии сделанные на цифровой фотоаппарат или смартфон, содержат в себе множество дополнительных мета-данных со сведениями о том где и когда была сделана данная фотография, на какой аппаратуре и т.д. Все это можно удалить.  Для оптимизации изображений существует множество бесплатных сервисов, с возможностью поштучной и массовой обработки. Также для этой цели можно использовать Photoshop, сохранив изображения специально для web (Файл -> Сохранить для Web -> Выбрать формат -> Сохранить).

Список сайтов для оптимизации изображений

TinyPNG – очень высокие показатели эффективности при обработке изображений в формате PNG.

JPEG Optimizer – для оптимизации изображений в формате JPEG этот сервис один из лучших.

Kraken.io – массовая обработка изображений.

Плагины для Worpress

WP Smush.it — мощный инструмент для автоматического и ручного сжатия изображений, позволяет выбрать любую папку на сервере с изображениями и оптимизировать её, работает с медия библиотекой WordPress.

CW Image Optimizer — оптимизирует изображения на лету при загрузке на сайт, также есть режим оптимизации уже ранее загруженных изображений.

Включите сжатие

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

Вариант 1.

Если у вас на хостинге используется Apache, то нужно в файле .htaccess прописать следующий код

# сжатие text, html, javascript, css, xml:
 
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript

Вариант 2.

Если у вас установлен nGinx, открываем файл конфигурации /etc/nginx/nginx.conf и добавляем в него следующие строки:

http {
 
##
# Gzip Settings
##
gzip on;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
}

Вариант 3.

Если у вас установлена панель управления ISPManager то в предыдущем пункте по настройке кеширования браузера мы уже включили GZip сжатие контента. Напомню еще раз где находится данная настройка: Для включения сжатия, нужно зайти во вкладку «www-домены», затем выбрать нужный сайт, нажать «изменить», перейти к секции «Оптимизация WWW-домена» и поставить галочку напротив «Настроить сжатие» (степень сжатия 6).

Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы

Подключение скриптов и стилей в верхней части HTML страницы приводит к задержке отображения контента, браузер не отображает его до тех пор, пока не будут загружены все JS и CSS файлы, это отрицательно сказывается на удобстве пользования сайтом, приходиться ждать несколько дополнительных секунд до момента отображения страницы. С другой стороны, если перенести все стили и JS в подвал страницы, пользователь будет в течении нескольких первых секунд видеть страницу без оформления(до момента загрузки CSS), что тоже не хорошо. Как быть в такой ситуации? Решение следующее, все JS и CSS перемещаем в подвал, а в шапку сайта вставляем CSS стили, непосредственно в HTML код(inline вставка) и только те, что нужны для корректного отображения страницы(её верхней видимой пользователем части) в течении первых секунд (без спецэффектов, :hover, :active и прочих стилей).

Для того что-бы сгенерировать урезанную версию CSS для вставки в шапку страницы, можно воспользоваться следующим сервисом https://jonassebastianohlsson.com/criticalpathcssgenerator/.

JavaScript, переносим его в подвал страницы сайта, но следует учесть, что некоторые плагины могут выставлять JS код непосредственно в начале и середине страницы и для его корректной работы, могут потребоваться ранее загруженные библиотеки, например JQuery. И в случае если все скрипты(библиотеки) мы перенесем в подвал сайта, такие вставки кода в начале и в середине, вызовут ошибку, т.к. будут обращаться к библиотекам которые еще не загружены. По этому придется этот JS код также перенести в подвал HTML страницы. Можно использовать асинхронную загрузку JS, добавив в тег <script src=».. атрибут async. Должно выглядеть так: <script async src=»https://examle.com/… Но асинхронная загрузка уместна не всегда.

Если же вы используете одну из популярных CMS, например WordPress, то задача несколько упрощается, для корректного переноса всех вызовов CSS и JS в подвал страницы, можно воспользоваться плагином Autoptimize, который к тому же минимизирует и сгруппирует все стили и скрипты в единые файлы(на выходе получится один JS фал и один CSS). Подробное описание настройки плагина.

Оптимизируйте загрузку видимого контента

Эта рекомендация может быть следствием как раз оптимизации в рамках предыдущего пункта, если вы перенесли CSS и JS в подвал страницы сайта. Google при загрузке верхней части страницы не обнаруживает стилей, что приводит к некорректному отображению страницы (страница без стилей выглядит ужасно). Для оптимизации загрузки видимого контента, используйте урезанную версию CSS для вставки в шапку страницы(inline вставка) сайта, чтобы верхняя часть страницы отображалась оформленной сразу.

Также основной контент страницы(текст статьи, например) должен размещаться как можно выше в HTML DOM дереве. Таким образом, что сначала загружается основная область с текстом, а затем загружается сайдбар, меню, подвал и т.д.

Сократите JavaScript

Удалите из JavaScript все лишние переносы строк, пробелы и комментарии, сделайте минифицированную версию с помощью сервиса javascript-minifier.com или используйте плагины которые минифицируют JS скрипты на лету. Для WordPress эту задачу решит ранее упомянутый плагин Autoptimize. Как вариант также использовать решение написанное на PHP, которое можно подключить к любому сайту, минифицирует JS и CSS, подробнее https://github.com/matthiasmullie/minify.

Сократите CSS

Аналогично предыдущем пункту, но в данном случае минифицировать нужно CSS, также удалив лишние переносы строк, пробелы и комментарии, в том числе не используемые стили(мусор). Для минификации CSS есть хороший онлайн сервис cssminifier.com

Сократите время ответа сервера

Время ответа сервера зависит от множества различных факторов, основные из которых это мощность и конфигурация сервера, время которое уходит на генерацию страницы средствами PHP, время затраченное на запросы к базе дынных mySQL и т.д. В моем случае данный показатель превышал 1500ms, это очень медленно, такая задержка была заметна пользователям, как говориться даже невооруженным глазом. Рекомендуемое значение не должно превышать 200ms.

Как сократить время ответа сервера?

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

Настройте кеширование страниц на сайте, таким образом, чтобы интерпритатору PHP не приходилось при каждом запросе обрабатывать скрипты и отправлять запросы в базу данных mySQL, храните уже сгенерированные страницы в отдельных файлах кеша и подгружайте готовый контент от туда.

Оптимизируйте базу данных, удалите из неё ненужные записи и задайте таблицам индексы, произведите дефрагментацию. В моем случае работу БД тормозило большое количество записей(при выборке последних пяти комментариев для последующего вывода на страницах сайта в соответствующем блоке) в таблице комментариев, большая часть из которых относилась к спаму и не как не использовалась, после удаления их, скорость существенно возросла.

Для WordPress есть хороший плагин WP Super Cache, подробное описание плагина, процесса кеширования и его настройки, можно прочитать тут.

На стороне сервера можно установить расширение для PHP OPCache или HipHop-php, которые также будут кешировать страницы сайта

После оптимизации базы данных и установки WP Super Cache время ответа сервера сократилась более чем вдвое и составило 600ms. Прогресс на лицо, но этого не достаточно, чтобы ответ сервера считался быстрым и удовлетворял рекомендациям PageSpeed.

Версия и режим работы PHP

На скорость ответа сервера также влиял режим работы PHP, он был установлен в «PHP как CGI»(это результат моих постоянных перенастроек, для тестирования скриптов) при смене режима работы на «PHP как модуль Apache» или «FastCGI(nGinx PHP-FPM)» скорость ответа сервера возросла более чем в три раза и составила 170ms, что вполне укладывается в рекомендованные PageSpeed рамки. Также тесты показали, что версия PHP 5.6.30 немного быстрее всех предыдущих версий, еще больший прирост в скорости дает версия PHP 7, но только в том случае если скрипты написаны специально под неё.

Если вы настраиваете работу сайта на выделенном сервере или VDS, то стоит обратить внимание на настройки режима работы PHP. Если ваш сайт размещен на шаред хостинге, всего скорее там всё настроено должным образом, но лишний раз проверить это не помешает. В противном случае смените хостинг.

Сократите HTML

Аналогично предыдущим пунктам посвященным сокращению JavaScript и CSS, удалите лишние переносы строк, пробелы и комментарии из HTML страницы сайта. Для минификации HTML есть хороший онлайн сервис. Но лучше использовать решение в виде плагина для сайта, который будет минифицировать HTML код на лету. Для WordPress это всё тот же плагин — Autoptimize.

Не используйте переадресацию с целевой страницы

Если на вашем сайте настроена переадресация(редирект с кодом 301, 302) с одного URL на другой, по возможности постарайтесь избавиться от неё. Также на некоторых сайтах встречаются цепочки переадресаций, превышающие один шаг, что также замедляет скорость работы сайта. Наличие большого количества переадресаций может свидетельствовать о неправильной структуре сайта или о наличии неправильно сконфигурированных SEO компонентов(плагинов) установленных на ваш сайт, по возможности их стоит отключить. Также избыточная переадресация может быть прописана в файле .htaccess, проверьте и настройте его.

В некоторых случаях редирект, может быть следствием заражения сайта вирусом, распространенный случай это мобильный редирект. Стоит также проверить файл .htaccess и PHP скрипты сайта, в которых могут быть прописаны лишние заголовки переадресации, вирусом или кем-то еще.

Мои услуги в вашем распоряжении

Если вам нужна помощь в оптимизации сайта, то я буду рад выполнить эту работу, на что вы можете рассчитывать?

• Актуализация дизайна шаблона сайта;
• Создание адаптивной, мобильной версии сайта;
• Устранение всех ошибок в шаблоне сайта в соответствии с W3C;
• Оптимизация сайта по рекомендациям Google PageSpeed Insights;
• Буду рад проконсультировать и ответить на ваши вопросы.

Заключение

Сайт стал быстрым и удобным для людей, что практически сразу отразилось на поведении пользователей. По показателям Яндекс Метрики глубина просмотров увеличилась на 25.5%, а проведенное время на сайте на 37.6%, показатели впечатляют! Основную роль в этом конечно сыграла мобильная версия сайта, именно пользователи мобильных устройств(коих на моем блоге 20%) стали больше всех удовлетворены проделанной работой, что в свою очередь положительно повлияло на статистику.

Буду рад ответить на ваши вопросы в комментариях, а также помочь вам в достижении таких же показателей!

CMS, HTML     PageSpeed Insights, W3C, адаптивный