Главная / Создание и продвижение сайтов / САЙТОСТРОЕНИЕ / WordPress / Google PageSpeed Insights: увеличиваем скорость загрузки сайта

Google PageSpeed Insights: увеличиваем скорость загрузки сайта

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

Предложение по аудиту и исправлению ошибок на сайте

На тот момент ситуация по блогу и в самом деле была удручающая. Мне приходилось разгребать последствия полученного блогом (в результате взлома) фильтра АГС. А новый хостинг, несмотря на более высокую стоимость и SSD диски, которые, если верить рекламе, должны работать в 5-6 раз быстрее, на деле оказался не столь шустр. Сайт стал загружаться гораздо медленнее, чем раньше. И проверка скорости загрузки сайта инструментами от Google это показывала наглядно:

Проверка скорости сайта онлайн: результаты теста

Бесспорно, требовались меры по исправлению ситуации. И уже практически согласившись на полученное предложение, я решил пробежаться по сайтам тех вебмастеров, над которыми уже была проведена работа. Однако пять первых же просмотренных мной сайтов находились в «красно-желтой» зоне сервиса Google PageSpeed, т.е. грузились недостаточно быстро — это и стало причиной моего отказа от предлагаемых услуг.

Редактирование кода вручную или плагины?

Именно этот вопрос неизбежно появляется у владельца сайта (блога) на WordPress в процессе работы над теми или иными техническими моментами.

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

Увеличить скорость загрузки сайта самостоятельно — вполне реально. Для этого лишь нужно следовать рекомендациям онлайн-сервиса Google Page Speed. Каждый пункт из тех, что появляется после проведенного анализа (оптимизируйте изображения, используйте кеш браузера, сократите CSS, сократите JavaScript и т.д.) сопровождается блоком «Как исправить«, в котором указывается, что и в каких конкретно файлах (страницах) необходимо исправить. Достаточно сделать бэкап сайта и его базы, найти несколько часов (чаще — дней) свободного времени, запастись терпением — и вперед!

При недостатке опыта работы с кодом вносить исправления вручную можно почти бесконечно — или до полной победы над проблемой или до тех пор, пока сайт не перестанет работать. Последний вариант не исключен, когда за дело берется блогер с небольшим стажем знакомства с основами HTML, CSS, JavaScript, PHP.

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

Мне в результате короткой серии экспериментов удалось подобрать несколько плагинов WordPress, установка и активация которых позволила увеличить показатели скорости загрузки моего блога в три раза. Об этих плагинах мне и хотелось бы рассказать сегодня. Но прежде хотелось бы обозначить основные причины медленной загрузки сайтов.

