Модуль Google PageSpeed для сайта: что умеет и как пользоваться
Решили поэкспериментировать и добавить на три проекта ускоритель от Гугла. Что из этого получилось — выясняем.
Сайты должны грузиться мгновенно. Ах, нет, сайты ничего никому не должны? Зайдите в троллейбус и сядьте рядом со студентом, который сидит с айфоном. Посмотрите, готов ли он ждать, пока загрузится какой-то интернет-магазин. Скажем так: три секунды — и вкладка закрывается. В ход идет следующий результат из поисковой выдачи.
Кстати, про поисковую выдачу. Скорость загрузки сайта влияет на ранжирование в поисковиках. Пруфы и . «Тормозящие» сайты реже посещаются роботами, а, значит, реже индексируются. От этого страдает место в выдаче и удобство поиска нужной инфы.
Постоянно думайте о том, будет ли ваша страница загружаться медленнее на смартфоне, чем на ПК. И если это так, то мы, скорее всего, понизим ее в выдаче.
— Мэтт Каттс, Google
Гугл потрудился и выпустил свой инструмент для проверки скорости — PageSpeed. Найти тормозящие загрузку элементы просто — заходим сюда и в единственном поле указываем адрес, который хочется протестировать. За минуту будет готов подробный отчет о производительности. Результат будет показан в попугаях. В идеале их сто, но попробуй-ка добейся! Даже самому Гуглу это не под силу: проверьте его сервисы:)
Тесты проводятся как для десктопной, так и для мобильной версии сайта. Ориентироваться лучше по цветовой шкале: желтая зона укажет, что есть элементы, которые стоит оптимизировать, зеленая сообщит, что все ок. Если сайт в красной зоне, подкручивайте скорость и оптимизируйте. Иначе впереди бездна: пока загружается страничка, юзер уже уйдет на другой сайт:)
Оптимизировать сайт можно двумя способами.
Ручная оптимизация
1. Сжимаем картинки Фотошопом или прогоняем через Optimizilla , например
Чем меньше весят картинки, тем больше шакалов тем быстрее загружается сайт. Делаем сжатие, многомегапиксельные фотки прячем под кат. Хватит превьюшки 640×480. Меньше картинка — шустрее сайт.
Даже на стартовой странице Google Developers графику можно сжать на 71%.
2. Выполняем подключение шрифтов с самого сайта, а не тянем их с гуглофонтов
Минус — пока браузер не загрузил шрифт, юзер увидит надоевший Ариал или Тахому.
3. Используем кэш браузера по максимуму
Когда сайт частично уже сохранен у клиента — загрузка пойдет намного быстрее.
4. Сокращаем JavaScript и CSS
Скрипты не редактируются каждый день после релиза — нет смысла сжимать их на лету. Хватит оптимизировать один раз после правок кода. Шаблоны JS лучше обработать на сервере, встроить результаты в HTML и использовать шаблоны на клиенте после загрузки.
5. Сокращаем HTML
На практике — удаление лишних пробелов, табов, переносов строк.
6. Удаляем неиспользуемый код
Можно встроенным в «Хром» аудитом. Нажимаем F12 и переходим на вкладку Audits. Внизу есть единственная кнопка Run. Занимается в целом тем же самым, что и PageSpeed. Только в реальном времени.
Автоматическая оптимизация
Любой сайт состоит из динамических и статических элементов. Динамические элементы — сам HTML-код, полученный из работы php и запросов к базе данных. А остальное — статика. Это картинки, JavaScript и CSS.
Автоматически оптимизировать сайт можно крутой штукой от Гугла — PageSpeed Insights. Этот модуль устанавливается на сервер nginx и после настроек сжимает в реальном времени дофига инфы , в том числе, графической.
PageSpeed Insights умеет анализировать HTML и оптимизировать ресурсы. Пережимать, короче. В исходном коде ресурсы будут находиться по другому пути, не по тому, что задан сжать фоточку разработчиком. Это стоит учитывать. Но отображение ресурсов не изменится. Уменьшится вес. А значит, возрастет скорость загрузки страницы и посетители станут довольнее:)
Однако у PageSpeed Insights имеются ограничения. Его можно поставить только на nginx, запущенный на или виртуальном сервере. Нет, арендованный где-то в Германии shared-сервер не подойдет.
Второе ограничение связано с вечной войной браузеров. Картинки, пережатые PageSpeed-ом, конвертируются в формат.webp, который понимает только «Хром» (на всенародно любимом Internet Explorer 6 такая штука не пройдет). В последних версиях отображению таких картинок научилась и «Опера». Потому что движок поменяла.
Примеры использования PageSpeed Insights
Мы установили модуль PageSpeed Insights на трех проектах — на своем новом сайте и на двух клиентских. Модуль видит, с какого браузера приходит запрос, смотрит, обучен ли он отображать webp-формат и отдает либо оптимизированную картинку, либо обычный jpeg.
По Сибириксу настройка заняла примерно полдня. Кое-что пришлось делать эмпирическим путем: меняли, смотрели, что происходит. Иногда зона была зеленой, а слететь в желтую могла совершенно непредсказуемо.
Сейчас обе версии стоят в зеленой зоне. Значит, проблем со скоростью не возникнет. Если скорость подключения хорошая, не EDGE какой-нибудь:)
В рамках технической поддержки интернет-магазина фабрики «Витра» мы решили поэкспериментировать и установить модуль PageSpeed Insights на него:
Многие из Вас наверное пользовались замечательным сервисом от Google: PageSpeed Insights ? Хотите получить заветные 100 из 100?
Картинка для привлечения внимания
А дело-то за маленьким.
Итак, результаты моего теста. Берем любой сайт, например, я взял бесплатный готовый адаптивный шаблон сайта перенес к себе на хостинг и запустил тестирование: Результат первого тестирования (ссылка на сайт):- скорость для мобильных - 79/100;
- скорость для компьютера - 93/100;
Жалуется на:
Исправьте обязательно:Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение.
Количество блокирующих ресурсов CSS на странице: 3. Они замедляют отображение контента.
Все содержание верхней части страницы отображается только после загрузки указанных далее ресурсов. Попробуйте отложить загрузку этих ресурсов, загружать их асинхронно или встроить их самые важные компоненты непосредственно в код HTML.
Делаем небольшие махинации. Переносим стили из файла в код:
Было:
Стало:
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display:block; }
/* и другие стили */
И - ура! - у нас результаты выше (ссылка на сайт):
- скорость для мобильных - 99/100;
- скорость для компьютера - 99/100;
Сократите HTML
Сжатие HTML-кода (в том числе встроенного кода JavaScript или CSS) позволяет сократить объем данных, чтобы ускорить загрузку и обработку. Но это проблему можно решить сжатием кода. К данной теме не относиться.
А также мы не забываем, что все-таки мы не решили проблему описанную выше:
Все содержание верхней части страницы отображается только после загрузки указанных далее ресурсов. Попробуйте отложить загрузку этих ресурсов, загружать их асинхронно или встроить их самые важные компоненты непосредственно в код HTML. Сколько они весили в файле, столько же весят и в коде!
А теперь самый главный вопрос: Баг или фича?
Спасибо!
Скорость загрузки сайта является важнейшей составляющей позитивного user experience, а также одним из факторов ранжирования сайта в поисковой выдаче. Правда такова, что сегодня пользователи не хотят ждать загрузки страницы более 5 секунд. Если ваш сайт загружается недостаточно быстро, вы теряете потенциальных клиентов.
Учитывая то, что 50% онлайн-трафика приходит с мобильных устройств, пользователи ожидают почти мгновенной загрузки сайта и в мобильной версии. В этой статье вы узнаете, как набрать 100 из 100 с инструментом Google PageSpeed Insights для мобильной и десктопной версии вашего сайта.
МотивацияПри проверке сайта Google его же инструментом PageSpeed Insights было замечено, что проблем с декстопной версией сайта нет - 100/100, а вот результаты мобильной версии оставляют желать лучшего – 71/100.
Значит ли это, что результат 100/100 недостижим?
Как заставить страницы загружаться быстрееВ первую очередь необходимо отметить, что инструмент PageSpeed – это всего лишь руководство для повышения качества веб-сайтов. Инструмент предоставляет рекомендации для оптимизации веб-сайта, которая способствует повышению скорости загрузки страниц, но достижение желаемого результата зависит от настроек сервера.
Некоторые из этих шагов требуют технической экспертизы, другие – нет. Этой инструкции можно следовать в любой Системе управления сайтом.
Шаг первый: Оптимизируйте изображения
Инструмент PageSpeed Insights предлагает оптимизировать картинки посредством уменьшения размера файлов. Для этого можно предпринять следующие меры:
· Сожмите все изображения, используя инструменты Compressor.io и TinyPNG (или любые другие бесплатные инструменты). В некоторых случаях эти инструменты позволяют уменьшить размер изображений более чем на 80% без ущерба их качеству.
· Уменьшите размер изображений до необходимых параметров, не ухудшив при этом их качества. Допустим, если нужно изображение размера 150x150px, именно такого размера картинку нужно загрузить на сервер. Не рекомендуется использовать изображения большего размера, чем вы хотите поместить на сайт, или уменьшать их размер с помощью CSS или HTML тегов.
Можно скачать изображения, сжать и отформатировать их вручную или воспользоваться сервисом PageSpeed Tool и скачать уже оптимизированное изображение. То же самое можно сделать с JavaScript и CSS.
Шаг второй: Сократите объем ресурсов CSS и JavaScript
Размер ресурса можно уменьшить, удалив ненужные байты, например, лишние пробелы, переносы строки и отступы. При создании кодов программисты часто оставляют свободные места и комментарии. Иногда, удалив их, можно уменьшить размеры файлов в два раза.
Для решения этой проблемы можно установить инструмент Gulpjs на сервер. Инструмент автоматически создаёт новый CSS файл и удаляет все пробелы. Он также автоматически создаёт новый CSS файл для всех внесённых вами изменений. В этом случае разработчиком удалось уменьшить размер главного CSS файла с 300kb до 150kb.
Если вы используете WordPress, целесообразно будет установить плагин Autoptimize.
Также можно загрузить уже оптимизированные файлы, предложенные PageSpeed Tool.
Шаг третий: Оптимизируйте время ответа сервера
Чтобы уменьшить время ответа сервера, можно переместить все статичные файлы с веб-сайта на CDN.
CDN – это сеть серверов, разбросанных по всему миру, которые позволяют оптимизировать доставку и дистрибуцию контента (изображений, файлов CSS и JavaScript) конечным пользователям в сети Интернет. CDN хранит копии контента вашего веб-сайта на своих серверах. Когда пользователь заходит на ваш сайт, статичный контент загружается с ближайшего к нему сервера.
Допустим, главный сервер вашего сайта находится в Техасе, и вы не используете CDN. Пользователю из, например, Амстердама придётся ждать, пока сервер загрузит сайт из Америки. Если вы используете CDN, ваш сайт загрузится с сервера, ближайшего к Амстердаму, что займёт гораздо меньше времени.
Ниже представлена схема функционирования CDN c GTmetrix.
На CDN можно перенести все изображения, файлы JavaScript и CSS и оставить на главном сервере только файл HTML. Размещение изображений на CDN может существенно повысить скорость загрузки страниц сайта.
Шаг четвёртый: Используйте кеш браузера
Использование кеша браузера предполагает, что файлы с вашего веб-сайта – изображения, файлы CSS и JavaScript – загружаются с сервера всего один раз, и браузер сохраняет их на компьютере. В следующий раз при загрузке страниц все необходимые файлы «подтянутся» с компьютера пользователя.
Чтобы использовать кеш браузера, нужно создать файл.htaccess и прописать в нём необходимые директивы, используя модуль expires. Продолжительность хранения данных в кэше может быть установлена по времени, по последнему изменению файла или по времени доступа клиента.
Шаг пятый: Удалите из верхней части страницы ресурсы, блокирующие отображение
Главной проблемой, с которой приходится столкнуться разработчикам в этом случае, является перемещение кода JavaScript из верхней и основной части страницы в нижнюю часть по всему веб-сайту.
Если вы используете WordPress, плагин Autoptimize, который уже упоминался ранее, может вам в этом помочь. Для этого вам всего лишь нужно поменять настройки плагина.
Шаг шестой: Включите сжатие
Включить сжатие можно в настройках вашего сервера. Если вы сомневаетесь в своей компетенции в данном вопросе, попросить вашу техническую поддержку включить сжатие GZIP для вашего сервера.
Шаг седьмой: Оптимизируйте мобильную версию
Адаптивная версия мобильного сайта предполагает использование правильного разрешения изображений, параметров шрифта и хорошей навигационной системы.
Узнать, как ваш веб-сайт выглядит на различных девайсах, можно в Google Chrome. В правом верхнем меню кликните на «Дополнительные инструменты», а затем – «Инструменты разработчика».
Вывод:Итак, четыре наиболее важных шага, которые необходимо предпринять, чтобы улучшить качество сайта:1. Используйте CDN.
2. Используйте кеш браузера.
3. Удалите блокирующие отображение ресурсы из верхней части страницы.
4. Оптимизируйте размер изображений и сожмите их.
Привет всем! давно я хотел написать статью про сервис google page speed, хотя я итак писал уже про ускорение и оптимизацию сайта и давал советы, которые помогут вам повысить показатель в google page speed. Но речь сегодня о другом, с недавних пор я перестал беспокоиться о своём показатели в сервисе google speed и пытаться его как то повысить. В своё время я увеличил показатель с 2% до 87% впечатляет не правда ли!? Но спустя некоторое время мне пришлось поменять шаблон моего wordpress сайта, после чего показатель упал до 63%, наверное шаблон оказался тяжелее предыдущего.
Так же в дальнейшем при установке одного плагина, который выводит на сайт адаптивную сетку анонсов записей, показатель ещё упал до 30%. То есть я так понял мне нужно было выбирать либо красивый сайт, либо высокий показатель в сервисе google speed. Причём я заметил, что показатель может быть не высоким 50-70% и это никак не влияет на скорость открытия сайта в браузере. При показателе 63% мой сайт работает без проблем, конечно если отказаться практически от всех плагинов и выбрать себе тему для сайта по легче, то можно повысить показатель до 90-100%. Но ради чего это делать? Ради цифры? Ради самомнения?
Google page speed считает каждый килобайт! если изображение на вашем сайте можно оптимизировать, то есть сжать ещё на пару килобайт, то google понизит показатель, до тех пор пока вы не уберёте эти пару килобайт. То есть всего из-за нескольких килобайт показатель может быть понижен, но при этом для сайта это не несёт абсолютно никаких изменений в плане скорости, всё по прежнему! Тогда зачем я буду загоняться из-за этих килобайт, пыхтеть там, время своё тратить? Опять же получается только ради цифр, ради того, что я всех лучше и круче, вот посмотрите какой у меня высокий показатель, это бред!
Просто я хочу огорчить тех, кто якобы думает, что после того как они повысят себе показатель в сервисе google page speed, их сайт тут же чудесным образом станет популярным, посещаемым, их поисковые запросы вырастут и т.д.. Да вы что ребят, очнитесь! хватит часами зависать там, тратить своё время впустую, займитесь лучше своим сайтом, напишите что-нибудь полезное лучше. Я не удивлюсь что есть люди, которые ночами не спят из-за того, что у них низкий показатель в google speed. В общем эта гонка за высоким показателем может довести до абсурда…нет, играть в игры Google я больше не хочу, с меня хватит.
Я знаю как сделать высокий показатель, но мне это больше не интересно, мне интересно писать полезные записи на своём сайте. И менять свой шаблон ради высокого показателя я то же не собираюсь, на данный момент меня всё устраивает. На последок хочу показать скриншот с показателем в google page speed самого популярного и посещаемого сайта в России – Вконтакте, наверное там и не слышали о таком сервисе.
Мои рекомендации: если у вас проблемы с сайтом, он медленно загружается, проблемы с сервером, создаёт большую нагрузку, то возможно сервис google page speed может помочь вам выявить причины и помочь вам их устранить. Если проблем у вас нет с производительностью сайта, то вам не нужно знать об этом сервисе, он не нужен вам, повышение показателя ни чем вам не поможет, только отнимет время и спутает все карты.
Нужно понять, что сам по себе движок wordpress это тяжёлая система, много функций и прибамбасов, на что нужны ресурсы. Проблему с нагрузкой сервера может решить только увеличение лимитов хостинга, то есть переход на более высокий тариф или выделенный сервер. При достижении определённого показателя этот процесс неизбежен и здесь google page speed вам уже не поможет.
На этом у меня всё, жду ваших комментариев, до новых встреч!
Почему я забил на Google page speed Insights обновлено: Январь 7, 2019 автором: Илья Журавлёв
PageSpeed, или если быть точнее PageSpeed Insights — это продукт компании Google, при помощи которого можно легко найти недостатки своего сайта. Под недостатками мы понимаем лишь технические моменты, которые сервис предлагает исправить.
Что такое Pagespeed insights и зачем он нужен?Pagespeed insights — это сервис для оценки качества сайта, а именно: скорости его загрузки на мобильных устройствах и ПК. Самое главное — это бесплатный сервис рекомендаций для разработчиков веб-сайтов по ускорению страницы в браузере клиента. Алгоритмы сервиса постоянно меняются, потому сервис постоянно совершенствуется и следует всем требованиям поисковой систем Google.
По поводу особенностей загрузки страницы при разной скорости интернет-соединения, Pagespeed учитывает только факторы, не зависимые от сети аспекты. Вот что по этому поводу написано в справке :
Так как скорость подключения у разных пользователей различна, PageSpeed Insights рассматривает только независимые от сети аспекты работы страницы: конфигурация сервера, структура HTML, использование внешних ресурсов (изображений, JavaScript и CSS). Применив наши рекомендации, вы сможете оптимизировать относительную скорость загрузки страницы. Абсолютная же скорость загрузки в конечном итоге все равно зависит от скорости подключения к сети.
Pagespeed использует свою систему оценок, которая соответствует разной степени важности:
Важно! Все ошибки, которые находит сервис являются лишь рекомендациями и не являются обязательными. Применив все рекомендации сервиса, можно ускорить относительную скорость загрузки сайта. Это значит, что вы сделали все что от вас зависит, чтобы сайт грузился максимально быстро.
Преимущества и недостатки Гугл Пейдж СпидУ сервиса благая цель — сделать сайты в интернете максимально быстрыми и удобными как на десктопе, так и на пк. Невзирая на это, есть ряд моментов, на которые хочется обратить внимание:
- Не всегда удается найти баланс между скоростью загрузки сайта и красивым внешним видом. Нужно определиться, что мы хотим: быстрый или красивый сайт? И то и другое получить практически невозможно.
- Оценка для мобильных сайтов повторяет ошибки для ПК, добавляя лишь фрагмент о компоновке элементов страницы на маленьких экранах. Это не совсем адекватный показатель, ведь Mobile-friendly является фактором ранжирования . Потому, если хотите подтянуть мобильную версию сайта, нужно использовать отдельный отчёт Google.
- Сервис не показывает ускорение загрузки страниц сайта в абсолютном выражении — секундах или минутах (если все настолько плохо). Он лишь учитывает балы (от 0 до 100), которые не всегда характеризуют реальную скорость загрузки сайта.
- Сервис выдает обширные рекомендации по исправлению и указывает конкретные файлы, которые нуждаются в оптимизации. Кроме того, уже оптимизированные скрипты, стили и картинки можно скачать прям со страницы с результатами для компьютеров.
Все собственники сайтов считают, что если у них будет 100/100 в результатах, их сайт сразу выйдет в топ. На самом деле это не так. Во первых: не только скорость загрузки влияет на позиции сайта. Во вторых: достичь отметки в 100/100 практически невозможно (если вы хотите современный и модный сайт). Оптимальным считается вариант от 85 и выше, но каждый сайт или CMS система являются отдельным случаем и их нужно рассматривать отдельно.
Среди основных препятствий на пути к достижению заветных 100 балов в гугл пейдспид можно выделить:
О том, как обычному сайту на WordPress набрать 99/100 в PageSpeed Insights написано на хабре . Довольно таки интересная статья, возможно, она будет полезна не только сайтам на , но и на других CMS. Также, можно использовать сторонние плагины, которые сами оптимизируют сайт: либо под пейдспид, либо — под скорость загрузки.
