Google Page Speed Insights скорость загрузки сайта и оптимизация


Содержание материала:

Новый алгоритм PageSpeed: как повысить показатель PageSpeed — наш опыт и советы

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

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

Из статьи вы узнаете:

Как проверить PageSpeed сайта и как алгоритм PageSpeed поменялся в 2020 году

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

Сервис начисляет баллы за скорость сайта в десктопной и мобильной версиях. Максимальное количество — 100.

Чтобы проверить скорость, нужно зайти на страницу сервиса и ввести имя сайта:

Скорость сайта Facebook в десктопной версии

До изменений в работе алгоритма баллы начислялись за соблюдение правил и выполнение задач:

PageSpeed Insights говорит, что сайт — молодец: не использует редиректы, CSS в контенте без прокрутки, — подчиняется правилам. Поэтому сайт получает 100 баллов

С 2020 года алгоритм PageSpeed ориентируется только на саму скорость сайта — за какое время на странице появляется первый контент и его основная часть, сколько секунд нужно для полноценного взаимодействия пользователя с ресурсом, общий индекс скорости и другие характеристики.

Загрузка страницы оценивается по нескольким характеристикам:

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

Эти характеристики сравниваются с показателями лучших сайтов и превращаются в баллы — точной процедуры оценки никто не знает.

До изменений в алгоритме наш PageSpeed в десктопной версии был в районе 90 баллов из 100 — это так называемая зеленая зона. После обновления алгоритма мы попали в красную зону — упали с 90 до опасных 33 баллов в десктопной версии и с 40 до 23 в мобильной.

Поэтому приняли решение срочно оптимизировать страницы, чтобы вернуть былую славу.

Что мы сделали, чтобы повысить показатель PageSpeed

Мы провели много экспериментов для того, чтобы понять, что влияет на скорость, и как сильно.

Для тестов взяли несколько страниц — в частности, нашу страницу виртуального хостинга.

Мы поняли, что если будем рассматривать каждый фактор влияния на скорость в отдельности, то не увидим общей картины. Это потому, что отдельный фактор, конечно, влияет на скорость, но незначительно, а все они в сумме — вполне.

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

С чем мы экспериментировали для ускорения загрузки сайта:

  • вместо мгновенной загрузки чата делали отложенную на 6 секунд загрузку,
  • подключали параметр lazyload, чтобы изображения подгружались отложенно,
  • подключали не общий файл CSS, а только его кусочек для нужной страницы,
  • отключали Google Tag Manager с кучей JavaScript.

После каждого эксперимента мы замеряли скорость страницы и снова тестировали новые гипотезы.

В результате поняли, что самая действенная комбинация — это подключать кусочек CSS для нужной страницы, делать отложенную на 6 секунд загрузку чата и отключать Google Tag Manager. Таким образом, наша скорость в десктопной версии выросла с 33 до 59 баллов, в мобильной — с 23 до 38.

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

После уменьшения времени до одной секунды ситуация улучшилась. Кроме этого мы оставили общий JavaScript, который подключался после загрузки HTML-файла. В итоге PageSpeed в десктопной версии вырос до 92 баллов, а в мобильной — до 42:

Скорость сайта HOSTiQ после оптимизации под обновленный алгоритм

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

Мы также заметили, что баллы PageSpeed могут колебаться в пределах даже одного дня. При эксперименте с одним и тем же сайтом в течение 10 минут количество баллов за скорость колебалось — сначала сервис выдавал 34 балла, через 10 минут — 43. Это зависит от работы 3G/4G сетей, используемых компанией-аналитиком Lighthouse для предоставления данных, варьируемого времени ответа сервера и базы данных для загрузки ресурсов страниц — иконок, изображений, шрифтов, CSS.

Советы, как ускорить загрузку сайта и улучшить показатель PageSpeed

  • Проверяйте разные комбинации факторов на одной странице, чтобы понять, что лучше всего оптимизирует сайт — один фактор вряд ли значительно влияет на скорость.
  • PageSpeed Insights дает подсказки, как увеличить скорость загрузки сайта. Он говорит, где что проседает, и что нужно сделать, чтобы оптимизировать это:

Пример советов по оптимизации загрузки сайта Facebook

    • Обращайте внимание также на скорость сайта в мобильной версии — Google Page Insights дает аудит по десктопной и мобильной версиям. Оптимизированные сайты под мобильную версию становятся сегодня все важнее для поисковиков.
    • Первыми проверяйте изображения — часто проблема в том, что они не оптимизированы. Топ-замечаний Google — загружайте картинки в новых форматах, правильно вставляйте код картинок. Google также выпустила экспериментальное приложение Squoosh, которое помогает сжимать изображения.
    • Используйте формат JPEG для изображений — он сжимается без потери качества.
    • Загружайте фоновые картинки через внешний, или сторонний CSS.
    • Минимизируйте пробелы и теги комментариев — каждая буква или пробел занимает один байт HTML-кода.
    • Критично важно оптимизировать или как можно меньше использовать Javascript — в экспериментах компании Milestone после удаления внутреннего Javascript с сайта баллы за Pagespeed выросли с 49 до 87. Также не стоит использовать сторонний Javascript.
    • Удаляйте ненужный CSS. Когда вы используете преднастроенные темы и плагины WordPress, в них обычно содержится больше кода, чем нужно. Когда PageSpeed Insights проанализирует страницу, нажмите на «Сократить HTML» — «Посмотреть содержание» — он подскажет, как ускорить загрузку страниц.
    • Оптимизируйте базы данных — по мере роста проекта базы данных растут и работают медленнее. Поэтому нужно регулярно избавляться от спама, ненужных таблиц. Удалить ненужные данные можно вручную через phpMyAdmin в разделе SQL или с помощью сторонних плагинов.
    • Уменьшайте количество редиректов и удаляйте лишние плагины.
    • Настройте кэширование на стороне браузера. Для этого в файле .htaccess пропишите директивы: Expires — отвечает за актуальность кэша: можно установить срок от недели до года. Last-Modified и ETag — устанавливают в кэше уникальный id для каждого url.
    • Попробуйте использовать инструменты Google для оптимизации загрузки.
    • После внедренных улучшений регулярно мониторьте PageSpeed сайта и проводите работы по его оптимизации. А сервис PageSpeed Insights всегда поможет вам с этим — подскажет, как ускорить работу сайта.

Page Speed Insights

Бесплатный онлайн-сервис Google Page Speed Insights – это комплексный инструмент для определения фактической производительности и выбора эффективных путей оптимизации сайта. Удобен для использования как на компьютере, так и на мобильном устройстве. Не показывает абсолютную скорость страницы, а анализирует эффективность динамики загрузки и отрисовки в браузере клиента. При этом учитываются только не зависящие от типа интернет-соединения факторы: JavaScript, CSS, структура HTML, конфигурация сервера, размер изображений и т. д.

Начало работы

Чтобы получить подробный отчет о производительности, необходимо перейти на официальный сайт Page Speed Insights и вставить ссылку на исследуемый ресурс в строку «Ведите URL веб-страницы». После этого нужно нажать кнопку «Анализировать».

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

Особенности Google Page Speed Insights

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

Показатель Page Speed (скорость страницы) демонстрирует динамику в секундах с начала первой отрисовки контента (FCP) до момента загрузки HTML и постройки DOM-дерева (DCL), т. е. полной инициализации интерфейса для работы пользователя. Чем меньше это время, тем быстрее произойдет отображение сайта в браузере. Чтобы все ресурсы были в равных условиях, сервис Google Page Speed Insights использует в качестве отправной точки усредненный показатель скорости загрузки по сети, выставляя одну из оценок:

  • Slow – медленная (красный цвет);
  • Average – нормальная (оранжевый);
  • Fast – быстрая (зеленый).

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

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

лучше исправить, если есть возможность

Также онлайн-сервис Page Speed Insights использует 100-балльную шкалу для оценки веб-ресурсов по времени выдачи результатов на поисковый запрос и полной загрузке страницы. Всего предусмотрено три интервала скорости:

  • Low (низкая) – 0–59 баллов;
  • Medium (средняя) – 60–79;
  • Good (хорошая) – 80–100.

Низкая оценка веб-ресурса практически всегда указывает на большие недочеты в организации процесса рендеринга, которые требуют обязательного устранения.

Оценка Page Speed Insights и SEO-продвижение

Google использует около 200 факторов для определения рейтинга сайта, среди которых наиболее важным является ключевое слово в начале тега title, объем и релевантность контента поисковым запросам, плотность и расположение ключевых слов, абсолютная скорость загрузки. Показатель Google Page Speed Insights непосредственно влияет на выдачу 1–3 результатов из 100. В то же время в официальных требованиях системы указано, что «сайт должен работать максимально быстро». Этот фактор благоприятно влияет на поведенческую историю веб-ресурса и значительно повышает его рейтинг. Именно поэтому эффективное СЕО-продвижение сайта требует нормальных показателей Page Speed Insights, но не обязательно со значением Good и Fast. Ярким подтверждением этому факту является мегапопулярный ресурс Amazon.com со средним уровнем оптимизации и высоким рангом.

Разработчики уделили огромное внимание функциональности и внешнему виду сайта в ущерб минимизации времени на полную загрузку картинок и стилей.

Рекомендации Google Page Speed Insights

Кроме подробного отчета о производительности веб-ресурса, сервис предлагает и различные варианты для ее улучшения. Например, сайт Amazon.com получил следующие предложения по оптимизации.

Использование кеша браузера. Практичный и полезный совет по применению заголовков кеширования для хранения копий статических файлов (не меняются от одного поискового запроса к другому) в браузере пользователя.

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

Удаление JavaScript, блокирующего рендеринг. По возможности организуйте выполнение интерактивных сценариев веб-страниц в футере сайта (footer – нижняя часть) или сделайте асинхронную загрузку шапки и JavaScript. Также часть кода можно перенести в основную HTML-разметку. Здесь важно участие профессионала, чтобы не нарушить корректную работу функционала сайта. Эта рекомендация не подходит для ресурсов, использующих готовый шаблон WordPress.

Оптимизация Cascading Style Sheet. Существует возможность разделения CSS-кода для приоритетной выгрузки стилей оформления первого экрана в шапку сайта и добавления остальных каскадных таблиц в футер. Здесь также нужно участие верстальщика, чтобы избежать будущих проблем в работе сайта.

Сжатие изображений. Эффективным способом увеличения скорости загрузки сайта является оптимизация размера картинок и фотографий. Для этого можно использовать редактор Adobe Photoshop или специализированные онлайн-сервисы: Compressor.io, TinyPNG, Optimizilla, Web Resizer. Рекомендуемая ширина изображения в формате jpeg, gif или png – 400–600 пикселей при весе 35–75 Кб.

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

�� Скорость загрузки сайта — что нового в Google PageSpeed Insights в 2020 (сентябрь)

Слушайте выпуск подкаста про обновленный Google PageSpeed Insights! ��

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

Google Webmaster Central Blog говорит

9 июля 2020 в блоге Гугл написали: The Speed Update is now rolling out for all users. Что значило, что алгоритм вышел и на мобильные версии сайтов.
Что говорится в сообщении от Гугл:

Начиная с июля 2020 года, скорость загрузки сайта, будет входить в список факторов ранжирования. Но это будет касаться только самых медленных сайтов и небольшого количества запросов. Алгоритм назвали «Speed Update».

12 ноября 2020 года, Гугл полностью обновил пейджспид. Теперь он замеряет скорость загрузки и даёт совсем другие оценки сайтам. Многие увидели свои сайты в красной зоне с оценками до 50 баллов.