Почему сайт медленно загружается

  • Хостинг. Прежде всего, это предоставляемые хостингом ресурсы. Здесь каждый выбирает сам — по своим потребностям и бюджету. Следует лишь помнить о том, что не всегда самый дорогой и самый известный хостинг — лучший. Ситуация, когда хостер, которого вы выбрали и который вас очень долгое время устраивал, начинает «экономить» ресурсы — тоже не редкость. Или в один прекрасный момент выясняется, что ваш блог оказался на одном IP с чужим высоконагруженным проектом. При этом переход на выделенный IP вряд ли моментально избавит от всех проблем. Зачастую, и переезд на другой хостинг — не вариант, хотя бы потому, что однажды вновь найдя хостинг, который будет устраивать вас и характеристиками, и стоимостью, и отзывчивостью техподдержки, вы больше никогда не столкнетесь с проблемой медленной работы сайта.
  • Шаблон. Сегодня выбрать подходящий по дизайну и функциональности шаблон (тему) для информационного (статейного) сайта не составляет большого труда — в репозитории WordPress их тысячи. Все они написаны людьми, имеющими разные представления о структуре и взаимосвязи элементов темы, несмотря на то, что каждый разработчик вынужден отталкиваться от Кодекса. Громоздкий неповоротливый шаблон (вид главной, загружаемые скрипты и т.п.) — один из факторов, за который поставить минус сайту могут не только пользователи, но и поисковые системы. Есть шаблоны простые и легкие, как бабочки — без особых настроек и вариаций, установил, загрузил картинку в шапку — и пользуйся, пока не надоест. И есть шаблоны, подобные швейцарскому ножу, глядя на которые через админку сайта, понимаешь, насколько прекрасен WordPress ) И еще понимаешь, что с таким шаблоном обязательно нужно поработать, разобраться с ним, даже если он окажется не таким быстрым как другие. Проверить скорость загрузки сайта с разными шаблонами очень просто, для этого в меню консоли WordPress Внешний вид — Темы достаточно переключиться на нужную тему и вбить адрес своего сайта в поле ввода на странице Google PageSpeed Insights.
  • Плагины. Да, те самые плагины, о вреде которых столько написано. По большому счету, для нормального функционирования сайта плагины не нужны. Но желание блогера облегчить себе процесс публикации различных типов контента (текст, изображения, видео), улучшить защищенность блога и повысить удобство работы с ним посетителей, т.е. тех, для кого и создается контент — все это заставляет нас постоянно улучшать свои сайты с помощью расширяющих их функциональность надстроек — плагинов. На мой взгляд, всегда необходимо придерживаться золотой середины — плагины использовать, но в меру и те, которые на скорость загрузки сайта сильно не влияют. Понять же, насколько сильно нагружает сайт тот или иной плагин можно с помощью замечательного инструмента  P3 (Plugin Performance Profiler, который не обязательно держать включенным постоянно.
  • Изображения. Точнее, их количество на странице и вес. Некоторым типам блогов (о путешествиях, кулинарным, техническим и т.п.) — без изображений никуда. Хорошо иллюстрированный интересный контент всегда пользовался и будет пользоваться повышенным спросом. Оптимизация загружаемых на сайт изображений — уже половина дела в борьбе за скорость сайта. Отказываться от изображений и жертвовать их качеством не нужно — необходимо их правильно и своевременно оптимизировать.

Как увеличить скорость загрузки сайта WordPress

Разумеется, с помощью плагинов — тех, о которых шла речь в самом начале.

Regenerate Thumbnails

Плагин Regenerate Thumbnails

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

Проверка скорости сайта онлайн сервисом Гугл показала мне, что значительная часть изображений использовалась без миниатюр. Вместо них на главной и в рубриках в анонсах постов выводились оригинальные изображения — своевременно не устраненные последствия слияния двух блогов (экспорт контента с блога на другом шаблоне). После того, как Regenerate Thumbnails пересоздал все миниатюры на блоге, ситуация со скоростью сайта изменилась в лучшую сторону (58/100 для мобильных, 63/100 для компьютеров):

Результаты пересоздания миниатюр

a3 Lazy Load

Плагин a3 Lazy Load

Плагин, уменьшающий количество запросов к базе данных и улучшающий время загрузки страниц за счет того, что при его активации все изображения в анонсах, постах и виджетах, а также аватары комментаторов загружаются не одновременно, а последовательно — по мере прокрутки посетителем страницы вниз. Чем больше изображений на сайте, тем заметнее эффект. В описании плагина в репозитории приводится ссылка на демо-страницу, содержащую 1000 изображений. Эффект от активации плагина на этом блоге приведен на скриншоте ниже (71/100 для мобильных и 82/100 для компьютеров):

Результаты последовательной загрузки изображений

WP Super Cache

Плагин WP Super Cache

Плагин кэширования, отдающий посетителям заранее сгенерированные статические страницы вместо динамических, как это делает WordPress по умолчанию. Страница настроек плагина имеет несколько вкладок, все основные пункты меню русифицированы. На моем блоге лучший результат в плане скорости загрузки был достигнут при выборе пункта Упрощенное кэширование. Из трех протестированных плагинов кэширования (Hyper Cache, W3 Total Cache и WP Super Cache) последний оказался лучшим. Эффект от его применения — на скриншоте:

Результаты применения плагина кэширования

Итоги

В результате активации описанных в статье плагинов оценка скорости загрузки сайта инструментом Google PageSpeed Insights следующая: 73/100 для мобильных устройств и 86/100 для компьютеров. Считаю, неплохой результат с учетом того, что вручную никаких правок в код сайта не вносилось.

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

Что касается плагинов, ускоряющих загрузку JavaScript, CSS и HTML, их было перепробовано достаточно для того, чтобы убедиться, что их включение добавляет в онлайн тесте от Гугл максимум один пункт к уже имеющимся. Поэтому от их использования было решено отказаться. Вот список плагинов, которые были протестированы: Async JavaScript, Async JS and CSS, Autoptimize, Fast Velocity Minify, JS & CSS Script Optimizer, Speed Booster Pack, WP-HTML-Compression. Возможно, на вашем шаблоне какой-либо из этих плагинов покажет более впечатляющие результаты.

Своими способами вывода сайтов в «зеленую зону» Google PageSpeed Insights прошу делиться в комментариях.

Расскажите об этой статье в соцсетях:

47 комментариев

  1. Такие же циферки на сайте AMP, без кучи плагинов и работы над оптимизацией.

    • Не удивлен, на главной лишь пара изображений, остальное — небольшие текстовые блоки. То, что может серьезно тормозить работу сайта, я упомянул: хостинг, шаблон, плагины, изображения. Так что, в данном случае, думаю, дело не в движке. Попробуйте создать главную с кучей миниатюр и посмотрите тогда на результаты теста.

  2. В Google PageSpeed Insights есть еще такая хорошая вещь как:
    «Скачать оптимизированные изображения, ресурсы JavaScript и CSS для этой страницы»
    Для статичных сайтов позволяет значительно увеличить скорость загрузки (хотя рекомендую сохранить отдельно оригинальные файлы). В первую очередь это касается файлов JavaScript и CSS.

    • Что касается изображений, то «Скачать оптимизированные изображения» работает некорректно, не учитывая, что за изображение сжимается — из текста статьи или миниатюра. Плагин Regenerate Thumbnails в этом плане — просто находка для тех, у кого на сайте часть миниатюр попросту отсутствует. Да и для JavaScript и CSS предлагаемая Гуглом оптимизация не всегда работает так как хотелось бы. В моем случае плагины дали более ощутимый результат.

  3. Валентина

    Проверила свой сайт на Google PageSpeed Insights, для мобильных 62/100, для компьютеров 76/100. Рекомендации исправить обязательно: Удалите код JavaScript, препятствующий отображению, Оптимизируйте работу CSS на следующих ресурсах, Используйте кеш браузера для следующих ресурсов. Если плагин кеширования у меня стоит, нужно ещё выполнить в нём дополнительные настройки? А вот про код JavaScript и CSS, мне кажется перечисленные тобой, Константин, плагины не помогут. Или я ошибаюсь?

    • Валентина, это стандартные для большинства сайтов рекомендации от Гугл. Со скриптами придется разбираться через правку кода, если плагины, оптимизирующие код, не дают улучшения показателей. Но я бы все-таки попробовал посмотреть на работу сайта с дополнительно включенным плагином a3 Lazy Load — возможно, он помог бы добрать недостающие пункты.

  4. Все это хорошо для пользователей. Возможно… но на ранжирование и прочее это не действует. Посмотрите сколько в топе сайтов с низкими показателями pagespeed. Ускорение и прочее это РЕКОМЕНДУЕМЫЕ факторы от поисковых систем. Но не обязательные.

    • Сегодня — рекомендуемые, завтра — обязательные. Если Гугл выкатил для всеобщего пользования такой инструмент, как PageSpeed Insights, значит, как минимум, эта ПС учитывает скорость загрузки сайта в своих алгоритмах. Ну и дает возможность сделать сайт чуть лучше, чуть быстрее )

  5. Александр Каратаев

    Константин, приветствую! Согласен с тобой — PageSpeed Insights — это замечательное подспорье, инструмент позволяющий выявить слабые места.
    Плагины, о которых ты рассказал, знаю все, но использовал только Regenerate Thumbnails, да и то один раз, после известной нам с тобой манипуляции с миниатюрами. Сейчас он деактивирован. Замечательный, надо сказать, плагин.
    Для кеширования у меня установлен Comet Cache — я доволен его работой. До этого пробовал кучу других, в том числе и WP Super Cache…
    Кроме того, чтобы на стороне пользователя гарантировано включался кеш браузера я в .htaccess кое-что прописал. Сейчас у меня цифирки PageSpeed Insights показывает такие: 74 / 100 для мобильных и 88 / 100 для компьютеров. Не блеск, конечно, согласен, но основные претензии предъявляются к оптимизации css и js, до решения этой проблемы руки не доходят никак.

    • Александр Каратаев

      Да, кстати, там в предложениях по оптимизации и мои плагины выскакивают. Оптимизирую, честное пионерское… Просто руки никак не доходят…

    • Александр, Regenerate Thumbnails, собственно, по твоей рекомендации использовал и очень благодарен за подсказку. Плюс недавно несколько положительных отзывов об этом плагине попалось. Порадовало то, как быстро он работает и как качественно выполняет свою работу. С таким плагином можно не переживать о проблемах перехода с одной темы WordPress на другую, с картинками уж точно будет все в порядке )

      Comet Cache тоже обязательно потестирую, мне это интересно. С js и css обязательно разберемся, тоже со временем пока (как и всегда))) напряг. Сегодня практически весь день сдавал внутренние экзамены в автошколе: теорию, автодром, город. В пятницу — то же самое, но уже в ГАИ (ГИБДД). Очень много энергии на все это требуется, как выяснилось )

  6. Нужно подробней изучить. Скорость загрузки сайтов очень важна для продвижения.

  7. Сергей Петров

    Константин, доброе утро!

    Вот тут ко мне обратился человек и попросил помочь создать сайт на WordPress (не потому, что именно WordPress ему нравится, а потому, что я работаю только с WordPress и сказал ему, что с другими CMS просто не работал и не знаю о них особо).

    По сути, он попросил полностью создать ему сайт с нуля, а потом наполнять его статьями. Вот вторая часть (наполнение статьями) мне интересна, именно поэтому я согласился на выполнение и первой части.

    В общем, я вчера создал сайт, но он пока «голый». То есть там не только статей, там еще и плагинов особо нет.

    Кстати, на установленной версии WordPress уже имеется плагин WP Super Cache (он был в комплекте этой версии). Как ты думаешь, стоит ли его менять? У меня стоит другой плагин кеширования – Comet Cache, поэтому я пока не уверен, оставлять ли WP Super Cache или установить тот, который стоит на моем сайте.

    А вообще, я хочу сказать тебе спасибо за статью. Я планирую использовать указанные тобой плагины для увеличения скорости загрузки, чем копаться в коде, как я это делал на своем сайте.

    • Сергей, вполне возможно, что и без кэширования сайт будет показывать очень хорошие результаты. А если кэширование все-таки понадобится, почему бы не сравнить, какой из плагинов справится с задачей лучше. Тут сложно что-то предсказать наверняка, надо пробовать ) И пока «сайт голый», его уже можно проверить на скорость в сервисе от Гугла. Если сразу показатели «не очень» — нужно или хостинг менять или шаблон, т.к. дальше лучше не будет.

      • Сергей Петров

        Константин, вот сейчас проверил скорость в Гугле.

        В мобильной версии: 73/100 (ругается на код JavaScript и CSS, блокирующий отображение верхней части страницы).

        В версии для компьютеров 85/100.

        Ты прав насчет сравнения плагинов кеширования. Об этом подумаю завтра)

  8. Наталья

    Константин, а я такое письмо вчера получила на почту. Хотела делать у себя заметку поэтому поводу. А тут зашла к Вам и увидела, что Вы написали по этому поводу. Интересно, а если у Борисова спросить, знает ли он такого человека, каков будет ответ?
    Попробую сама разобраться со всеми своими проблемами. В код я не полезу. А вот плагины установить можно. Спасибо за такое хорошее разъяснение что к чему и рекомендации плагинов.

    • Наталья, не суть важно, от кого поступают предложения услуг, это был, как Вы и отметили, лишь повод к заметке. Мне было важно показать, что ощутимых сдвигов можно добиться и без редактирования кода, только с помощью плагинов. Но не факт, что та же самая связка плагинов на другом хостинге и шаблоне покажет похожий результат. Если же эти плагины Вашему блогу помогут, буду рад.

  9. О, какая прелесть, мне этот товарищ тоже писал, и тоже обещал осчастливить меня за 1000 рублей. Я не стала отвечать — не люблю, когда коммерческое предложение начинается с того. что человек, которому нужны мои деньги, фактически называет меня… ммм… неумной женщиной.
    А вообще — спасибо за подсказку. У моего блога есть проблемка со скоростью — т.е. мне-то самой нормально, а некоторые люди жалуются, что ждать приходится. Да и вопрос «картинок» для меня актуален…

    • Елена, у меня Ваш сайт открывается сравнительно быстро. Но PageSpeed Insights, действительно, совсем грустную картину по нему показывает — и, в принципе, понятно, что из-за больших и «тяжелых» изображений без миниатюр. Думаю, даже a3 Lazy Load сможет заметно улучшить показатели, я бы проверил…

  10. PSI — штука странная. Если несколько раз подряд проверить, количество баллов колеблется от 81 до 88. Неплохая так оптимизация, то в районе жёлтого, то зелёная)
    Не знаю, насколько правда, от нескольких человек слышал, что при смене хостинга можно получить плюс несколько десятков. Теоретически, такое возможно, если страница быстро генерится, после чего веб-сервер пропускает её через специальный плагин — у Гугла точно был такой, под Апач написан, маленькие скрипты/стили вкрапляет в код страницы, потом удаляет лишние пробельные символы (сорцы страницы Гугла глянуть если, будет понятно, о чём речь) и отдаёт браузеру.
    Из плагинов кеширония, Hyper Cache вообще ни о чём. А вот WP Super Cache — просто изумительно вписался.

    • Андрей, у меня при смене хостинга обратный результат получился: минус несколько десятков пунктов. Но разброса в результатах не наблюдал: все стало стабильно плохо )) Попробую все-таки как-нибудь еще и в коде поковыряться. Может, и мобильную версию удастся в зеленую зону подтянуть.

      • Константин, может быть и обратный, если с новым хостингом не повезло.
        Но Гугл и сам как-то странно подтупливает. Картинки оптимизированы, а он предлагает сократить 19-килобайтную на 17 килобайт (что в принципе невозможно для данного случая). Ощущение, что сам использует древние кэшированные данные.

  11. Александр

    Привет, Константин!
    Извини, что редко захожу к тебе почитать твои полезные статьи — времени нет даже работать со своими сайтами. У меня для ускорения загрузки сайта стоит только плагин WP Super Cache. Все изображения оптимизирую в фотошопе «сохранить для веб-устройств». Рекомендуемый тобой плагин Regenerate Thumbnails тоже меня заинтересовал. Может займусь как нибудь.
    Давно ищу НОРМАЛЬНОГО специалиста для полного аудита своего сайт myotdelka.ru На нём кучу страниц из топа скопировали всякие не хорошие люди и теперь они индексируются на их сайтах, а на моем выпали из индекса не только они, но и много других, тексты на которых сейчас программы показывают уникальными…

    • Александр, всегда рад тебе! Состояние «нет времени» знакомо — в семье с маленьким ребенком это нормально. Насчет индексации: я бы прогнал выпавшие статьи через «Переобход страниц» в Яндекс-вебмастере и через твиттер (если есть возможность). Специалиста не посоветую, сам посмотрю и на выходных отпишусь тебе почтой. Думаю, взгляд со стороны не помешает.

      • Александр

        Спасибо, Константин, за понимание! Конечно не помешает :) Буду очень благодарен.

  12. Людмила

    Спасибо Константин за PageSpeed Insigh.
    Проверила свой блог, неутешительные цифры 45-40/100.
    Хотя всегда считала, что грузится мой сайт достаточно нормально. Подправлю изображения, благо их немного. А с остальным будем думать…

    • Людмила, даже низкие показатели по Google PageSpeed Insights пока не мешают многим сайтам занимать первые строчки в ТОПах поисковых систем. А Вашему сайту, возможно, плагина для последовательной загрузки изображений будет достаточно.

  13. Константин, Ваш блог в последнее время, не очень устойчиво работает/грузится. Граватарки то показывает, то нет. С чем это связано?

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

  14. Екатерина Башкурова

    Ох, наконец-то. Давно эту статью ждала. Спасибо, Константин. Буду разбираться, потому что у меня такая же проблема — сайт грузится медленно. Но подсказки гугла мне ни о чем не говорили — я пробовала разобраться самостоятельно, но так и не получилось. С вашей инструкцией думаю теперь все получится. :-)

    • Да это, скорее, не инструкция, а описание одного из наборов плагинов, которые могут поправить циферки в Google PageSpeed.

  15. Дмитрий

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

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

  16. Екатерина

    Проверила свой блог на скорость 80/100 для компьютеров, думаю этот результат хороший, а вот для мобильных — ниже. Нужно проработать данный вопрос. Хорошо, что с помощью вашей статьи обратила на это внимание!

  17. А я воспользовался его услугами, но кажется зря это сделал посещаемсоть за месяц резко просела, пока не пойму в чем причина

    • Возможно, просто совпадение. Но причину, найти, разумеется, нужно. Я бы в первую очередь посмотрел, что показывают сервисы Вебмастер Яндекс и Гугл. Можно еще в Серпстат заглянуть, там даже в бесплатном варианте есть динамика видимости и количества ключей в поиске по основным поисковикам и регионам.

  18. Максад Исаев

    Неделю назад закончил оптимизацию по рекомендации данного сервиса. Результаты сейчас приемлемые. Но намучился физически и морально! Жаль, что не встретил вашу статью раньше! Теперь подписался на новые статьи.

    • В любом случае, работа по оптимизации сайта под сервис Гугла была проведена не напрасно.

  19. Как раз был перед выбором — редактировать коды вручную или использовать плагины. Статья помогла определиться в пользу плагинов. Особенно интересуют плагины для переноса скриптов в подвал.

    • До 100% плагинами все равно вряд ли вытянуть, так или иначе, редактирование кода — следующий неизбежный шаг )

  20. Вот и я про то и говорю. Воспользовался ссылкой В Google PageSpeed Insights: «Скачать оптимизированные изображения, ресурсы JavaScript и CSS для этой страницы». Очень помогло. Показатели резко улучшились.

    • А мне по ссылке «оптимизированные изображения» непонятно что скачивалось — картинки сильно уменьшенного размера и очень низкого качества, искусственный интеллект Google пока дает сбои.

      • Надежда Суптеля

        Вот и у меня Константин получилась такая же история по поводу скачать оптимизированные изображения. Там такие малюсенькие, что действительно Гугл пока не блещет интеллектом. По поводу проверки у меня: Для ПК 83/100, а для мобильных 76/100/ Удобство для пользователей 99/100. Не стала ничего удалять — изменять, как пишет Гугл. Попозже разберусь, там будет видно.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *