Как повысить скорость загрузки страниц при помощи PageSpeed Insights - TurboComputer.ru
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд (пока оценок нет)
Загрузка...

Как повысить скорость загрузки страниц при помощи PageSpeed Insights

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

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

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

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

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

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

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

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


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

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


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

С 2018 года алгоритм 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 всегда поможет вам с этим — подскажет, как ускорить работу сайта.

Как увеличить скорость загрузки страниц сайта на WordPress с помощью Google PageSpeed Insights

Скорость загрузки сайта – серый кардинал влияющий на конверсии, динамику индексации страниц, приток пользователей из поиска, их лояльность. Но как определить эту самую скорость? Наиболее популярный инструмент проверки, который используют веб-мастера — Google PageSpeed Insights.

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

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

Компания HostPro предоставляет для украинской аудитории сервера в Украине, европейской — в Европе, американской — в США. Накопленный нами опыт в области ускорения сайтов позволяет обеспечивать их стабильную работу. А регулярная оптимизация и интеграция новых функций в хостинг улучшает предоставляемые услуги, развивает их в соответствии с инновациями рынка и потребностями пользователей.

Но, вернемся к ускорению работы сайта, а именно к сервису PageSpeed Insights. Компания Google разработала этот инструмент для анализа производительности страниц по:

— использованию внешних ресурсов (таких, как изображения, Javascript и CSS).

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

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

Сайты оцениваются по шкале от 0 до 100 баллов. Каждая оценка отмечена отдельным цветом, в зависимости от уровня важности: красный, желтый и зеленый.

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

Вот, что вам нужно сделать в первую очередь:

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

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

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

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

Уменьшите количество плагинов

Среди всего прочего, наличие слишком большого количества плохо закодированных плагинов может негативно влиять на время отклика сервера. Чтобы проверить, какие плагины замедляют ваш сайт, используйте плагин P3 (Plugin Performance Profiler). Это даст вам список всех тех, кто создает проблемы. К сожалению этот плагин не совместим с PHP7.

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

Читайте также:  Изменение масштаба экрана на компьютере

Сфокусировав внимание на трех основных категориях контента, в HostPro разработали и успешно тестировали услуги CDN Диск, CDN Кеширование, CDN Видео и CDN Трансляция. Они подходят для любой CMS. Вы можете подключить к CDN сети от 1 до 20 сайтов. Важным является то, что оплата за использование CDN сети начисляется по факту использования.

Некоторые элементы веб-сайта, чтобы упростить загрузку, могут быть временно сохранены (кэшированы). Загрузка не кешированного контента (HTML, CSS, логотип, изображения) значительно замедляет работу. Неудивительно, что это исправление номер один, если вы хотите улучшить показатель PageSpeed Insights.

Кэширование для сайтов WordPress настраивается как бесплатными плагинами, так и плагинами премиум-класса. Предлагаем попробовать либо W3 Total Cache (бесплатное решение), либо воспользуйтесь WP Rocket (платное решение).

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

Первый метод — сжатие ресурсов с помощью deflate.

Он не повлияет на производительность движка, но ускорит время отклика.

Добавьте следующий код в ваш файл .htaccess:

# compress text, html, javascript, css, xml:

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/xml

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/x-javascript

# Or, compress certain file types by extension:

# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent

Второй метод — включение gzip сжатия в WordPress. Необходимо добавить php код первой строкой в файл header.php вашей темы оформления:

Включить сжатие можно добавив в файл nginx.conf следующего кода:

gzip on;

gzip_buffers 16 8k;

gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;

gzip_disable «MSIE [1-6].(. *SV1)»;

gzip_vary on;

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

Существует три сценария проблем доступа с которыми сталкивается большинство: файлы JavaScript / CSS, шрифт Font Awesome и шрифты Google.

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

Сохраните следующие настройки:

В разделе «Параметры JavaScript» снимите флажок «Использовать JavaScript в ?»

В разделе «Параметры CSS» установите флажок «Вставить все CSS?».

Font Awesome загружаются супер быстро, если хостинговать их на собственном CDN.

Ссылка на ваш файл Font Awesome, использующий CDN URL, должна выглядеть следующим образом:

По умолчанию WordPress использует хук, называемый wp_enqueue_scripts, который загружает шрифт в заголовок. Это автоматически приводит к тому, что он блокирует рендеринг. Чтобы исправить это, необходимо установить бесплатный плагин Disable Google Fonts или попросить разработчика темы отключить Google шрифты.

Затем, включить шрифт Google со следующим кодом в нижнем колонтитуле, прямо перед тегом .

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

Большинство CSS требует дополнительного времени для загрузки, поэтому уменьшение веса CSS-кода также поможет улучшить показатель PageSpeed Insights.

Бесплатные легковесные решения, которые действительно эффективны для минимизации JavaScript, CSS и HTML — Autoptimize, Better WordPress Minify. Просто установите один из них и настройте нужные параметры.

В настройках плагина вам нужно будет проверить следующее:

— Оптимизация кода JavaScript

— В WordPress код CSS лучше всего размещать вверху, а javascript внизу.

— После окончания работ проведите финальное тестирование сайта на наличие ошибок и возможных проблем.

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

Мы рассмотрели только один инструмент, который показывает как ускорить сайт на WordPress. Когда нужно оценить изменения и получить полное представление о том, что влияет на скорость загрузки сайта пользуются также сервисами Pingdom и GTmetrix . Но о них, и других инструментах лучше говорить в отдельной статье.

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

Как ускорить сайт WordPress для Google PageSpeed

Как ускорить сайт WordPress для Google PageSpeed Insights с показателями 100/100? Сегодня я хочу поделиться с вами некоторыми советами которые помогут вам набрать 100/100 баллов в Google PageSpeed ​​Insights на вашем сайте WordPress. Или, по крайней мере, приблизить к этому показателю ваш веб-сайт ВордПресс.

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

Операция: Ускорить сайт WordPress

Западный SEO-консультант Ник Лерой (Nick Leroy) рассказал, что много внимания уделял скорости загрузки сайтов своих клиентов, а его собственный сайт на WordPress был довольно медленный. Чтобы не быть сапожником без сапог, он решил начать работу по ускорению ресурса. В итоге он сумел добиться максимальной скорости загрузки 100 в Google Page Speed Insights для десктопной версии сайта NickLeRoy.com. Мобильную версию удалось ускорить до 89.

Скорость загрузки в Google Page Speed Insights

Все владельцы веб-ресурсов могут значительно увеличить скорость загрузки страниц сайта на ВордПресс, считает Ник и рассказывает, как это сделать. 100/100 с помощью WordPress (возможно?).

Как ускорить сайт на WordPress?

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

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

  • Хостинг,
  • Тема WordPress,
  • Плагины ВордПресс,
  • Изображения,
  • Ресурсы.
    На основе проверки был составлен список того, что можно улучшить. Затем Ник приступил к внедрению изменений.

Проблема: хостинг и TTFB

Первое, что бросалось в глаза при поверхностном анализе — большое время до получения первого байта после отправки запроса со стороны клиента (Time To First Byte или TTFB) для всех страниц сайта: от 1,5 до 2 секунд. И это было просто время, которое необходимо для первоначального соединения со страницей без ее загрузки.

Помимо этого были и другие проблемы, связанные с хостингом: отсутствие HTTP/2 setup/configured (проблему можно было бы исправить, используя CDN), отсутствие кэширования и т.п. Общий хостинг на Hostgator не способствовал достижению цели увеличения скорости загрузки сайта.

Решение: смена хостинг-провайдера

В качестве альтернативы существующему хостингу были выбраны два провайдера: FlyWheel и Kinsta. Оба провайдера:

  1. Предлагали услуги хостинга специально для WordPress-сайтов,
  2. Относительно доступны по цене ($25-30 в месяц),
  3. Предлагали решения для кэширования на сервере,
  4. Имели встроенную технологию CDN,
  5. Предлагали бесплатный SSL-сертификат (и протокол HTTP/2).

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

После некоторых раздумий Ник Лерой решил создать новый сайт NickLeRoy.com. И вот, почему.

Проблема: оптимизация тем, плагинов, изображений, ресурсов

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

Тема WordPress

Тема, которая изначально использовалась на сайте Ника, была куплена у сторонних разработчиков. Часто такие темы поставляются в комплекте с кучей различных функций. Имеют компоновщик страниц, плагины для слайд-шоу, несколько библиотек JavaScript, библиотеки шрифтов и многое другое. Нередко такие темы используют CSS и JavaScript, чтобы удовлетворять потребностям аудитории.

В результате многие темы содержат большое количество не нужного функционала.

Плагины ВордПресс

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

Изображения

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

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

Ресурсы

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

На сайте NickLeRoy.com использовалось большое количество ресурсов, даже там, где они не были необходимы. Шрифты, javascript-файлы для ненужных функций, CSS для стилей и эффектов и многое другое, от чего можно было бы избавиться.

Решение: создание нового сайта

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

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

  • Чистая установка WordPress на Local by Flywheel с чистой базой данных и кодом,
  • Установка облегченной темы,
  • Установка конструктора страниц Elementor, чтобы сайт выглядел так же, как изначально, но загружался быстрее,
  • Перестройка всего сайта,
  • Оптимизация изображений с помощью imageOptim. Для этого все картинки были загружены в папку wp-content/uploads, пропущены через сервис imageOptim, и выложены обратно на сайт. Суммарное сжатие составило около 90% по сравнению с исходным размером файлов,
  • установка Autoptimize и Async Javascript, что позволило объединить JS и CSS и уменьшить / удалить блокировку рендеринга.

После реализации описанных выше действий сайт был перемещен из локальной среды разработки в промежуточную. Затем специалисты настроили SSL и HTTP/2 и после тестирования обновили DNS.

Результаты

Скорость загрузки страниц в Google Page Speed оценивалась с помощью сервиса SanityCheck.io. На скриншоте видно, как после внесения всех изменений улучшились показатели для мобильной версии сайта (синяя линия) и для десктопной (черная линия).

Улучшение скорости сайта WordPress

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

  1. Отказаться от Google Fonts и полностью перейти на системные шрифты или загрузить Google Fonts на сервер,
  2. Удалить из верхней части страницы код CSS и Inline,
  3. Оптимизировать файлы JS / CSS,
  4. Установить стороннюю CDN (например, CloudFlare) или использовать сторонний сервис для оптимизации изображений, например, в формате WebP,
  5. Улучшить кэширование для ресурсов.

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

В заключение

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

Как увеличить скорость загрузки сайта по Google PageSpeed и не только

SEO оптимизация скорости загрузки сайта

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

Улитка, черепаха, «тормоз» … Это невинные слова, которые пользователи могут сказать о медленном сайте — и эти слова никто не хотел бы услышать. Воспитанные пользователи могут ничего не сказать, но все равно пойдут с Вашего сайта к конкурентам.

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

Не очень приятно представлять, что все это может касаться вашего сайта? Давайте проверим, что показывает ваш «спидометр»: ваш сайт готов к гонкам за успех или только к соревнованиям среди черепах? В любом случае, сохраняйте спокойствие. Все можно исправить! Есть много инструментов для тестирования и оптимизации скорости сайта, которые позволят вам исследовать, определить проблемные места и исправить, чтобы ваш сайт «летал»! Итак, запускаем двигатели!

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

1. Google Page Speed Insights

Можете не верить, но Google — вовсе не бездушная машина. Он может быть строгим в своих «предпочтениях» по поисковой выдачи, но предлагает инструменты для улучшения производительности сайта (которая считается одним из важных факторов поисковой оптимизации). Google Page Speed Insights сканирует ваш сайт, сообщает вам время его загрузки, находит слабые места, тормозящие его работу, и предлагает возможности для решения этих проблем. Менее чем через минуту вы получаете полезные советы, как повысить скорость сайта. Эти советы классифицированы по важности.

Еще один сервис, работающий по технологии Google pagespeed Insights

2. YAHOO’S YSLOW

Yahoooo! Поехали! Ваш сайт может работать быстрее, если вы воспользуетесь советами еще одного поискового гиганта. YAHOO’S YSLOW оценивает продуктивность и стремительность загрузки собственного сайта на основе перечня критериев Yahoo, влияют на то, насколько медленным или быстрым сайт является для посетителей. Этот простой в использовании инструмент выставляет оценки на основе этих критериев и дает советы по улучшению. Чтобы у вас была лучшая картина, информация предоставляется в виде графиков и диаграмм, а также классифицируется по важности.

3. Page Scoring

Избавьтесь вещей, которые замедляют ваш сайт! Вот один из самых простых онлайн-инструментов для определения скорости сайта — Page Scoring. Он сканирует ваш сайт и сообщает вам, как быстро он загружается со всеми HTML, CSS и Js-файлами, связанные с запросом пользователя. Он также дает вам ссылки на эти файлы и показывает в точности, сколько времени «выдается» на загрузку конкретных файлов и контента. Это дает вам прекрасную возможность узнать в общем о возможности производительности вашего сайта — от времени ответа веб-сервера в список файлов элементов страниц, «воруют» скорость загрузки.

4. Pingdom

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

5. GTmetrix

GTmetrix предлагает удобную систему оценок. Кроме оценок PageSpeed и YSlow, этот онлайн-сервис также дает подробные оценки по каждому пункту по производительности сайта. Собирая необходимые данные по запросу сервера, он выдает рекомендации по решению проблем и повышения скорости вместе с URL-ами, что очень удобно. В нем также есть возможность записывать видео с результатами тестирования и сохранять историю предыдущих проверок.

6. Web Page Test

Если вы используете Web Page Test, много важных деталей относительно загрузки каждого элемента вашего сайта могут быть представлены в каскадных диаграммах и с удобными скриншотами. Вы получите оценки производительности сайта и список рекомендации по оптимизации в порядке важности. Одна из классных особенностей Web Page Test — то, что вы можете выбрать страны, по которым вы хотите провести проверку производительности сайта.

7. Monitis

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

8. PR-CY.ru

Данный сервис оценивает быстроту загрузки сайта, а также дает рекомендации по её улучшению

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

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

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

Определение причины медленной загрузки сайта – первый шаг решения проблемы

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

Для оценки скорости сайта и получения рекомендаций по ее увеличению лучше всего использовать дополнения для Фаерфокса или Хрома Page Speed. Также для этой цели можно использовать онлайн-сервисы оптимизации скорости описанные выше.

Методы ускорения загрузки сайта

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

Один из них – это оптимизация модулей и компонентов сайта.

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

Объединить CSS и JS

Еще один эффективный способ – объединить внешние файлы CSS или скрипты JS. Благодаря этому уменьшается общее число загружаемых объектов и количество запросов к серверу. Еще эти же файлы можно сжать с помощью Gzip.

Ускорение сайта методом оптимизации изображений

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

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

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

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

Лично я оптимизировал сайт seovedenie.ru с помощью сервиса Google Page Speed Insights. После некоторых манипуляций я достиг заветных 100 баллов из 100 возможных. В результате оптимизации скорость сайта увеличилась на порядок во всех сервисах описанных выше.

Набирайте скорость, держитесь крепче … и хорошего полета!

Как увеличить скорость загрузки 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 длительность загрузки страниц до 10 секунд увеличивает показатель отказов на 123%. Это серьёзный повод задуматься над оптимизацией этого показателя. Google рекомендует использовать сервис по измерению скорости загрузки РageSpeed Insights, который даёт рекомендации по улучшению этого показателя. Об инструменте и его функциях я расскажу в посте.

1. Что такое PageSpeed Insights, и в чём его польза

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

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

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

Ниже идёт перечень советов по улучшению скорости загрузки.

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

2. Как проверить показатели в PageSpeed Insights

Для проверки скорости загрузки страницы введите её адрес в строку и нажмите на кнопку «Анализировать».

Посмотреть советы по ускорению загрузки вы можете в разделе «Возможности», где нужно кликнуть на интересующий показатель.

Чтобы не проверять каждую страницу по отдельности, загрузите список URL в Netpeak Checker и на боковой панели отметьте параметры в разделе «Google PageSpeed Insights».

Нажмите на «Старт», чтобы запустить анализ, и по окончании ознакомьтесь с показателями в основной таблице.

3. Как улучшить показатели загрузки сайта

При низких показателях в сервисе PageSpeed Insights можно действовать по-разному:

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

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

  • Сжатие изображений. Все картинки на сайте можно преобразовать в форматы JPEG 2000, JPEG XR WebP, а также уменьшить их размер при помощи онлайн-инструментов. Например, TinyPng или Compressor.io.
  • Оптимизация Javascript и CSS. Сократить код можно с помощью CSSCompressor и YUI Compressor либо вручную.
  • Использование кэширования — сохранения копий страниц сайта в кэше браузеров пользователей. При следующем посещении загрузится копия из кэш-памяти браузера, и это значительно увеличит скорость отображения контента. Для настройки кэширования нужно добавить код в файл .htaccess на сервере Apache (для Nginx не сработает):

показатель max-age означает период времени, в течение которого файл сохраняется в кэше. По истечении этого времени файл считается устаревшим.

  • Использование Gzip-сжатия на сервере. Чтобы не создавать дополнительную нагрузку на сервер, рекомендуется использовать статическое сжатие. Оно заключается в загрузке уже заархивированных файлов с данными на сервер, который будет выдавать их из архивов при запросе браузера.
  • Асинхронная загрузка CSS. В этом случае сначала загружается текст, после него — CSS-стили. Один из способов внедрения асинхронной загрузки — добавление атрибута rel=”preload” на страницы сайта:

    Узнать показатели скорости загрузки можно при помощи Netpeak Spider, который анализирует параметры загрузки контента и ответ сервера. Для проверки необходимо:

      Отметить параметры «Время ответа сервера» и «Время загрузки контента» на боковой панели.

  • Ввести URL сайта в адресной строке и начать сканирование.
  • По окончании сканирования вы увидите нужные показатели в основной таблице с результатами анализа. URL в таблице можно фильтровать по скорости ответа от большей к меньшей и наоборот.

    Чтобы посмотреть URL, на которых найдены ошибка «Большое время ответа сервера», перейдите в отчёт по ошибкам и кликните по названию ошибки.

    Также вы можете отправить отдельные URL на анализ в Google PageSpeed. Для этого щёлкните по URL правой кнопкой мыши и выберите пункт «Открыть URL в сервисе» → «Google PageSpeed».

    Подводим итоги

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

    При низкой оценке сервиса стоит детально изучить скорость загрузки страниц, проанализировав её с помощью других сервисов и краулеров, например, Netpeak Spider. Увеличить скорость можно стандартными методами: с помощью сжатия изображений, таблицы стилей CSS, данных Javascript, путем кэширования страниц и загрузки на сервер заархивированных данных (Gzip).

    Ссылка на основную публикацию
    Adblock
    detector