А 15 августа 2020 года W3C Community выпустили спецификацию про Largest Contentful Paint. Считается, что устаревшая метрика DOMContentLoaded. Более новые метрики First Paint (FP) и First Contentful Paint (FCP) не совсем корректные, так как это про то, что пользователь увидел в самом начале загрузки сайта. И если пользователь видит индикатор загрузки или всплывающее окно, то это еще не загруженный сайт.

W3C Web Performance Working Group и исследования от Google привели к тому, что лучше всего замерять тот момент, когда произошел рендеринг самого главного контента страницы.

The Largest Contentful Paint (LCP) API, доступен с версии Chrome 77 в отчетах. На сегодняшнюю дату работает уже Версия 79.0.3945.8, DEV версия.

Chrome для разработчиков можно скачать на официальном сайте — www.google.com/chrome/dev/.

Что такое Google PageSpeed Insights

Этот инструмент создан для диагностики и оптимизации скорости ресурса. Он анализирует, выявляет слабые места и подсказывает, какие ошибки нужно исправить. При этом сервис PageSpeed Insights не просто советует вам, над чем нужно поработать, но и показывает, сколько времени определенное действие по оптимизации скорости сэкономит при дальнейших загрузках.

Почему Гугл ПэйджСпид считают важным инструментом измерения скорости сайта

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

Оценка происходит по стобалльной шкале. Те, кто говорит, что 100 баллов — недостижимая планка, не умеют. Не верьте.

Стоит ли равняться на этот сервис

Только на него равняться вредно. Нельзя. Это как сходить к нескольким врачам до серьезной операции. Три инструмента проверки смогут дать картину в 3D. Какие три мы советуем и почему:

  1. Loading.express — этот инструмент даст экспресс оценку по всем важным параметрам скорости загрузки сайта. Просто проверяйте и держите вкладку открытой.
  2. GTmetrix — этот сервис поможет понять какой именно скрипт, картинка или стиль даёт нагрузку. И еще он делает замер без ограничений по скорости интернета и процессора.
  3. Пейдж Спид от Гугл.

Кстати, на loading можете сделать замер прямо из этой строки проверки:

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

А значит разумнее оптимизировать только то, что можно улучшить без ущерба другим характеристикам сайта, и не пытаться «подогнать под 100» все рекомендованные пункты. Не забывайте, что конечная цель — обеспечить максимально положительный опыт пользователю.

Обновление алгоритмов Google PageSpeed Insights

В июле Гугл запустил новый алгоритм — Speed Update, благодаря чему скорость загрузки стала фактором ранжирования поисковика. Ноябрьские обновления PSI (PageSpeed Insights) кардинально изменили сервис. Теперь он работает на базе аналитики Lighthouse , встроенного в браузер Google Chrome. Это инструмент с открытым исходным кодом, созданный для улучшения и контроля качества веб-страниц.

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

В PageSpeed Insights добавлена функция раскадровки, состоящая из десяти слайдов, на которых вы можете увидеть очередность появления контента страницы. Кроме того, теперь сервис дает советы по использованию на ресурсе новых форматов картинок, — JPEG 2000, WebP и JPEG XR — которые весят меньше своих предшественников.

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

Что делать, если показатели Google PageSpeed Insights низкие

Для начала важно знать, что нужно делать 5-6 замеров подряд и ориентироваться на средний показатель, потому что сайты не статичны и их скорость тоже.

Фокусируйтесь вот на чём:

мобильная версия — к ней Гугл предъявляет более серьезные требования и ставит ее в приоритет. А с 2020 года мобильный трафик превысил десктопный в России.

Отключите ненужные библиотеки и плагины, они сильно замедляют скорость загрузки сайта, но при этом даже не задействованы в отображении его контента. Тут есть тонкий момент: это работа только для опытных специалистов, иначе можно вовсе «сломать» сайт.

Сосредоточьтесь на достижении моментальной загрузки первого экрана: по новым условиям поисковой системы он должен быть готов к работе и взаимодействию с пользователем максимально быстро.

Переместите в футер (нижняя часть страницы) js, которые не участвуют в отображении страницы или, по крайней мере, первого экрана. Некоторые советуют и css перенести туда же, но делать так нельзя ни в коем случае. Это еще больше будет замедлять подготовку страницы к взаимодействию.

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

Как получить 100/100 в Google PageSpeed Insights

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

Для того, чтобы скорость загрузки была максимальная, нужно отлично знать CSS, JS и серверную часть. Такие специалисты всегда стоят от 1500 до 5000 рублей за час работы. На средний сайт нужно потратить 10 часов. То есть 20.000 рублей это та цена, от которой начинаются настоящие специалисты.

Если вам предлагают сделать 100/100 за 3000 рублей, то возможно вам сделают костыль, который и правда покажет 100 из 100, потому что Гуглу можно отдать другую версию сайта или просто оптимизированную картинку. Вы ничего и не заметите. Но Гугл видит всё.

Польза сервиса

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

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

22 актуальных инструмента для проверки скорости загрузки страниц сайта в 2020 году

Мы нашли, протестировали и отобрали для вас эти сервисы. Сверху самые используемые нами, ниже все остальные. Интересные все, наслаждайтесь:

Можно выполнить ту же задачу с помощью полезных инструментов для Chrome — Google Chrome DevTools . А можно и вовсе обойтись без расширений: нажмите Ctrl+Shift+i при открытой вкладке с вашим сайтом в Chrome и в консоли браузера выберите пункт Audits. Затем нажмите Run audits и подождите, пока Lighthouse проанализирует сайт и покажет результаты. Результаты будут именно с вашего устройства и локации. У соседа будут другие показатели.

Какие параметры на самом деле важны при измерении скорости сайта в 2020 году

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

Топ-пост этого месяца:  Где и как создать свой свой блог в интернете бесплатно

Largest Contentful Paint (LCP)

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

Время ответа сервера

Это ваш хостинг. Замерить время ответа сервера можно здесь — ping.loading.express .

Время загрузки первого контента

Это промежуток с момента открытия страницы и начала ее загрузки до появления на ней первого текста или картинки.

Индекс скорости загрузки

Это показатель скорости загрузки содержимого сайта до того момента, когда страница перестает изменяться визуально. То есть пользователь может видеть контент так, как он должен выглядеть.

Время загрузки для взаимодействия

Этот параметр показывает, сколько секунд нужно подождать пользователю для того, чтобы начать кликать по странице и отдельному ее контенту. Если этот показатель 20 секунд, то пользователи будут испытывать трудности со скролом и с кликами.

Время загрузки достаточной части контента

Это временной интервал, через который на веб-странице появляется основная часть ее материала. То есть сайт выглядит уже почти полностью готовым к полноценному просмотру.

Время окончания работы ЦП

Этот показатель Google PageSpeed Insights означает, что процессор подгрузил сайт достаточно для того, чтобы давать отклик на действия пользователя за адекватное время. Это может быть, например, ввод текста в поиске или клик на интерактивный элемент. Длительность ответа страницы не должна превышать 50 миллисекунд.

Приблизительное время задержки при вводе

Это время отклика страницы на действия пользователя в самые активные 5 секунд ее загрузки. Если в этот момент сайт реагирует дольше 50 мс, то создается эффект «подвисания» и посетителю кажется, что ваш ресурс «тормозит».

Чего ждать от обновленного Google PageSpeed Insights в этом году

Старая версия PSI зачастую высоко оценивала очень медленные ресурсы, а вот шустрые, наоборот, незаслуженно принижала. Обновленный сервис выводит на пьедестал действительно важные вещи — время отклика сервера и количество «тяжелого» контента на странице. Все громоздкие «украшения и побрякушки» будут только портить оценку и постепенно потеряют свою популярность.

Не за горами эра по-настоящему реактивных сайтов и хороших специалистов, умеющих их делать.

Заходите на loading.express и ускоряйте ваши сайты!

Слушайте наш подкаст про обновленный Google PageSpeed! ��

Расскажи о статье друзьям!

Подпишись на AX.digital


Получай на свой e-mail все наши новые публикации.

Этот пост написан в соавторстве

Алексей

Многодетный отец. Маркетолог. Основатель агентства интерактивного контента.

Антон

Новости

�� Промокод на InnovationBro: платформа для онлайн-обучения и курсов в 2020 ��

�� Слушайте наш подкаст про систему онлайн-обучения InnovationBro и получайте промокод на скидку в 5000 рублей! Онлайн-образование — прибыльный бизнес, требующий минимальных вложений на старте. Для запуска нужна хорошая платформа, где можно создать дистанционную школу

Еще не зарегистрированы?

Ускорение вашего сайта — непростая задача. Бывает трудно определить, что заставляет ваш сайт работать медленнее. Вашей проблемой может быть что угодно — от замусоренного и плохо написанного кода, до изображений или каких-то других больших элементов страницы. И вам нужно быстро диагностировать и устранить эти проблемы. Поисковики отдают предпочтение сайтам, которые загружаются быстро. Чем быстрее загружается сайт, тем ниже показатель отказов. Если ваш сайт быстрый, у вас больше шансов увеличить трафик в Google, по сравнению с медленными сайтами.

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

Интерфейс Google PageSpeed Insights

Чтобы начать работу, откройте инструмент PageSpeed Insights и введите URL вашего сайта в соответствующее поле, затем нажмите «Анализировать»:

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

Вот как выглядит мой отчет:

Вам будет показана общая оценка вашего сайта (оценка из 100), как для десктопного, так и для мобильного сайта, отдельно по скорости загрузки страницы (быстрая, средняя, медленная) и качеству оптимизации сайта:

  • Low (красный) — свидетельствует о медленной загрузке страницы.
  • Medium (оранжевый) — страница испытывает некоторые проблемы с быстрой загрузкой, но не критические.
  • High (зеленый) — страница загружается быстро.

Скорость загрузки страницы замеряется по Cобытию первой отрисовки контента (FCP) и DOM Content Loaded (DCL):

Отчет состоит из 3 разделов:

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

Давайте пройдемся по всем рекомендациям Google PageSpeed, чтобы понять как их использовать.

Рекомендации Google PageSpeed Insights

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

Нормальным показателем будет 200-500 мс (0,2-0,5 с). Все что выше — Google уже отмечает.

Многое зависит от хостинга, а именно конфигурации и настроек сервера. Если он недостаточно мощный — могут возникать задержки в ответе сервера.

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

Как дополнительный вариант, можно отключить все ненужные службы, работающие на сервере, чтобы увеличить скорость.
Но самая большая разница, которую я заметил, чтобы уменьшить время отклика сервера, достаточно перейти на новую версию PHP, например PHP 7. Разные отчеты в интернете показывают увеличение скорости на 20-50% с переходом на PHP 7.

Читайте также: Как улучшить позиции сайта в мобильной выдаче

Итак, подытожим, что можно сделать для увеличения время ответа сервера:

  • перейти на более современный и быстрый хостинг с поддержкой PHP 7
  • изменить или обновить версию CMS сайта
  • отключить или удалить все ненужные, устаревшие и “тяжелые” плагины на сайте, уменьшив таким образом количество обращений к базе данных и снизив нагрузку на CPU сервера
  • очистить базу данных сайта от лишних записей, что также уменьшит использование CPU

Больше рекомендаций по оптимизации сервера в документации Google:
https://developers.google.com/speed/docs/insights/Server

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

Основная причина медленной загрузки страниц и низких баллов в PageSpeed Insights — большие изображения.

К примеру, для ПС Google все, что превышает 100 Кб считается большим.

Как только я сжал все свои изображения на сайте — получил огромное прибавление в скорости.

Если вы используете WordPress, один из лучших способов сжать изображения, не потратив много времени, использовать плагин. Мой любимый плагин для использования — WP Smush Image Compression and Optimization:

Если ваш сайт страдает из-за большого количества больших изображений, то их просто нужно сжать. Например, при сохранении в Photoshop качество сжатия jpeg-файла должно быть не выше 85%. В большинстве случаев нет никакой потребности указывать столь высокое значение. Некоторые веб-дизайнеры часто упоминают магическое число «51» для сжатия jpeg, но вы можете сами оценить, насколько можете уменьшить качество.

Читайте также: A/B тест рассылки

Бесплатные сервисы для сжатия изображений:

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

Некоторые скрипты и стили, расположенные в самом верху страницы в header, блокируют отображение страницы.

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

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

Кэширование браузера или Leverage browser caching — еще один инструмент, который может оказать большое влияние на скорость страницы. Получение ресурсов для загрузки вашего сайта требует больших усилий. Он требует загрузки каждого элемента изображения и страницы, а затем имеет дело с тяжелым HTML и кодированием. Каждый раз, когда кто-то загружает ваш сайт, этот процесс должен происходить снова и снова. Ваш сайт будет слишком долго загружаться. И именно здесь может помочь кэширование.

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

Он работает путем «запоминания» ранее загруженных ресурсов, поэтому ему не нужно перезагружать их при каждом посещении. Когда посетитель веб-сайта перемещается на новую страницу вашего сайта, все ваши данные, например, логотипы и нижние колонтитулы, больше не нужно загружать. Это приведет к значительному увеличению скорости!

Читайте также: Как использовать og image

5. Сократите JavaScript и CSS

Сведение к минимуму пространства, которое занимает ваше кодирование в формате Java Script, является еще одним важным фактором получения идеального результата от Google. Минимизация — это процесс удаления или исправления ненужных или дублированных данных, не влияя на то, как браузер будет обрабатывать HTML. Он включает в себя исправление кода, форматирование, удаление неиспользуемого кода и сокращение кода, когда это возможно. И еще раз, благодаря потрясающим плагинам WordPress, вам не нужно быть гением программирования, чтобы исправить это.

Желательно начать с валидации всего HTML-кода сайта: https://validator.w3.org

Список сервисов для оптимизации JavaScript:

Список сервисов для оптимизации CSS:

Детальнее об оптимизации JavaScript и CSS файлов в документации Google:
https://developers.google.com/speed/docs/insights/MinifyResources

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

Существует большой объем данных, которые необходимо передавать между серверами и пользователями при доступе к сайту. К счастью, есть способ сжатия передаваемой информации. Он называется — gzip (от GNU Zip).

Пользователи WordPress могут включить gzip сжатие, установив плагин GZip Ninja Speed Compression.Читайте также: Советы для SEO по WordPress.

На многих хостингах gzip-сжаите уже включено по умолчанию, но вы можете проверить включено оно или нет на вашем сайте с помощью сервиса: https://checkgzipcompression.com/

7. Мобильная версия

Все рекомендации выше касались десктопной версии сайта. Для мобильной они мало чем отличаются, но связаны с работой сайта под смартфоны и планшеты. Думаю, не стоит рассказывать вам, насколько важны обе, особенно с введением Mobile first Index в Google. Большую роль тут играет адаптивность и наличие AMP-страниц (Accelerated Mobile Pages). Что выбрать — мобильную версию или качественную адаптивную верстку — читайте в статье: Мобильный поиск в современном SEO

Выводы

В целом, Google PageSpeed Insights — полезный инструмент, но нужно понимать, что он не является “мерилом” скорости сайта, а средством SEO аудита с точки зрения быстродействия сайта. Если нужно проверить реальную скорость — для этого существуют такие сервисы как GTMetrix, Pingdom или WebPageTest. PageSpeed же соберет для вас полезную информацию по проблемным зонам, тормозящие сайт и предоставит чек-лист для оптимизатора.

Так же, на мой взгляд, не стоит гнаться за 100/100 оценками в PageSpeed Insights. В некоторых ситуациях это практически невозможно. Чтобы их достичь, иногда нужно пойти в ущерб функциональности сайта. Да и не все рекомендации могут быть безопасными. Например, если перенести CSS в нижнюю часть страницы, как рекомендует PageSpeed, веб-страница будет сперва подгружаться без стилей, что конечно же увеличит количество отказов.

Самое главное — это выявить и проанализировать основные ошибки сайта и вовремя начать работать в направлении улучшения его быстродействия.

Увеличить скорость загрузки сайта в Google Page Speed своими руками

Для достижения высоких позиций в поиске нужно, чтобы сервис Google Page Speed оценил скорость вашего сайта как высокую

Я замечал, что именно скорость сайта в Гугл имеет решающее значение при прочих равных основных факторах, типа внешних ссылок, внутренней оптимизации и возраста домена.

Поэтому для нормального SEO это очень важный этап, который нужно сделать после создания сайта.

Ну а начинаем мы с проверки текущих значений.

Проверяем скорость загрузки сайта в Google Page Speed

На ваш личный взгляд ваш сайт может летать, но это еще ни о чем не говорит для Гугла.

У него свои критерии проверки скорости сайта, поэтому идем сюда https://developers.google.com/speed/pagespeed/insights/

Вводим адрес сайта и жмем проверить.

Адрес вводите с http или https и при этом убедитесь, что сайт включен в нормальном режиме (не в режиме обслуживания), а robots.txt разрешает индексацию всех важных элементов сайта.

Чем ближе результат к 100 баллам тем лучше

Нормой считается 80 баллов и выше.
Если у вас больше — отлично.
То есть если ваш результат 90 баллов, то дергаться и пытаться любыми способами сделать 100 — не слишком благодарное занятие.

Так что если у вас 80 баллов и выше, то не переживайте, а радуйтесь: большинство проектов имеет 40-50 баллов до оптимизации скорости загрузки.

Я лично считаю, что для проектов с большим функционалом даже 70 баллов по Google Page Speed — вполне приемлемо.

Ну а если у вас меньше 70 баллов, а тем более 20-30, то стоит серьезно задуматься об оптимизации скорости сайта под Гугл.

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

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

Самый простой способ ускорения загрузки сайта для Гугла — это включить GZIP сжатие. Это специальный механизм архивирования данных «на лету», который поддерживается 99,99% хостеров.

Если ваш хостер не поддерживает его, то меняйте хостера (кого могу рекомендовать).

Включить GZIP сжатие в WordPress можно с помощью плагина кэширования WP Fastest Cache.
В Opencart с помощью плагина NitroPack

Если не хотите ставить плагины, то можете модифицировать данные прямо в файле .htaccess, который лежит в корневой папке сайта (как попасть туда по FTP).

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

Должно быть так:

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

Зависит от серверов вашего хостера, их загруженности и прожорливости вашего проекта.

Иногда только один этот показатель может свести на нет все ваши усилия по SEO оптимизации проекта.

Важно проверить этот параметр скорости сайта по Google Page Speed в разное время дня или ночи — вполне возможно в данный момент сервер хостера просто перегружен запросами.

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

Если этот показатель стабильно плохой, то имеет смысл:

  • поставить модули кэширования (я их рекомендую ставить каждому проекту в любом случае!), чтобы снизить нагрузку на слабый хостинг и время формирования страниц сайта.
  • задуматься о смене хостера на того, у которого максимально быстрый хостинг или просто переходите на VPS-сервер. Этого обычно хватает в большинстве случаев для развивающихся проектов.
  • если есть лишняя копеечка, то закажите услугу CDN сервера вот тут (скидка 20% по промокоду «moytop»). Это даст весьма стабильную и быструю работу сайта.
  • самый сложный путь — это внутренняя оптимизация скриптов сайта (вплоть до полной переделке всего сайта). Это рекомендую делать в последнюю очередь, так как очень непросто и нормального специалиста за вменяемые деньги найти почти невозможно.

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

Тоже несложный способ быстро повысить показатель в Google Page Speed.

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

В конце статьи я приведу весь код целиком, сможете скопировать и попробовать добавить к себе в файл вручную через FTP.

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

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

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

Задача — уменьшить качество картинок на сайте, чтобы они занимали меньше места и быстрее грузились.

Сделать это разумнее всего через сам Гугл Пейдж Спид.
Но придется делать это вручную, то есть придется повозиться!

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

Увы, такой программы я не нашел. Пересмотрел всякие просмотрщики типа XnView, Infran, программы типа Caesium, FileOptimizer, Imbatch, ImageOptim, сервисы вроде TinyPng и т.п. — автоматизации нет.

Если кто знает такую программу — напишите в комментах.

Основные требования:

  • сжатие по алгоритму Google (чтобы после загрузки готовых картинок они соответствовали требованиям Гугла по скорости загрузки)
  • минимальные потери качества
  • работа с сохранением структуры папок
  • удаление метаданных и т.п. мусора.
  • автоматическое определение входного и выходного формата

Ну а пока программы нет, то придется делать это «ручками».

Сам Google Page Speed внизу дает ссылку на скачивание уже оптимизированных файлов.

Качаем и распаковываем.

А затем долго и муторно меняем файлы через FTP на сайте, заменяя старую версию на новую.

Увы, но качество картинок JPG теряется значительно.
PNG — качество остается весьма хорошее, почти как в оригинале, а размер уменьшается в 2-3 раза. Так что если у вас много PNG файлов, то будет очень большая экономия.

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

Обновление!
Выход есть для сайтов на WordPress — читайте про формат Webp как его использовать на сайте в пару кликов и получить высокую скорость по картинкам.

Сократите CSS + HTML + JS

В данном случае Google Page Speed по аналогии с картинками просит вас выкинуть из файлов верстки, скриптов и кода страниц все лишнее — пробелы, комментарии и т.п.

Чтобы сами файл стали меньше «весить» и быстрее стала скорость загрузки сайта.

При использовании плагинов кэширования — это всё делается автоматически «на лету». Это наиболее удобный способ, так как не меняет ваш код, а создаёт отдельные — минифицированные файлы CSS и HTML, которые и подсовывает Гуглу и все счастливы.

Если минифицировать файлы в каком-то сервисе, то имейте ввиду, что потом какие-то изменения в таких урезанных файлах будет сделать проблематично.

Код до оптимизации (читабельный)

Код после оптимизации (уже изменения делать сложно)

Скачать уменьшенные файлы «от Гугла» можно там же где и картинки — они в одном архиве будут.

А вот перезаливать ими оригинальные файлы — сами решайте, в любом случае сохраните бекап старых файлов.

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

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

Поэтому я бы постарался тут особенно не заморачиваться и заняться другими факторами скорости сайта в Гугл.

Удалите код JavaScript и CSS

Гугл рекомендует удалять «лишний» по его мнению код скриптов, блокирующий отображение верхней части страницы.

Сложный пункт, который требует знаний и практики.

Вы, конечно, можете добавить возле загрузки каждого JS файла тег async или же поставить скрипт от Гугл для extsrc=, но по моим наблюдениям в 90% это или ничего не дает, или ломает сайт!

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

А так как в том же WordPress обычно 9 из 10 скриптов — это внешние плагины, то там вы вряд ли что-то сделаете, так как они грузятся из своих папок и обновляются по 3 раза на неделю.

И ваши сделанные изменения банально затрутся.

Так что тут я могу рекомендовать:

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


Посмотрите, может и вы что-то забыли? Или чем-то не пользуетесь? Тогда отключайте.

Код для htaccess

Как и обещал, вот код, который формируется плагинами кэширования, но который можно добавить самому в файл .htaccess, который находится в корне сайта.

Какой-то из этих двух вариантов наверняка подойдет.

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

Нужно взять один из кодов и добавить в самое начало вашего файла .htaccess.

Обновить страницу и отправить на повторную проверку скорости загрузки сайта Google Page Speed.

Выводы и итоги

Итак, чтобы увеличить скорость сайта в Гугл проще всего:

  • установить и настроить плагины кэширования для WordPress и Opencart (включить в них все сжатия, сокращения и т.п.)
  • выбрать наиболее быстрого хостера или заплатить за CDN сервис
  • оптимизировать изображения
  • отключить неиспользуемые плагины и скрипты
  • заказать эту услугу на Кворке всего за 500 росс. рублей

Позиции заметно укрепляются, по крайней мере вы исключите этот фактор из тех, которые тормозят рост сайта в поиске.

Плюс высокая скорость сайта в целом даёт дополнительный прирост конверсии, ведь посетители быстрее получают нужную информацию.

Полезные цитаты: Сегодня я богат именно благодаря тому, что я сделал в свободное время (Р.Кийосаки)

Технологии | Как улучшить скорость загрузки сайта: обзор PageSpeed Insights от Google

Алек­сандр Гусев

Раз­ра­ба­ты­ва­ет сай­ты, Ux/UI-канал

Всего материалов: 1

Как улучшить скорость загрузки сайта: обзор PageSpeed Insights от Google

Один из пока­за­те­лей хоро­шей рабо­ты сай­та – ско­рость. И пер­вич­ной загруз­ки стра­ниц, и рабо­ты в целом. Быст­рее загру­зит­ся глав­ная стра­ни­ца – быст­рее поль­зо­ва­тель уви­дит вашу инфор­ма­цию и с боль­шей веро­ят­но­стью оста­нет­ся на сай­те, если при­шел впер­вые. Веб-раз­ра­бот­чик, it-волон­тер Алек­сандр Гусев (сту­дия «Биз­нес-Ате­лье») рас­ска­зал, как про­ана­ли­зи­ро­вать ско­рость сай­та с помо­щью сер­ви­са PageSpeed Insights.

PageSpeed оце­ни­ва­ет рабо­ту сай­та по несколь­ким направ­ле­ни­ям – от раз­ме­ра кар­ти­нок до сте­пе­ни сжа­тия кода. То есть, по сути, дает более-менее пол­ную кар­ти­ну по тем момен­там, на кото­рые сто­ит обра­тить вни­ма­ние. При этом, как ни стран­но, не сто­ит пола­гать­ся на него пол­но­стью и дове­рять всем его реко­мен­да­ци­ям. Какие-то из них выпол­нить весь­ма непро­сто в силу раз­ных при­чин. Но, исхо­дя из мое­го опы­та рабо­ты с сай­та­ми НКО, основ­ной набор пра­вил плюс-минус оди­на­ков и дей­стви­тель­но помо­га­ет уско­рить рабо­ту сай­та.

Сер­вис Page Speed Insights от Google пред­на­зна­чен для про­вер­ки ско­ро­сти загруз­ки стра­ниц сай­та. Скрин­шот экра­на уста­нов­ки.

В первую оче­редь сто­ит ска­зать, как сер­вис в прин­ци­пе ран­жи­ру­ет ито­го­вые пока­за­те­ли. Все оце­ни­ва­ет­ся в бал­лах, от 0 до 100. Чем бли­же к сотне, тем луч­ше. Но с огляд­кой на то, что дове­рять­ся машине и целе­на­прав­лен­но докру­чи­вать сайт до 100 бал­лов не сто­ит, об этом поз­же. Есть три гра­да­ции:

  • 0 – 49 (мед­лен­но): крас­ная зона;
  • 50 – 89 (средне): оран­же­вая зона;
  • 90 – 100 (быст­ро): зелё­ная зона.

Соот­вет­ствен­но, после заме­ра будет пока­за­на оцен­ка ско­ро­сти рабо­ты ваше­го сай­та и даны реко­мен­да­ции, что/как/где мож­но улуч­шить. При­чем отдель­но оце­ни­ва­ет­ся рабо­та сай­та для мобиль­ных устройств и для ком­пью­те­ров. И реко­мен­да­ции так­же выда­ют­ся отдель­ны­ми вклад­ка­ми.

И здесь пере­хо­дим к самым попу­ляр­ным пунк­там, кото­рые вли­я­ют на рабо­ту сай­та.

Количество и размер картинок на сайте

Если на глав­ной стра­ни­це 100 кар­ти­нок и каж­дая весит по мега­бай­ту (пото­му что на мони­то­ре редак­то­ра сай­та она смот­рит­ся кра­си­во, чет­ко и ярко), то раз­мер всех изоб­ра­же­ний лег­ко уле­та­ет за 100 Мб. И одно дело, когда кар­тин­ка нуж­на на сай­те имен­но в боль­шом раз­ре­ше­нии и имен­но в том виде, в каком она выгру­же­на с фото­ап­па­ра­та.

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

Топ-пост этого месяца:  Установка пакетов с помощью клиента Turbo сравнение с Yarn и NPM

Все рав­но в подав­ля­ю­щем боль­шин­стве фото­гра­фия на сай­те будет или совсем ста­тич­на (она не будет откры­вать­ся по кли­ку мыши), или же будет откры­вать­ся во всплы­ва­ю­щем окне, кото­рое мень­ше раз­ме­ра экра­на. А это в боль­шин­стве сво­ем мони­то­ры с раз­ре­ше­ни­ем до 1920 px, кон­крет­ные циф­ры будут вид­ны в ана­ли­ти­ке сай­та. Поэто­му, если раз­мер новост­ной мини­а­тю­ры на уровне кода огра­ни­чен 640px, то загру­жать на это место кар­тин­ку в full-hd раз­ре­ше­нии про­сто ни к чему. Она все рав­но ужмет­ся до ука­зан­ных ей 640px по ширине.

Всю эту опти­ми­за­цию мож­но делать вруч­ную (в любом фото­ре­дак­то­ре), поль­зо­вать­ся онлайн-сер­ви­са­ми (напри­мер, Squoosh) либо пору­чить рабо­ту спе­ци­а­ли­зи­ро­ван­ным пла­ги­нам.

Squoosh – сер­вис Google для сжа­тия фото­гра­фий без поте­ри каче­ства. Скрин­шот экра­на.

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

Отложенная загрузка

Дру­гой момент, кото­рый так­же отно­сит­ся к гра­фи­ке и есть в перечне пунк­тов оцен­ки PageSpeed, это так назы­ва­е­мая lazy load (лени­вая загруз­ка). Хотя мне боль­ше нра­вит­ся вари­ант «отло­жен­ная загруз­ка», так как он точ­нее отра­жа­ет суть. Но даль­ше по тек­сту буду исполь­зо­вать «лени­вую загруз­ку», что­бы не путать.

Смысл этой шту­ки – берем ту же нашу тесто­вую стра­ни­цу, на кото­рой 100 кар­ти­нок. Понят­но, что все эти изоб­ра­же­ния рас­пре­де­ле­ны рав­но­мер­но по всей глав­ной стра­ни­це и нахо­дят­ся на 10 экра­нах про­крут­ки. Так вот, по умол­ча­нию при откры­тии сай­та бра­у­зер загру­жа­ет всю гра­фи­ку, кото­рую най­дет на стра­ни­це. При этом посе­ти­тель сай­та пока что нахо­дит­ся толь­ко на пер­вом экране и видит пер­вые 10 кар­ти­нок. В это же вре­мя осталь­ные 90 усерд­но под­гру­жа­ют­ся, наде­ясь быть уви­ден­ны­ми.

Посе­ти­тель, в свою оче­редь, недо­уме­ва­ет, сколь­ко еще стра­ни­ца будет загру­жать­ся и когда уже это кон­чит­ся? И он либо дожи­да­ет­ся загруз­ки всей этой кра­со­ты, либо ухо­дит с сай­та. Так вот, lazy load под­гру­жа­ет толь­ко те кар­тин­ки, кото­рые нахо­дят­ся в поле види­мо­сти или вот-вот попа­дут в него.

Поэто­му при таком вари­ан­те посе­ти­тель сай­та видит толь­ко пер­вые 10 кар­ти­нок и для него стра­ни­ца уже загру­зи­лась. Остав­ши­е­ся 90 сидят себе тихо и не тре­во­жат бра­у­зер тре­бо­ва­ни­ем сроч­но пока­зать их. Как толь­ко посе­ти­тель нач­нет про­кру­чи­вать стра­ни­цу вниз, под­гру­зят­ся сле­ду­ю­щие 10 кар­ти­нок. И так далее по мере про­крут­ки будут под­гру­жать­ся бли­жай­шие кар­тин­ки. За счет это­го умень­ша­ет­ся вес стра­ни­цы и сокра­ща­ет­ся ско­рость ее загруз­ки.

Весь­ма и весь­ма полез­ная функ­ция, кото­рая в PageSpeed назы­ва­ет­ся «отло­жи­те загруз­ку скры­тых изоб­ра­же­ний». Осо­бен­но она акту­аль­на для длин­ных стра­ниц с боль­шим коли­че­ством гра­фи­ки, лен­дин­гов, новост­ных стра­ниц.

Использование webp

Дру­гой пункт, каса­ю­щий­ся гра­фи­ки, это «исполь­зуй­те совре­мен­ные фор­ма­ты изоб­ра­же­ний». Если вкрат­це, то не исполь­зуй­те bmp, а исполь­зуй­те webp. Это хоть и край­но­сти, но доволь­но близ­кие к истине. У каж­до­го фор­ма­та изоб­ра­же­ния есть свое пред­на­зна­че­ние, и исполь­зо­вать png в тех кар­тин­ках, где нет про­зрач­но­сти, не сто­ит, сго­дит­ся и jpg. Тот же webp, кото­рый реко­мен­ду­ет сер­вис, конеч­но, хорош. Совре­мен­ный, с хоро­шим сжа­ти­ем, но при этом его под­держ­ка бра­у­зе­ра­ми еще не пол­ная.

WebP – фор­мат сжа­тия изоб­ра­же­ний с поте­ря­ми и без потерь каче­ства, пред­ло­жен­ный Google. Скрин­шот экра­на.

К при­ме­ру, бра­у­зер Safari этот фор­мат не пони­ма­ет. При­чем ни его настоль­ная вер­сия, ни мобиль­ная. Поэто­му посе­ти­те­ли ваше­го сай­та, зашед­шие с iPhone, кар­ти­нок не уви­дят вовсе.

Кеширование

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

Использование плагинов

Отдель­но сто­ит ска­зать про исполь­зо­ва­ние пла­ги­нов на сай­те. Зача­стую, решая зада­чи на it-волон­те­ре, я вижу мно­го уста­нов­лен­ных на сай­те пла­ги­нов. При этом часть из них будет неак­тив­на, дру­гая не обнов­ле­на, тре­тья будет актив­на, но от этих мож­но спо­кой­но изба­вить­ся. По ходу дела уточ­няю про пла­ги­ны и выяс­ня­ет­ся, что вла­де­лец сай­та осо­бо-то и не в кур­се, что там за пла­ги­ны сто­ят и кто из них за что отве­ча­ет. Как раз в таких ситу­а­ци­ях при­брать­ся в этом раз­де­ле сай­та про­сто необ­хо­ди­мо. Даже не столь­ко из-за ско­ро­сти рабо­ты сай­та, а пото­му что это надо сде­лать.

Правильные приоритеты

Важ­ный момент для пер­фек­ци­о­ни­стов: «хочу, что­бы у мое­го сай­та было 100 бал­лов из 100». Оно, конеч­но, при­ят­но, когда ваше­му сай­ту выда­ли 100 бал­лов и в мобиль­ной вер­сии, и для ком­пью­те­ров, но зача­стую овчин­ка не сто­ит выдел­ки. Какие-то пунк­ты сер­ви­су могут не нра­вить­ся, и все тут. И сайт уже нор­маль­но рабо­та­ет, и гру­зит­ся быст­ро, а PageSpeed’у все мало и мало.

На при­ме­ре мое­го лич­но­го фото­сай­та alexangusev.ru инте­рес­но наблю­дать как раз эту кар­ти­ну. На сего­дня я докру­тил его до 91 бал­ла для мобиль­ной вер­сии и 99 бал­лов – для ком­пью­тер­ной вер­сии. При этом это сайт с фото­гра­фи­я­ми, то есть каче­ство изоб­ра­же­ний для меня очень и очень важ­но. На сего­дня все фото, что есть на сай­те, я про­пу­стил через тот же Squoosh и оста­вил на мини­маль­но удо­вле­тво­ря­ю­щих меня уров­нях. И сде­лав этот в пер­вый раз, был несколь­ко удив­лен, когда PageSpeed вновь выдал мне реко­мен­да­цию «настрой­те под­хо­дя­щий раз­мер изоб­ра­же­ний». Но, пар­дон, у меня нет цели сде­лать все фото пик­сель­ны­ми в уго­ду сер­ви­су, что­бы полу­чить желан­ную сот­ню бал­лов. Поэто­му сей­час этот пункт я уже мыс­лен­но про­пус­каю и из реко­мен­да­ций для себя исклю­чаю.

Так же и для ваших сай­тов – если какой то пункт из реко­мен­да­ций PageSpeed идет враз­рез с ваши­ми целя­ми или жела­ни­я­ми и при этом сайт загру­жа­ет­ся и рабо­та­ет нор­маль­но, то оставь­те как есть – не нуж­но пол­но­стью дове­рять­ся про­грам­ме.

Резю­ме: каж­дый пункт диа­гно­сти­ки сер­вис сопро­вож­да­ет неболь­шим опи­са­ни­ем по воз­мож­но­стям опти­ми­за­ции и ссыл­ка­ми либо на Кодекс WordPress, либо на ката­лог пла­ги­нов с уже гото­вы­ми их вари­ан­та­ми для исполь­зо­ва­ния. Как раз одним из таких пла­ги­нов явля­ет­ся Autoptimize – он поз­во­ля­ет про­стым про­став­ле­ни­ем гало­чек внут­ри акти­ви­ро­вать ту или иную настрой­ку, напря­мую вли­я­ю­щую на пока­за­те­ли PageSpeed. Это и вклю­че­ние лени­вой загруз­ки для кар­ти­нок, и сжа­тие и кеши­ро­ва­ние скрип­тов, пере­нос скрип­тов в футер и сжа­тие HTML. Широ­кое поле для твор­че­ства, глав­ное, что­бы не во вред сай­ту.

Autoptimize пред­на­зна­чен для опти­ми­за­ции сай­та на WordPress. Скрин­шот экра­на.

Само­му пла­ги­ну вполне сто­ит дове­рять, если:

  • он сов­ме­стим вплоть до вер­сии WordPress 5.2.3 (на сего­дня акту­аль­ней неку­да);
  • у него более мил­ли­о­на актив­ных уста­но­вок (не абы как);
  • послед­нее обнов­ле­ние было 4 дня назад (по состо­я­нию на 16.09.2020);
  • у него 4,7 бал­ла из 5 воз­мож­ных (по оцен­кам поль­зо­ва­те­лей).

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

К тому же за 4 года, что я помо­гаю НКО как it-волон­тер, не при­пом­ню зада­чи имен­но на улуч­ше­ние пока­за­те­лей рабо­ты сай­та по PageSpeed. А это очень инте­рес­ная рабо­та. Поэто­му если вы еще не пуб­ли­ко­ва­ли зада­чи на it-волон­те­ре, то самое вре­мя.

Оптимизация скорости загрузки сайта по Google PageSpeed Insights

Краткое содержание статьи:

PageSpeed Insights — инструмент от Google, анализирующий производительность страницы на мобильных и десктопных устройствах с предоставлением рекомендаций по их улучшению. Зачем его использовать? В лидирующих поисковых системах скорость сайта является важным критерием ранжирования. От того, насколько быстро произошла загрузка страницы, зависят не только трафик и позиции сайта, но и конверсия, глубина просмотров, лояльность пользователей и прочие важные параметры интернет-маркетинга.

Кратко об изменениях в работе инструмента

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

С обновлением инструмент стал уделять больше внимания скорости страницы, где основной метрикой стала именно она. Благодаря этой оценке, инструмент может выделить самый быстрый и самый медленный сайт, и в зависимости от их показателей начислить соответствующие баллы вашему ресурсу. Начисление баллов осталось прежним – по шкале от 0 до 100, но их подсчет в корне изменился. Теперь оценка происходит с помощью Lighthouse. Lighthouse – это автоматизированный open-source инструмент с открытым исходным кодом для аудита сайтов. Этот же инструмент доступен в Google Chrome в качестве расширения.

Как пользоваться и что показывает PageSpeed Insights

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

Первое, что вы увидите — это оценка эффективности страницы. Она определяется с помощью Lighthouse, о котором мы писали выше. Эффективность загрузки страницы измеряется по шкале:

  • 90 или выше – быстрая;
  • от 50 до 89 – средняя;
  • ниже 49 – медленная.

Данные наблюдений и Origin Summary

Далее располагаются данные наблюдений и Origin Summary, которые отображаются в том случае, если хватает данных для статистики. В целом они показывают сводную информацию о скорости проверяемой страницы в сравнении с другими страницами, по которым были собраны данные за последние 30 дней. Origin Summary отличается от «Данных наблюдений» тем, что оценивает скорость всех страниц вашего сайта.

На скриншоте мы можем видеть значения FCP и FID в процентах и секундах.

  • Первая отрисовка контента (FCP) – это время, спустя которое на экране отображается первый контент. Чтобы улучшить значение, необходимо работать над количеством внешних ресурсов CSS, JS; HTTP-кэшированием; размером текстов; загрузкой CSS, JS. FCP должен быть не выше 2500 мс.
  • Первая задержка ввода (FID) – это время, в котором происходит первое взаимодействие пользователя с вашим сайтом и отклик браузера на это взаимодействие. По сути, это время, в котором пользователю приходится ждать, пока браузер отреагирует на его взаимодействие (например, клик), и, если оно оказывается долгим, пользователя уходит с ресурса. FID не должен превышать 250 мс.

Имитация загрузки страницы

Имитация загрузки страницы оценивается по 6 показателям:

  • Время загрузки первого контента (FCP).
  • Индекс скорости загрузки – показывает, насколько быстро контент страницы отображается пользователю.
  • Время загрузки для взаимодействия (TTI) – время, в течение которого страница становится готова к взаимодействию с пользователем.
  • Время загрузки достаточной части контента (FMP) – время, по истечении которого становится виден основной контент страницы.
  • Время окончания работы ЦП (или первый простой процессора) – измеряет за какое время страница становится минимально готова к взаимодействию, причем поток страницы становится достаточно свободен для обработки ручного ввода.
  • Максимальная потенциальная задержка (FID).

«Оптимизация», «Диагностика» и «Успешные аудиты»

В разделе «Оптимизация» указывается то, что поможет ускорить загрузку проверяемой страницы. Раздел «Диагностика» – это дополнительная информация о соответствии страницы рекомендациям по производительности. В целом он также содержит информацию по оптимизации тех или иных показателей, поэтому уделить внимание необходимо обоим разделам.

Достоинствами «Оптимизации» и «Диагностики» является то, что они определяют конкретные места вашего сайта, которые необходимо доработать, например CSS, изображения, шрифты и пр.

Раздел «Успешные аудиты» показывает параметры, которым соответствует ваша страница. Здесь остаётся только облегченно вздохнуть и порадоваться, что это дорабатывать не нужно.

Как избавиться от ошибок в PageSpeed Insights

Устраните ресурсы, блокирующие отображение

Здесь указываются все ссылки на ресурсы JS, CSS, HTML которые препятствуют загрузке контента страницы. Инструмент показывает какой размер у файла сейчас и размер, который будет после внедрения оптимизации.

Решить проблему можно следующими способами:

  • Ограничить объем ресурсов, которые отображаются в верхней части страницы, либо перенести их в футер сайта. Перенос подходит не для всех ресурсов, так как многие из них должны располагаться в пределах тега head.
  • Для JS рекомендуется указывать асинхронную загрузку. Либо другой вариант: синхронно загружать в head только те JS-ресурсы, которые могут требоваться для других скриптов, а остальные перенести в конец тега body.
  • Если добавить в ссылку подключения стилей значение preload атрибута rel и событие onload, то получится асинхронная загрузка стилей, пример:

Это даёт возможность обработать CSS, не блокируя рендеринг. Как только ресурс загрузится благодаря onload, скрипт заменит значение preload атрибута rel на stylesheet и применит стили на странице.

  • Если есть стили, которые нужны только для подгружаемого контента, то их лучше загружать динамически с помощью скриптов стоящих в конце тега body.
  • Разбейте внешний CSS на несколько файлов по медиа типам и медиа запросам, тем самым избегая загрузки больших CSS-документов. Например, пометкой media=»print» в теге link сообщите браузеру, что этот файл применялся только, если страница уходит в печать. Пример:

  • На первом экране должен загружаться только важный контент, поэтому нужно уменьшить размеры JS, CSS, HTML: перенести скрипты и стили в единые файлы; удалить ненужные скрипты и стили, загружать изображения через CSS, удалить лишние теги, комментарии и пр.
  • С самописными сайтами будет более-менее понятно, что и куда переносить, но на сайтах с готовыми CMS это будет сделать сложнее. В этом случает помогут следующие плагины:

    • Для WordPress плагины Autoptimize, Speed Booster Pack, W3 Total Cache, JCH Optimize.
    • Для Joomla плагины JCH Optimize.
    • Для Drupal плагины JCH Optimize.
    • В Bitrix это реализуется в админке в разделах: Настройки > Настройки продукта > Настройки модулей > Главный модуль «Оптимизация CSS».
    • Opencart плагины Simple Minify, SourceCode Compressor, MCJ.

    Также можно воспользоваться онлайн-инструментами для сжатия (минификаторами) JS и CSS: websiteplanet.com «JS & CSS Minifier», csscompressor.com.

    Используйте современные форматы изображений

    В этом разделе инструмент рекомендует использовать форматы изображений JPEG 2000, JPEG XR и WebP, которые превосходят JPEG и PNG в характеристиках сжатия и сохранения качества.

    Но есть недостаток у данных форматов – это проблемы с поддержкой версий в популярных браузерах. В России популярными браузерами являются Google Chrome, Яндекс.Браузер, Safari, Opera и Firefox. Например: WebP не поддерживается Safari, JPEG 2000 не поддерживается Google Chrome, Firefox и Opera, а JPEG XR вообще никаким из перечисленных браузеров.

    Исходя из приведенных таблиц наиболее лучшим оказывается формат WebP (но всё еще не универсальным), который можно получить следующим образом:

    • Онлайн-конвертеры: convertio.co, image.online-convert.com, ru.inettools.net и пр.
    • Плагин AdobeWebM для Adobe Photoshop CC.
    • Плагины для CMS:
      1. для WordPress плагин WebP Express.
      2. для Bitirx для поддержки WebP проще доработать код. Также в Bitrix Marketplace к приобретению доступны решения «Ускорение загрузки сайта — оптимизация css, js и картинок» и Ammina Optimizer.
      3. Для Joomla ранее был доступен плагин WebP Joomla Yireo, но был удалён, может быть вам удастся его найти на просторах интернета.
      4. Для Opencart есть платное дополнение «Image COMPRESSOR & Watermark & WebP & Lazy Load etc. by Sitecreator».
      5. Для Drupal модули «WebP By Bart Vanhoutte», «ImageAPI Optimize WebP».

    Настройте эффективную кодировку изображений

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

    Перед сжатием, убедитесь, что вы выбрали подходящий тип файлов. Существует несколько типов файлов изображений:

    • PNG — изображения более высокого качества, но имеющие больший размер файла. Был создан как формат изображения без потерь качества.
    • JPEG — использует оптимизацию с потерями и без потерь. Есть возможность регулировки уровня качества и размера файла в балансе.
    • GIF — использует только 256 цветов. Используется только сжатие без потерь. Считается, что GIF – лучший вариант для анимированных изображений, но у Google на этот счет другое мнение, см. раздел «Используйте видеоформаты для анимированного контента».

    Оптимизация изображений может происходить следующим образом:

    • Вручную с помощью Adobe Photoshop и с использованием экшенов.
    • Пакетное преобразование с помощью FastStone Image Viewer.
    • Онлайн-сервисов: tinypng.com, kraken.io, compressor.io, imagecompressor.com.
    • С помощью доработки кода, например в Bitrix.
    • С помощью плагинов:
      1. для WordPress плагины Robin image optimizer; EWWW Image optimizer, WP smush.
      2. Для Bitrix решения Image Optimizer, «Оптимизация картинок – автоматически и без сторонних сервисов».
      3. Для Joomla плагины JCH Oprimize, Imgen, Image Recycle.
      4. Для Drupal плагины JCH Optimize, ImageMagick, Image Optimize (or ImageAPI Optimize).
      5. Opencart модуль Image Optimizer, дополнение «Сжатие изображений для OpenCart 2.x».

    Удалите неиспользуемый код CSS

    Чем больше на сайте неиспользуемого кода CSS, тем больше времени необходимо браузеру для их подгрузки. В целом этот пункт связан с разделом «Устраните ресурсы, блокирующие отображение» о котором говорилось выше.

    Если вы знаете, что на вашем сайте есть неиспользуемые стили, то следует удалить их. Сюда же относится перенос стилей вниз (в пределы тега body), которые не нужны для отображения важного контента на первом экране.

    Сократите время ответа сервера (время до получения первого байта)

    Если страницы сайта медленно грузятся, стоит обратить внимание на отклик времени сервера. Google Page Speed недоволен этим показателем, если он более 600 мс, в идеале это должно быть 200 мс и меньше. Для дополнительной оценки можно использовать онлайн-инструмент Pingdom.

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

    • Тяжелые плагины или их большое количество могут влиять на загрузку сервера – отключите те, которые не используются.
    • Перейдите на новую версию PHP – PHP 7 (предварительно проверьте, что ваш хостинг его поддерживает).
    • Оптимизируйте таблицы базы данных MySQL.
    • Если используете старую версию CMS, лучше обновите её до последней версии.
    • Включите кеширование сайта браузером.
    • Оптимизируйте код, например, с помощью инструмента gtmetrix.com.
    • Установите веб-сервер nginx и настройте его работу с Apache таким образом, чтобы страницы отдавали браузеру пользователя Apache, а статический контент – nginx. Либо полностью замените Apache на nginx.
    • Используйте GZIP-сжатие, которое позволяет на стороне сервера архивировать файлы, а распаковывать уже в вашем браузере.
    • Выполните рекомендации из разделов Google PageSpeed Insights, описанных выше.

    Дополнительные варианты плагинов для популярных CMS, которые помогут в сокращении ответа сервера:

    1. Для WordPress плагины WP Super Cache, PHP Speedy WP, Optimize DB.
    2. Для Bitrix предлагаем варианты, в которых можно ознакомиться, как ускорить сайт.
    3. Для Joomla уже упоминаемый плагин JCH Optimize, а также включение кеширования в админ-панели.
    4. Для Drupal модули «Authenticated User Page Caching (Authcache)», «CSS GZIP», «JavaScript Aggregator», «eAccelerator».
    5. Для Opencart модули Smart Optimizer, Turbo OpenCart.

    Уменьшите размер кода JavaScript

    Все, что поможет справиться с этой проблемой, ищите выше, в разделе «Устраните ресурсы, блокирующие отображение».

    Настройте показ всего текста во время загрузки веб-шрифтов

    Данный раздел сообщает о том, что пользователи сайта не увидят ваш контент до тех пор, пока шрифты не будут подгружены. Добавьте в тег link параметр display=swap, таким образом браузер будет отображать дополнительный шрифт, пока основной шрифт не будет загружен полностью.

    Далее в стилях к основному шрифту необходимо подключить дополнительный шрифт в font-family. Например:

    Если же вы отдаёте предпочтение локальным шрифтам, то в @font-face добавьте свойство «font-display: swap;»:

    Минимизируйте работу в основном потоке

    В этом разделе подразумевается оптимизация кода JS: удалите неиспользуемый JS, первым загружайте только необходимый, сожмите данные JS. Более подробно смотрите в разделе «Устраните ресурсы, блокирующие отображение».

    Сократите размер структуры DOM

    DOM (от англ. Document Object Model – «объектная модель документа») может нанести ущерб производительности страницы, если оно имеет большое дерево. Дерево DOM состоит из объектов, которые называются узлами, например это элементы HTML, текстовое содержимое, закомментированный код и пр. Оптимальное количество узлов в DOM 1500, глубина – 32 узла, количество дочерних и родительских элементов – менее 60.

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

    Задайте правила эффективного использования кеша для статических объектов

    При повторных посещениях HTTP-кэширование поможет ускорить загрузку страниц. Это означает, что при следующем посещении браузер будет использовать то, что уже получил ранее. Для оптимизации необходимо настроить сервер, чтобы происходило кеширование статических файлов, например на 1 год. Опять же, можно использовать плагины, о которых мы говорили выше в разделе «Сократите время ответа сервера».

    Сократите время выполнения кода JavaScript

    Здесь снова говорится об улучшении кода JS – необходимо уменьшить размер фрагментов кода JS: использовать только тот, который нужен для правильной работы сайта; сократить, сжать данные кода и кешировать. Более подробно о том, что может помочь смотрите в разделе «Устраните ресурсы, блокирующие отображение».

    Сократите глубину вложенности критических запросов


    В этом разделе говорится о цепочке критических запросов, которые позволяют браузеру загружать страницу как можно быстрее, с определением приоритетов загружаемых ресурсов и порядком их загрузки. Например, браузер обрабатывает HTML, к нему подключены CSS ресурсы, он начинает обрабатывать их, а далее обнаруживается, что к HTML подключены и шрифты, для обработки которых ему снова нужно отправить запросы. Решить проблему можно добавлением в тег link значение rel=preload. Более подробно смотрите выше, в разделе «Устраните ресурсы, блокирующие отображение».

    Настройте подходящий размер изображений

    Помимо рекомендации сжатия всех изображения без потери качества, есть еще несколько вариантов исправления данной ошибки в PageSpeed Insights:

    • Внедрение адаптивных изображений, у которых есть несколько версий размеров.
    • Использование SVG – векторный формат изображений.
    • Адаптивные изображения на основе клиентских подсказок, которые сообщают браузерам информацию о ширине области просмотра, ширине изображения и пр.

    Отложите загрузку скрытых изображений

    При заходе на сайт, посетителю отображается первый экран. Если на странице большое количество изображений, все они будут грузиться, независимо от того, видит их пользователь или нет. Чтобы пользователь не закрыл страницу, необходимо сделать, чтобы загрузка происходила максимально быстро, для этого рекомендуется использовать lazy loading или «ленивая загрузка» при которой изображения будут подгружаться асинхронно. Lazy loading можно реализовать несколькими способами:

    • Использование Intersection Observer API.
    • Скрипты Lazy loading (David Walsh), BLazy, Lazy Load XT jQuery, Yall, Lazysizes.
    • Для WordPress плагины Lazy Load, a3 Lazy Load, Rocket Lazy Load.
    • Для Bitrix решение «Ленивая загрузка изображений».
    • Для Joomla плагин LLFJ Lazy Load.
    • Для MODX плагины Lazy load, Lazy image.
    • Для Opencart плагин Lazy Load Images.

    Уменьшите размер кода CSS

    Сокращение CSS может улучшить загрузку страниц вашего сайта. Для сжатия CSS вы можете использовать различные сервисы, например: cssresizer.com, csscompressor.com, css-minifier.com, а также плагины.

    Подходящие для этого решения мы перечислили в разделе «Устраните ресурсы, блокирующие отображение» выше.

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

    Для текстового содержимого рекомендуем использовать алгоритмы сжатия GZIP, Deflate или Brotli на вашем сервере. GZIP является наиболее распространенным, так как поддерживается большинством браузеров. На некоторых хостингах по умолчанию включено сжатие. Также можно воспользоваться плагинами по сжатию текста, которые мы перечислили в ранее упоминаемых разделах.

    Используйте предварительное подключение к необходимым доменам

    Для быстрого соединения с внешними ресурсами, указанными в коде вашего сайта (напр. Google Fonts) рекомендуется добавлять подсказки preconnect или dns-prefetch, чтобы сообщить браузеру, что загрузка должна быть установлена как можно быстрее. Примеры:

    Избегайте большого количества переадресаций

    При цепочках редиректов возникает замедление скорости загрузки страницы, так как браузеру приходится несколько раз запрашивать ресурс. В данном разделе инструмент укажет ресурсы, которые перенаправляются, также их можно найти с помощью программы Netpeak Spider, redirectdetective.com, redirect-checker.org и пр. онлайн-сервисами. Чтобы найти, где задана цепочка редиректов проверьте: .htaccess, nginx.config, PHP, HTML и JavaScript.

    Топ-пост этого месяца:  Создание и продвижение мероприятий в ВК - оформление, инвайтинг

    Настройте предварительную загрузку ключевых запросов

    Предварительная загрузка позволяет быстрее отобразить страницу. Реализовать её можно путём добавления в тег link значение rel=»preload». Более подробно было рассмотрено выше, в разделе «Устраните ресурсы, блокирующие отображение».

    Используйте видеоформаты для анимированного контента

    Для повышения производительности вашего сайта не рекомендуется использовать большие GIF-файлы с анимацией, лучше – использовать форматы MPEG4, WebM. Для конвертации можно воспользоваться сервисами: convertio.co, ezgif.com, onlineconvertfree.com и пр.

    Предотвратите чрезмерную нагрузку на сеть

    Чрезмерная нагрузка на сеть происходит из-за неоптимизированных ресурсов вашего сайта. Это могут быть: изображения, стили, скрипты, текст и пр. Чтобы исправить эту ошибку, рекомендуем ознакомиться с вышеописанными разделами. В целом здесь поможет сжатие и сокращение текста, HTML, JS, CSS, смена формата изображений на WebP и включение кеширования.

    Итоги. Многие рекомендации инструмента по оценке скорости загрузки сайта Google PageSpeed Insights перекликаются между собой. Исправив наиболее серьезные ошибки, которые включают в себя не один вид доработок, вы исправите и ряд других, которые в последствии будут отображаться в успешных аудитах инструмента. Важно помнить, что достижение 100 балов не должно наносить ущерб ни функционалу, ни дизайну сайта. Стремление к высокому баллу может быть не оправданным. И помните, что PageSpeed Insights содержит лишь рекомендации по улучшению вашего сайта, однако и без внедрения некоторых из них, ваш сайт может отлично функционировать и приносить доход.

    Page Speed Insights

    Бесплатный онлайн-сервис Google Page Speed Insights – это комплексный инструмент для определения фактической производительности и выбора эффективных путей оптимизации сайта. Удобен для использования как на компьютере, так и на мобильном устройстве. Не показывает абсолютную скорость страницы, а анализирует эффективность динамики загрузки и отрисовки в браузере клиента. При этом учитываются только не зависящие от типа интернет-соединения факторы: JavaScript, CSS, структура HTML, конфигурация сервера, размер изображений и т. д.

    Начало работы

    Чтобы получить подробный отчет о производительности, необходимо перейти на официальный сайт Page Speed Insights и вставить ссылку на исследуемый ресурс в строку «Ведите URL веб-страницы». После этого нужно нажать кнопку «Анализировать».

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

    Особенности Google Page Speed Insights

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

    Показатель Page Speed (скорость страницы) демонстрирует динамику в секундах с начала первой отрисовки контента (FCP) до момента загрузки HTML и постройки DOM-дерева (DCL), т. е. полной инициализации интерфейса для работы пользователя. Чем меньше это время, тем быстрее произойдет отображение сайта в браузере. Чтобы все ресурсы были в равных условиях, сервис Google Page Speed Insights использует в качестве отправной точки усредненный показатель скорости загрузки по сети, выставляя одну из оценок:

    • Slow – медленная (красный цвет);
    • Average – нормальная (оранжевый);
    • Fast – быстрая (зеленый).

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

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

    лучше исправить, если есть возможность

    Также онлайн-сервис Page Speed Insights использует 100-балльную шкалу для оценки веб-ресурсов по времени выдачи результатов на поисковый запрос и полной загрузке страницы. Всего предусмотрено три интервала скорости:

    • Low (низкая) – 0–59 баллов;
    • Medium (средняя) – 60–79;
    • Good (хорошая) – 80–100.

    Низкая оценка веб-ресурса практически всегда указывает на большие недочеты в организации процесса рендеринга, которые требуют обязательного устранения.

    Оценка Page Speed Insights и SEO-продвижение

    Google использует около 200 факторов для определения рейтинга сайта, среди которых наиболее важным является ключевое слово в начале тега title, объем и релевантность контента поисковым запросам, плотность и расположение ключевых слов, абсолютная скорость загрузки. Показатель Google Page Speed Insights непосредственно влияет на выдачу 1–3 результатов из 100. В то же время в официальных требованиях системы указано, что «сайт должен работать максимально быстро». Этот фактор благоприятно влияет на поведенческую историю веб-ресурса и значительно повышает его рейтинг. Именно поэтому эффективное СЕО-продвижение сайта требует нормальных показателей Page Speed Insights, но не обязательно со значением Good и Fast. Ярким подтверждением этому факту является мегапопулярный ресурс Amazon.com со средним уровнем оптимизации и высоким рангом.

    Разработчики уделили огромное внимание функциональности и внешнему виду сайта в ущерб минимизации времени на полную загрузку картинок и стилей.

    Рекомендации Google Page Speed Insights

    Кроме подробного отчета о производительности веб-ресурса, сервис предлагает и различные варианты для ее улучшения. Например, сайт Amazon.com получил следующие предложения по оптимизации.

    Использование кеша браузера. Практичный и полезный совет по применению заголовков кеширования для хранения копий статических файлов (не меняются от одного поискового запроса к другому) в браузере пользователя.

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

    Удаление JavaScript, блокирующего рендеринг. По возможности организуйте выполнение интерактивных сценариев веб-страниц в футере сайта (footer – нижняя часть) или сделайте асинхронную загрузку шапки и JavaScript. Также часть кода можно перенести в основную HTML-разметку. Здесь важно участие профессионала, чтобы не нарушить корректную работу функционала сайта. Эта рекомендация не подходит для ресурсов, использующих готовый шаблон WordPress.

    Оптимизация Cascading Style Sheet. Существует возможность разделения CSS-кода для приоритетной выгрузки стилей оформления первого экрана в шапку сайта и добавления остальных каскадных таблиц в футер. Здесь также нужно участие верстальщика, чтобы избежать будущих проблем в работе сайта.

    Сжатие изображений. Эффективным способом увеличения скорости загрузки сайта является оптимизация размера картинок и фотографий. Для этого можно использовать редактор Adobe Photoshop или специализированные онлайн-сервисы: Compressor.io, TinyPNG, Optimizilla, Web Resizer. Рекомендуемая ширина изображения в формате jpeg, gif или png – 400–600 пикселей при весе 35–75 Кб.

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

    Как увеличить скорость загрузки WordPress. Сервис Google PageSpeed Insights

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

    В этой статье мы рассмотрим особенности и решения самых распространенных проблем, выявленных сервисом PageSpeed Insights. И в конечном результате получим оценку не менее 85-95 баллов, что в сущности должно улучшить скорость загрузки WordPress.

    Оптимизируем WordPress по сервису PageSpeed Insights

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

    Записываем или сохраняем наши результаты и начинаем работу над сайтом.

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

    Первое с чего начнем, так это с включения gzip сжатия, чтобы уменьшить объем данный в передачи между отправителем и получателям. Такая функция, по идее, активирована по умолчанию на многих хостингах. Если она у вас не активирована, тогда вставляем следующий код в конфигурационный файл .htaccess .

    Код для сервера Nginx:

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

    Это один из пунктов, где встречается не совсем правильная рекомендация. Речь идет не обо всех файлах, подключаемых в теге head, а только о тех, которые отвечают за корректность отображения сайта. Если мы перенесем, допустим, основной файл стилей в самый низ, то сайт в первые секунды загрузки будет загружаться без стилей. Стало быть, пользователь увидит беспорядочную страницу с разброшенными веб-элементами и абсолютно без стилей (т.е. «голую»).

    Поэтому не нужно менять подключение стилей сайта и переносить их в подвал или ставить в последнюю очередь. А вот насчет остальных есть смысл пересмотреть их расположение. У плагина Better WordPress Minify есть встроенный менеджер файлов css и js. С помощью его можно легко менять подключение скриптов, то есть переносить из head в footer.

    Подключение скриптов

    Что касается подключения своих скриптов к теме, то лучше всего объединять их в один файл, чтобы уменьшит количество запросов. А после подключить не через тег script , как обычно, а через файл functions.php в футер сайта, таким образом:

    Подключение скрипта только на определенной странице.

    Подключение скрипта во всех типах записей, только не на главной.

    Подключение скрипта только внутри статьи.

    Все довольно просто: меняем только функцию условия. Для подключения из дочерней темы нужно изменить функцию пути на эту get_stylesheet_directory_uri() .

    Подключение стилей

    Стили в WordPress подключаются с помощью функции wp_enqueue_style в заголовок сайта. В принципе, это правильно, поэтому у функции нет параметров для изменения место подключения. Но если уж очень нужно, чтобы стили подключались в подвале сайта, то можно сделать так:

    А с помощью условных функций, которые использовались чуть выше, устанавливаем определенные места подключения.

    Подключение библиотеки jQuery

    По умолчанию WordPress подключает библиотеку из своей директории и также в заголовок сайта. Если нам нужно изменить версию jQuery или зарегистрировать ее в подвале, тогда мы вначале удаляем старую при помощи функции wp_deregister_script и тут же регистрируем свою.

    Отключаем стили плагинов

    Многие плагины подключают свои стили в шапке сайта, где могут идти даже первую очередь загрузки. Это не совсем правильно, тем более, если они не в приоритете. Можно поступить так: находим в файлах плагина подключение стилей.

    Пример из WP-Pagenavi

    Копируем его уникальный идентификатор – это wp-pagenavi, а после в файле functions.php вашей темы вставляем такой код:

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

    Переносим все скрипты в footer

    Есть такой небольшой плагин Footer JavaScript , который написал автор Vladimir Prelovac. Он переносит все подключения, даже те, которые не нужно, в низ сайта. Используйте на свое усмотрение.

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

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

    Разве что в виде исключений, если того требует желание добиться максимальной оценки. Имеется пару вариантов: отказаться от их использования, переместить скрипты на свой сайт. Для Google аналитика есть специальный плагин Complete Analytics Optimization Suite , который позволит загружать библиотеку локально.

    Насчет Яндекса чуть сложнее, так как для него нет подобных плагинов. Можно провести лишь эксперимент: скачать скрипт метрики по адресу https://mc.yandex.ru/metrika/watch.js, сохранить его на сайте, а в подключении изменить путь скрипта. Насколько правильно он будет работать – не знаю. Это просто один из вариантов.

    А пока включим кэширование браузера. Для этого поместите ниже представленный код в файл .htaccess

    Код для сервера Nginx:

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

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

    Для этого есть специальные программы, сервисы и тот же PageSpeed Insights, где по окончании проверки дается ссылка на скачивания оптимизированных файлов.

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

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

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

    Сокращение JavaScript, CSS, HTML

    Сокращение файлов позволяет уменьшить вес кода путем удаления всех ненужных деталей, таких как пробелы, переносы, комментарии и прочее. В итоге остается чистый читабельный код со стороны браузера. Это в какой-то мере помогает ускорить передачу и уменьшить время отклика сервера. На WordPress’e есть много плагинов, минимизирующих код. Вот самые популярные:

    Они будут на лету сокращать файлы.

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

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

    Технологии | Как улучшить скорость загрузки сайта: обзор PageSpeed Insights от Google

    Алек­сандр Гусев

    Раз­ра­ба­ты­ва­ет сай­ты, Ux/UI-канал

    Всего материалов: 1

    Как улучшить скорость загрузки сайта: обзор PageSpeed Insights от Google

    Один из пока­за­те­лей хоро­шей рабо­ты сай­та – ско­рость. И пер­вич­ной загруз­ки стра­ниц, и рабо­ты в целом. Быст­рее загру­зит­ся глав­ная стра­ни­ца – быст­рее поль­зо­ва­тель уви­дит вашу инфор­ма­цию и с боль­шей веро­ят­но­стью оста­нет­ся на сай­те, если при­шел впер­вые. Веб-раз­ра­бот­чик, it-волон­тер Алек­сандр Гусев (сту­дия «Биз­нес-Ате­лье») рас­ска­зал, как про­ана­ли­зи­ро­вать ско­рость сай­та с помо­щью сер­ви­са PageSpeed Insights.

    PageSpeed оце­ни­ва­ет рабо­ту сай­та по несколь­ким направ­ле­ни­ям – от раз­ме­ра кар­ти­нок до сте­пе­ни сжа­тия кода. То есть, по сути, дает более-менее пол­ную кар­ти­ну по тем момен­там, на кото­рые сто­ит обра­тить вни­ма­ние. При этом, как ни стран­но, не сто­ит пола­гать­ся на него пол­но­стью и дове­рять всем его реко­мен­да­ци­ям. Какие-то из них выпол­нить весь­ма непро­сто в силу раз­ных при­чин. Но, исхо­дя из мое­го опы­та рабо­ты с сай­та­ми НКО, основ­ной набор пра­вил плюс-минус оди­на­ков и дей­стви­тель­но помо­га­ет уско­рить рабо­ту сай­та.

    Сер­вис Page Speed Insights от Google пред­на­зна­чен для про­вер­ки ско­ро­сти загруз­ки стра­ниц сай­та. Скрин­шот экра­на уста­нов­ки.

    В первую оче­редь сто­ит ска­зать, как сер­вис в прин­ци­пе ран­жи­ру­ет ито­го­вые пока­за­те­ли. Все оце­ни­ва­ет­ся в бал­лах, от 0 до 100. Чем бли­же к сотне, тем луч­ше. Но с огляд­кой на то, что дове­рять­ся машине и целе­на­прав­лен­но докру­чи­вать сайт до 100 бал­лов не сто­ит, об этом поз­же. Есть три гра­да­ции:

    • 0 – 49 (мед­лен­но): крас­ная зона;
    • 50 – 89 (средне): оран­же­вая зона;
    • 90 – 100 (быст­ро): зелё­ная зона.

    Соот­вет­ствен­но, после заме­ра будет пока­за­на оцен­ка ско­ро­сти рабо­ты ваше­го сай­та и даны реко­мен­да­ции, что/как/где мож­но улуч­шить. При­чем отдель­но оце­ни­ва­ет­ся рабо­та сай­та для мобиль­ных устройств и для ком­пью­те­ров. И реко­мен­да­ции так­же выда­ют­ся отдель­ны­ми вклад­ка­ми.

    И здесь пере­хо­дим к самым попу­ляр­ным пунк­там, кото­рые вли­я­ют на рабо­ту сай­та.

    Количество и размер картинок на сайте

    Если на глав­ной стра­ни­це 100 кар­ти­нок и каж­дая весит по мега­бай­ту (пото­му что на мони­то­ре редак­то­ра сай­та она смот­рит­ся кра­си­во, чет­ко и ярко), то раз­мер всех изоб­ра­же­ний лег­ко уле­та­ет за 100 Мб. И одно дело, когда кар­тин­ка нуж­на на сай­те имен­но в боль­шом раз­ре­ше­нии и имен­но в том виде, в каком она выгру­же­на с фото­ап­па­ра­та.

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

    Все рав­но в подав­ля­ю­щем боль­шин­стве фото­гра­фия на сай­те будет или совсем ста­тич­на (она не будет откры­вать­ся по кли­ку мыши), или же будет откры­вать­ся во всплы­ва­ю­щем окне, кото­рое мень­ше раз­ме­ра экра­на. А это в боль­шин­стве сво­ем мони­то­ры с раз­ре­ше­ни­ем до 1920 px, кон­крет­ные циф­ры будут вид­ны в ана­ли­ти­ке сай­та. Поэто­му, если раз­мер новост­ной мини­а­тю­ры на уровне кода огра­ни­чен 640px, то загру­жать на это место кар­тин­ку в full-hd раз­ре­ше­нии про­сто ни к чему. Она все рав­но ужмет­ся до ука­зан­ных ей 640px по ширине.

    Всю эту опти­ми­за­цию мож­но делать вруч­ную (в любом фото­ре­дак­то­ре), поль­зо­вать­ся онлайн-сер­ви­са­ми (напри­мер, Squoosh) либо пору­чить рабо­ту спе­ци­а­ли­зи­ро­ван­ным пла­ги­нам.

    Squoosh – сер­вис Google для сжа­тия фото­гра­фий без поте­ри каче­ства. Скрин­шот экра­на.

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

    Отложенная загрузка

    Дру­гой момент, кото­рый так­же отно­сит­ся к гра­фи­ке и есть в перечне пунк­тов оцен­ки PageSpeed, это так назы­ва­е­мая lazy load (лени­вая загруз­ка). Хотя мне боль­ше нра­вит­ся вари­ант «отло­жен­ная загруз­ка», так как он точ­нее отра­жа­ет суть. Но даль­ше по тек­сту буду исполь­зо­вать «лени­вую загруз­ку», что­бы не путать.

    Смысл этой шту­ки – берем ту же нашу тесто­вую стра­ни­цу, на кото­рой 100 кар­ти­нок. Понят­но, что все эти изоб­ра­же­ния рас­пре­де­ле­ны рав­но­мер­но по всей глав­ной стра­ни­це и нахо­дят­ся на 10 экра­нах про­крут­ки. Так вот, по умол­ча­нию при откры­тии сай­та бра­у­зер загру­жа­ет всю гра­фи­ку, кото­рую най­дет на стра­ни­це. При этом посе­ти­тель сай­та пока что нахо­дит­ся толь­ко на пер­вом экране и видит пер­вые 10 кар­ти­нок. В это же вре­мя осталь­ные 90 усерд­но под­гру­жа­ют­ся, наде­ясь быть уви­ден­ны­ми.

    Посе­ти­тель, в свою оче­редь, недо­уме­ва­ет, сколь­ко еще стра­ни­ца будет загру­жать­ся и когда уже это кон­чит­ся? И он либо дожи­да­ет­ся загруз­ки всей этой кра­со­ты, либо ухо­дит с сай­та. Так вот, lazy load под­гру­жа­ет толь­ко те кар­тин­ки, кото­рые нахо­дят­ся в поле види­мо­сти или вот-вот попа­дут в него.

    Поэто­му при таком вари­ан­те посе­ти­тель сай­та видит толь­ко пер­вые 10 кар­ти­нок и для него стра­ни­ца уже загру­зи­лась. Остав­ши­е­ся 90 сидят себе тихо и не тре­во­жат бра­у­зер тре­бо­ва­ни­ем сроч­но пока­зать их. Как толь­ко посе­ти­тель нач­нет про­кру­чи­вать стра­ни­цу вниз, под­гру­зят­ся сле­ду­ю­щие 10 кар­ти­нок. И так далее по мере про­крут­ки будут под­гру­жать­ся бли­жай­шие кар­тин­ки. За счет это­го умень­ша­ет­ся вес стра­ни­цы и сокра­ща­ет­ся ско­рость ее загруз­ки.

    Весь­ма и весь­ма полез­ная функ­ция, кото­рая в PageSpeed назы­ва­ет­ся «отло­жи­те загруз­ку скры­тых изоб­ра­же­ний». Осо­бен­но она акту­аль­на для длин­ных стра­ниц с боль­шим коли­че­ством гра­фи­ки, лен­дин­гов, новост­ных стра­ниц.

    Использование webp

    Дру­гой пункт, каса­ю­щий­ся гра­фи­ки, это «исполь­зуй­те совре­мен­ные фор­ма­ты изоб­ра­же­ний». Если вкрат­це, то не исполь­зуй­те bmp, а исполь­зуй­те webp. Это хоть и край­но­сти, но доволь­но близ­кие к истине. У каж­до­го фор­ма­та изоб­ра­же­ния есть свое пред­на­зна­че­ние, и исполь­зо­вать png в тех кар­тин­ках, где нет про­зрач­но­сти, не сто­ит, сго­дит­ся и jpg. Тот же webp, кото­рый реко­мен­ду­ет сер­вис, конеч­но, хорош. Совре­мен­ный, с хоро­шим сжа­ти­ем, но при этом его под­держ­ка бра­у­зе­ра­ми еще не пол­ная.

    WebP – фор­мат сжа­тия изоб­ра­же­ний с поте­ря­ми и без потерь каче­ства, пред­ло­жен­ный Google. Скрин­шот экра­на.

    К при­ме­ру, бра­у­зер Safari этот фор­мат не пони­ма­ет. При­чем ни его настоль­ная вер­сия, ни мобиль­ная. Поэто­му посе­ти­те­ли ваше­го сай­та, зашед­шие с iPhone, кар­ти­нок не уви­дят вовсе.

    Кеширование

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

    Использование плагинов

    Отдель­но сто­ит ска­зать про исполь­зо­ва­ние пла­ги­нов на сай­те. Зача­стую, решая зада­чи на it-волон­те­ре, я вижу мно­го уста­нов­лен­ных на сай­те пла­ги­нов. При этом часть из них будет неак­тив­на, дру­гая не обнов­ле­на, тре­тья будет актив­на, но от этих мож­но спо­кой­но изба­вить­ся. По ходу дела уточ­няю про пла­ги­ны и выяс­ня­ет­ся, что вла­де­лец сай­та осо­бо-то и не в кур­се, что там за пла­ги­ны сто­ят и кто из них за что отве­ча­ет. Как раз в таких ситу­а­ци­ях при­брать­ся в этом раз­де­ле сай­та про­сто необ­хо­ди­мо. Даже не столь­ко из-за ско­ро­сти рабо­ты сай­та, а пото­му что это надо сде­лать.

    Правильные приоритеты

    Важ­ный момент для пер­фек­ци­о­ни­стов: «хочу, что­бы у мое­го сай­та было 100 бал­лов из 100». Оно, конеч­но, при­ят­но, когда ваше­му сай­ту выда­ли 100 бал­лов и в мобиль­ной вер­сии, и для ком­пью­те­ров, но зача­стую овчин­ка не сто­ит выдел­ки. Какие-то пунк­ты сер­ви­су могут не нра­вить­ся, и все тут. И сайт уже нор­маль­но рабо­та­ет, и гру­зит­ся быст­ро, а PageSpeed’у все мало и мало.

    На при­ме­ре мое­го лич­но­го фото­сай­та alexangusev.ru инте­рес­но наблю­дать как раз эту кар­ти­ну. На сего­дня я докру­тил его до 91 бал­ла для мобиль­ной вер­сии и 99 бал­лов – для ком­пью­тер­ной вер­сии. При этом это сайт с фото­гра­фи­я­ми, то есть каче­ство изоб­ра­же­ний для меня очень и очень важ­но. На сего­дня все фото, что есть на сай­те, я про­пу­стил через тот же Squoosh и оста­вил на мини­маль­но удо­вле­тво­ря­ю­щих меня уров­нях. И сде­лав этот в пер­вый раз, был несколь­ко удив­лен, когда PageSpeed вновь выдал мне реко­мен­да­цию «настрой­те под­хо­дя­щий раз­мер изоб­ра­же­ний». Но, пар­дон, у меня нет цели сде­лать все фото пик­сель­ны­ми в уго­ду сер­ви­су, что­бы полу­чить желан­ную сот­ню бал­лов. Поэто­му сей­час этот пункт я уже мыс­лен­но про­пус­каю и из реко­мен­да­ций для себя исклю­чаю.

    Так же и для ваших сай­тов – если какой то пункт из реко­мен­да­ций PageSpeed идет враз­рез с ваши­ми целя­ми или жела­ни­я­ми и при этом сайт загру­жа­ет­ся и рабо­та­ет нор­маль­но, то оставь­те как есть – не нуж­но пол­но­стью дове­рять­ся про­грам­ме.

    Резю­ме: каж­дый пункт диа­гно­сти­ки сер­вис сопро­вож­да­ет неболь­шим опи­са­ни­ем по воз­мож­но­стям опти­ми­за­ции и ссыл­ка­ми либо на Кодекс WordPress, либо на ката­лог пла­ги­нов с уже гото­вы­ми их вари­ан­та­ми для исполь­зо­ва­ния. Как раз одним из таких пла­ги­нов явля­ет­ся Autoptimize – он поз­во­ля­ет про­стым про­став­ле­ни­ем гало­чек внут­ри акти­ви­ро­вать ту или иную настрой­ку, напря­мую вли­я­ю­щую на пока­за­те­ли PageSpeed. Это и вклю­че­ние лени­вой загруз­ки для кар­ти­нок, и сжа­тие и кеши­ро­ва­ние скрип­тов, пере­нос скрип­тов в футер и сжа­тие HTML. Широ­кое поле для твор­че­ства, глав­ное, что­бы не во вред сай­ту.

    Autoptimize пред­на­зна­чен для опти­ми­за­ции сай­та на WordPress. Скрин­шот экра­на.

    Само­му пла­ги­ну вполне сто­ит дове­рять, если:

    • он сов­ме­стим вплоть до вер­сии WordPress 5.2.3 (на сего­дня акту­аль­ней неку­да);
    • у него более мил­ли­о­на актив­ных уста­но­вок (не абы как);
    • послед­нее обнов­ле­ние было 4 дня назад (по состо­я­нию на 16.09.2020);
    • у него 4,7 бал­ла из 5 воз­мож­ных (по оцен­кам поль­зо­ва­те­лей).

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

    К тому же за 4 года, что я помо­гаю НКО как it-волон­тер, не при­пом­ню зада­чи имен­но на улуч­ше­ние пока­за­те­лей рабо­ты сай­та по PageSpeed. А это очень инте­рес­ная рабо­та. Поэто­му если вы еще не пуб­ли­ко­ва­ли зада­чи на it-волон­те­ре, то самое вре­мя.

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