Проверка скорости гугл

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

Поэтому разбираться в том, что такое Google PageSpeed Insights и обязательно ли следовать его рекомендациям, нужно не только разработчикам, но и владельцам сайтов/менеджерам интернет-проектов.

Это было вступление. А теперь обещанный нюанс.

Google PageSpeed Insights предназначен для тестирования разных версий одной страницы. Сравнивать рейтинги разных сайтов — бессмысленное занятие.

Понимаете? Google PageSpeed Insights — это НЕ сервис для измерения скорости сайта. Это инструмент, показывающий возможные точки приложения усилий для оптимизации скорости загрузки страницы. И разумеется, рейтинг в сервисе не влияет напрямую на ранжирование, а потому использование рекомендаций в отчетах по SEO — лукавство. За исключением ситуаций, когда внедрение этих советов действительно критично влияет на удобство пользователей.

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

Насколько связана реальная скорость загрузки и рейтинг PageSpeed?

Не особо. Вот вам два скриншота из сервиса.

1. Результаты теста страницы обзора Rush Analytics, содержащей много текста и картинок:

Несмотря на размер, страница грузится с приемлемой скоростью — можете проверить самостоятельно.

2. Специально созданная страница http://alexeytrudov.com/test.php — в ней стоит задержка загрузки на 5 секунд (функция sleep(5)):

Разница на 20 пунктов, первая страница в «красной» зоне, вторая — в «желтой». Упс!

Достаточно наглядно, не так ли? Запоминаем: плохой рейтинг — не то же самое, что долгая загрузка. Это просто показатель, что страницу можно сделать быстрее. Но быстрее в 2 раза или на 2% — сервис, конечно же, не скажет. Не потому что с ним что-то не так. Просто он предназначен для другого и это нормально. Принимать решения должен разработчик.

Ладно, но ведь все равно высокий рейтинг полезен для SEO? Раз это сервис от самого Гугла!

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

Т.е. этот рейтинг это скорее шум, чем полезный сигнал для поиска. Сайты-лидеры со сложным функционалом на JS зачастую сидят в «красной» зоне. А вот проекты родом из нулевых, созданные на одном HTML, могут выдавать 80-90 баллов. Кстати, Google никогда не утверждал о взаимосвязи рейтинга своего сервиса и ранжирования.

Но допустим, это и правда важный фактор ранжирования. Что бы мы тогда наблюдали? В ТОПах бы преобладали сайты с высоким рейтингом. Есть такое? Нет!

Вот вам скрин сайта из ТОП-2 Google по запросу «пластиковые окна москва»:

Конечно, это единичный пример. Но если бы это фактор был по-настоящему значим, в ТОП такой сайт бы не допустили. Можно найти множество других кейсов в не менее конкурентных тематиках.

А потому — думаем в первую очередь о реальной скорости загрузки сайта (проверить можно, например, с http://www.webpagetest.org/ ). Если скорость не очень (хуже конкурентов), то в сначала работаем над оптимизацией базы данных и скриптов, которые отображают контент. Их неграмотная организация — причина большинства «тормозов».  А потом уже и PageSpeed Insights пригодится.

Итак, теперь вы знаете, что порой можно игнорировать грозные советы вроде «Исправьте обязательно» — даже если их дает Гугл. Удачи!

UPD: внимательно изучил важность рейтинга Page Speed на большой выборке. Результаты рассказал в докладе на Allintop, см. презентацию и комментарии.

alexeytrudov.com

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

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

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

Шаг #1: Оптимизируем изображения

PageSpeed Insights Tool проверит изображения на вашем сайте, и если скорость их загрузки окажется недостаточно высокой, Google предложит их оптимизировать. Вы можете увеличить скорость загрузки изображений, уменьшив их вес и размер. Чтоб решить эту задачу достаточно выполнить два шага:

• Для начала, сожмите все изображениями инструментами типа Compressor.io или TinyPNG. Оба инструменты бесплатны, но крайне эффективны. В некоторых случаях они сжимают картинки на 80% без потери качества.
• Уменьшите размер изображений до минимально возможного. Допустим, вы хотите, чтоб размер отображаемой на сайте картинки составлял 150x150px. В таком случае фактический размер изображения, хранящегося на вашем сервере, не должен превышать размеров отображаемого изображения, то есть он также должен составлять 150x150px. Не стоит подгонять размер картинки с помощью CSS или HTML кода.

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

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

Шаг #2: Максимально сократите CSS и JavaScript код

Google может попросить вас сократить JavaScript и CSS код.

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

Например, код в документе, приведенном ниже,

может быть сокращен до:

Чтобы быстро решить эту задачу можно установить на свой сервер инструмент, который называется Gulpjs. На основе вашего файла он автоматически создает новый CSS файл, в котором удалены все ненужные пробелы. Фактически, этот инструмент может помочь сократить размер файла в два раза. Еще больше информации о том, как удалить лишние элементы кода, можно почерпнуть в официальном справочном руководстве Google.

А для сайтов на WordPress рекомендуется установить плагин Autoptimize.

Шаг #3: Используйте кэш браузера

Для многих сайтов пункт об использовании кэша браузера — настоящее испытание. Для решения этой проблемы можно использовать сеть CDN.

CDN — это сокращение от content delivery network, то есть “сеть доставки контента”. Чаще всего это множество серверов со специализированным ПО, которые ускоряют доставку (“отдачу”) контента конечному пользователю. С её помощью можно кэшировать и сохранять многие элементы сайта, такие как изображения, CSS и JavaScript файлы. CDN хранит копии содержимого сайта на серверах. Если пользователь заходит на сайт, контент для него загружается с ближайшего к нему сервера.

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

Как результат, сайт загружается значительно быстрее.

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

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

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

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

Если скрипт обнаружит изменения, то новая версия автоматически скачается и сохранится в вашей сети CDN.

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

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

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

Если ваш сайт на WordPress, то решить задачу вам может помочь тот же самый плагин Autoptimize. Зайдите в настройки, уберите галочку возле “Force JavaScript in Head” и поставьте рядом с “Inline all CSS.”

Шаг #5: Включите сжатие

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

Шаг #6: Оптимизируйте сайт для мобильных устройств

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

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

Заключение

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

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

1. Используйте сеть CDN (content delivery network).
2. Удалите код, блокирующий отображение верхней части страницы. (Не размещайте JavaScript в середине файла. Код JavaScript должен находиться в конце документа).
3. Оптимизируйте размер изображений и сожмите их.

Ставили ли вы перед собой задачу оптимизировать скорость работы сайта? Если да, то какие шаги вы предпринимали?

(перевод и адаптация статьи Felix Tarcomnicu How to Achieve 100/100 with the Google Page Speed Test Tool)

spark.ru

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

Вот лишь несколько способов тестирования скорости сайта с помощью различных инструментов:

• Определение скриптов, шрифтов и плагинов, вызывающих увеличение времени загрузки (HTML, JavaScript, CSS);


• Проверка минимизации скриптов;
• Обнаружение больших изображений;
• Тестирование времени до получения первого байта (TTFB);
• Анализ общего времени загрузки, размера страниц и запросов;
• Проверка производительности для различных географических точек;
• Проверка скорости вывода в различных браузерах;
• Анализ HTTP-заголовков;
• Измерение производительности сети («доставка» контента);
• Проверка, какие элементы корректно загружаются из CDN.

Концепции скорости сайта

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

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

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

Блокирующий код Javascript и CSS

К блокирующим вывод относятся скрипты Javascript и стили CSS, которые не дают страницам загружаться так быстро, как они могли бы.

Javascript

Google рекомендует удалять или откладывать загрузку скриптов JavaScript, которые замедляют загрузку. Пример откладывания загрузки скрипта JavaScript путем его размещения непосредственно перед тегом </body>:

CSS

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

• Надлежащие имена файлов CSS;
• Уменьшение количества файлов CSS;
• Использование меньшего объема кода CSS в целом.

CSS — это блокирующий вывод ресурс, для оптимизации времени отображения он должен загружаться клиентом так быстро, как это только возможно!

Минимизация ресурсов

Минимизация ресурсов означает удаление из HTML, JavaScript и CSS кода символов, которые не требуются для загрузки. Таких как:

• Пробелы;
• Символы новой строки;
• Комментарии;
• Разделители блоков.

Это увеличивает скорость сайта, поскольку уменьшает объем кода, который должен быть запрошен с сервера. Чтобы удалить все ненужные символы, можно использовать такие инструменты, как Dan’s CSS и Javascript Minify. Если вы работаете с WordPress, можно использовать плагин Autoptimize, который минимизирует HTML, JavaScript и CSS.

HTTP-запросы

Когда браузер извлекает данные с сервера, он делает это, используя протокол HTTP (Hypertext Transfer Protocol). Это процесс обмена «запрос / ответ» между клиентом и хостингом. Чем больше HTTP-запросов выполняет веб-страница, тем медленнее она будет загружаться.

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

• Объединение файлов CSS и Javascript;
• Встроенные скрипты Javascript (только если они небольшие);
• Использование CSS-спрайтов;
• Уменьшение количества используемых ресурсов, таких как сторонние плагины, которые выполняют большое количество внешних запросов.

Список инструментов для тестирования скорости сайта

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

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

Список инструментов

1. KeyCDN Speed Test

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

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

2. Google PageSpeed Insights

Сервис позволяет проверить скорость сайта и выставляет ему по шкале от 1 до 100. Чем больше число, тем лучше оптимизирован ваш сайт. Все, что выше 85, указывает на то, что ресурс работает хорошо.

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

PageSpeed Insights определяет, насколько страница может быть оптимизирована по таким показателям:

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

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

3. Pingdom

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

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

4. GTmetrix

Он проверяет как показатели PageSpeed, так и YSlow, присваивая сайту категорию от F до A. Сводный отчет разбит на пять разделов, включающих PageSpeed, YSlow, разбивку процесса загрузки, видео и историю.

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

Вы можете проверить и сравнить показатели сайта для различных типов соединений (например, кабель против dial-up), чтобы определить, как это влияет на скорость загрузки страницы. В числе других функций можно отметить воспроизведение видео для анализа и выявления проблем при загрузке, а также возможность запуска Adblock Plus. При отключенной рекламе можно увидеть, как она влияет на загрузку анализируемого сайта:

5. WebPagetest

Предлагает на выбор для тестирования более 40 локаций и 25 браузеров (включая мобильные). Инструмент присваивает сайту категорию от F до А на основе различных тестов производительности, таких как FTTB, сжатие, кэширование, эффективное использование CDN и т.д. Финальный отчет разбит на шесть разделов, включающих в себя общую оценку, детализацию, обзор производительности, проблемы при загрузке контента и скриншоты.

Сервис помогает диагностировать, какие задержки возникают во время первого поиска DNS (о чем упоминалось ранее). WebPagetest содержит также более продвинутые функции, такие как захват видео, отключение Javascript, игнорирование сертификатов:

6. DareBoost

При анализе скорости сайта он учитывает более 100 контрольных параметров. Из них складывается общая оценка от 1 до 100 баллов. Можно сравнить показатели загрузки сайта на стационарных и мобильных устройствах, в Firefox и Chrome, а также для пяти различных географических точек.

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

7. Varvy Pagespeed Optimization

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

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

8. Uptrends

Предлагает более 35 географических точек для тестирования скорости сайта. Предоставляемый отчет состоит из двух разделов: разбивка процесса загрузки и группы доменов. Раздел «Группы доменов» содержит уникальную информацию, так как в нем ресурсы классифицируются по различным источникам: собственные, статистика, CDN, социальные, реклама:

9. dotcom-monitor

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

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

10. PageScoring

Предлагает простой и понятный отчет о производительности. В нем отображается:

• Поиск домена;
• Время соединения;
• Время перенаправления;
• Размер страницы;
• Время загрузки.

После этого можно просмотреть, сколько времени потребовалось для загрузки отдельных элементов страницы:

11. Yellow Lab Tools

Это новый инструмент для тестирования скорости загрузки и качества front-end. Yellow Lab Tools предоставляет много полезной информации и содержит уникальные функции, которых нет в других инструментах. Например, отслеживание того, как взаимодействует JavaScript с DOM во время загрузки страницы.

Сайт получает суммарную оценку на основе следующих критериев:

• Вес страницы;
• Запросы;
• DOM;
• Некачественные скрипты Javascript;
• Некачественные стили CSS;
• Конфигурация сервера.

График JavaScript показывает фактические взаимодействия DOM во время загрузки страницы:

12. DevTools Google Chrome

Это очень простой в использовании инструмент для проверки скорости сайта. Его можно запустить в Google Chrome, используя сочетания клавиш:

• Windows: F12 или Ctrl + Shift + I;
• Mac: Cmd + Opt + I.

В последнем обновлении инструментов для разработчиков в графики процесса загрузки были добавлены панели сводных данных. Это позволяет увидеть, на загрузку какого элемента требуется большего времени. Чтобы увидеть эту информацию, кликните по панели шкалы времени и нажмите Ctrl + R (Cmd + R), чтобы обновить страницу. Затем можно кликнуть по панели «Сводка» и «Сводные данные«:

В инструментах для разработчиков можно увидеть точное время загрузки контента DOM и общее время загрузки. Для просмотра этой информации кликните по панели «Сеть«, нажмите на кнопку «Показать обзор» и Ctrl + R (Ctrl + R), чтобы обновить страницу. Синяя линия будет показывать время загрузки контента DOM, а красная — общее времени загрузки. Обычно все, что находится слева или соприкасается с синей линией — это элементы, которые блокируют DOM (ресурсы блокирующие вывод):

13. Sucuri Load Time Tester

Инструмент предоставит полную оценку производительности по шкале от A до F. Тест измеряет, сколько времени проходит от подключения к сайту или одной странице до полной загрузки. Параметр «время до получения первого байта«, показывает, сколько времени потребовалось для начала обработки страницы:

14. Pagelocity

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

Инструмент показывает, работает ли сайт через HTTPS, каково значение TTFB, и через диаграмму в графической форме отображает время загрузки элементов DOM:

Представление ресурсов позволяет быстро определить, какие элементы составляют общий вес страницы. На приведенном ниже скриншоте теста видно, что объем изображений более чем в 4 раза превышает объем внешних скриптов:

15. YSlow

YSlow выполняет тестирование скорости сайта в три этапа:

• Сканирует DOM, чтобы найти все компоненты (изображения, скрипты и т.д.);
• Получает информацию о размере каждого из компонентов (Gzip, неактуальные заголовки и т.д.);
• Принимает данные и дает оценки по каждому из правил.

YSlow оперирует 23 различными правилами, как показано ниже на примере теста. Можно использовать бесплатное расширение для Chrome или получить результаты YSlow от GTMetrix.

Тестирование скорости сайта с помощью расширений для браузера Google Chrome

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

Вот некоторые из них:

• Page Load Time;
• app.telemetry Page Speed Monitor;
• Performance-Analyser;
• LoadFocus Load Testing.

Тестирование скорости мобильных версий сайтов

Это позволяют сделать следующие инструменты:

• WebPageTest;
• GTMetrix;
• DareBoost;
• dotcom-monitor.

Другой способ проверить скорость сайта — использовать инструменты для разработчиков Chrome в режиме устройства. Чтобы войти в режим устройства, кликните по иконке телефона в Chrome DevTools или нажмите Ctrl + Shift + M (Cmd + Shift + M). После этого можно выбрать устройство, которое нужно имитировать. Также можно изменить настройки сети, чтобы увидеть, как сайт будет отображаться при 2G или 4G соединении.

Затем на вкладке «Сеть» можно запустить тест скорости:

www.internet-technologies.ru

Что такое google pagespeed insights

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

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

Как пользоваться pagespeed insights

Чтобы воспользоваться инструментом онлайн-измерения скорости загрузки сайта, перейдите на официальную страницу сервиса. Введите URL страницы и нажмите кнопку «Анализировать».

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

Отношение полученных баллов к максимальному стобальному результату выражает степень оптимизации сайта. Значения 50-70% являются средними показателям большинства ресурсов, не задумывающихся об улучшении скорости загрузки. 80-90% означает, что вы основательно подготовили сервер и страницы. Стопроцентный результат является большой редкостью, но иногда встречается.

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

Советы по улучшению скорости загрузки сайта

Для администраторов многих порталов остается загадкой, как же получить заветные 100100 в Google Pagespeed Insights. Оказывается, добиться практически идеального результата можно легко, соблюдая основные приемы оптимизации

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

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

• Попробуйте сохранять все внутренние картинки в формате .jpg и качеством 0.5-0.7
• Используйте специальные инструменты сжатия: TinyPNG или compressor.io
• Установите специальные скрипты для предварительной загрузки заготовленных обрезанных изображений

Максимально используйте кэш браузера

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

“<ifModule mod_headers.c>

<FilesMatch «.(htm|html)$»>

Header set Cache-Control «max-age=40200»

</FilesMatch>

<FilesMatch «.(css|js|txt|woff|woff2|ttf|eot)$»>

Header set Cache-Control «max-age=624800»

</FilesMatch>

<FilesMatch «.(swf|flv|ico|gif|jpg|jpeg|png)$»>

Header set Cache-Control «max-age=2552000»

</FilesMatch>

<FilesMatch «.(pl|php|cgi|spl|scgi|fcgi)$»>

Header unset Cache-Control

</FilesMatch>

</IfModule>”

Подключите сжатие

Если вы когда-то не включили сжатие на стороне сервера, нужно это сделать прямо сейчас. Есть два варианта сжатия. При установленной CMS подключите сжатие в панели управления, если CMS нет, перейдите в конфигурацию Apache и включите Gzip-сжатие там.

Чтобы проверить, работает ли сжатие, обновите сайт и рассмотрите присланные браузеру заголовки. Если там присутствует строка Content-Encoding: gzip, все прошло отлично.

Минимизируйте объем CSS и JavaScript

Все .js файлы должны быть минифицированы. Для популярных библиотек есть специальные издания в формате .min.js. Если вы не нашли такую редакцию или имеете собственный код, к вашим услугам предоставляются онлайн-минификаторы, например Closure Compiler.

С CSS кодом помогут разобраться такие же минификаторы, например cssminifier.

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

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

Загрузите блокирующего кода в конце страницы

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

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

Существует три важных совета по исправлению этого пункта.

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

“function addCss(fcss) {
xh = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject(«Microsoft.XMLHTTP»);
xh.open(«GET», fcss, !1);
xh.send();
var at = document.createElement(«style»);
at.innerHTML = xh.responseText;
document.head.appendChild(at);
}
addCss(‘default.css’);”

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

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

Постарайтесь подобрать оптимальную конфигурацию веб-сервера для быстрой отдачи контента. Первым шагом будет установка связки Nginx+Apache для мгновенной отдачи статики кэширующим прокси.

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

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

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

На что влияет скорость загрузки страницы

Возникает закономерный вопрос: для чего мы улучшаем эти параметры, и как они сказываются на продвижении сайта?

Статистика говорит, что если пользователь ждёт загрузку больше трех секунд, в 40% случаев он просто покидает страницу. Что ещё хуже, 80% посетителей отказываются от повторного визита на медленный сайт.

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

semantica.in

Зачем нужна проверка скорости сайта

Прыть интернет-площадки зависит от множества факторов из серверной и клиентской части. Серверная часть подразумевает особенности хостинга (серверы Nginx и Apache, сжатие, кэширование на стороне сервера) и базы данных – это редиректы, количество HTTP-запросов, сетевые настройки.

Клиентская часть зависит от:

• размера страницы;
• асинхронной нагрузки;
• сжатия графики и расширения файлов;
• скриптов и плагинов;
• масштабирования изображений;
• кэширования на стороне браузера;
• CSS и JavaScript;
• веб-шрифтов.

Скорость загрузки сайта – важная метрика, влияющая на индексацию, ранжирование и конверсию. Поисковым роботам даётся определенный лимит времени на посещение ресурса: чем дольше грузится контент, тем меньше страниц они успеют проиндексировать. Являясь значимым элементом юзабилити, быстродействие влияет на сортировку сайтов в выдаче.

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

Что касается конверсии, здесь всё очевидно: посетители не готовы долго ждать отрисовки страницы. Особенно это касается мобильных пользователей (на них приходится более 50% в Google). Учтите, что скорость 2G/3G/4G ниже показателя оптоволоконной или широкополосной сети. Если сайт грузится дольше 3 секунд, половина аудитории просто закроет вкладку. При этом 88% пользователей не возвратятся на сайт после неудачной попытки.

Читайте также: ТОП-10 хостингов

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

10 лучших сервисов проверки скорости загрузки сайта

Чтобы стать лидером в поисковой выдаче и не потерять любовь потенциальных клиентов, надо регулярно проверять скорость загрузки сайта при помощи анализаторов. Сервисы не только оценят web-проект, но и выявят слабые места – их оптимизацией вам и предстоит заняться.

Google PageSpeed Insights

Благодаря этому популярному сервису вы за считаные секунды узнаете уровень быстродействия своего сайта для компьютеров и мобильных устройств. Анализатор в реальном времени оценивает параметры FCP (первую отрисовку содержимого страницы) и DC – полную загрузку HTML с построением DOM-дерева. Он вычисляет процент оптимизации и даёт рекомендации по улучшению. Таким образом можно ускорить блог в 2-3 раза.

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

Pingdom Tools

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

Чтобы проверить скорость загрузки:

1. Перейдите в сервис: tools.pingdom.com.
2. Укажите в поле URL интересующий вас адрес.
3. Выберите «Стокгольм, Швецию» в графе Test from (это максимально близко к нам из предложенных вариантов).
4. Нажмите Start Test.

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

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

Это интересно: Как проверить историю домена

PR-CY

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

Для работы с инструментом перейдите на его главную страницу и введите url. Затем определитесь с уровнем проверки (для компьютера или телефона), нажмите «Анализировать».

Site Speed

Данная платформа сообщит вам о скорости загрузки сайта в разных точках земного шара, а также среднем показателе. Зелёным цветом сервис подсвечивает лучшие показатели, красным – худшие.

Чтобы промониторить сайт, перейдите на sitespeed.me, укажите адрес сайта и нажмите «Отправить».

Web Page Test

Это многофункциональный анализатор, который загружает страницу несколько раз, сравнивая количество обращений. Он определяет скорость загрузки для каждой категории элементов сайта и самую медленную группу запросов – пользователю предоставляется полная статистика обоих тестов. Особенностью Web Page Performance Test является выбор аудита отдельно для компьютера, Android и Apple.

Хотите воспользоваться возможностями сервиса? Откройте его главную страницу, введите в главное поле адрес сайта, после чего выберите из списка нужное вам устройство и браузер, нажмите START TEST.

Актуально: Mobile First Index — что это и как работает

GTmetrix

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

Чтобы протестировать ресурс, перейдите на gtmetrix.com, укажите адрес и нажмите Analyze.

SeoLik

Принцип работы тот же: зайдите в сервис, укажите url, введите капчу и нажмите на кнопку «Анализировать» (для начала работы придётся пройти авторизацию).

Расширенный анализ доступен раз в сутки. Здесь выставляется общая оценка производительности, а также скорость сайта для ПК и мобильных устройств по отдельности. С детальной информацией по каждому пункту можно ознакомиться в разделе «Юзабилити» и «Мобильность» внизу отчёта.

Web Page Analyzer

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

Для тестирования откройте Web Page Analyzer, введите адрес страницы и нажмите на кнопку «Отправить».

Which Load Faster

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

Читайте также: Сервисы проверки позиций сайта в поиске

internet-marketings.ru

Как скорость сайта влияет на ранжирование

Плохая скорость загрузки сайта образует комплекс проблем, где явные и скрытые аспекты оказывают существенное влияние на ранжирование ресурсов в выдаче. Среди очевидных причин потери позиций и невозможности эффективного продвижения значатся поведенческие факторы: время ответа сервера не всегда учитывается при анализе, но оно напрямую влияет на bounce rate (показатель отказов). Высокое время ожидания ведет к большому количеству покинувших сайт после просмотра 1 страницы, что принимается во внимание Яндексом.

Более тонко подошел к ситуации Гугл: в результате проведенного в 2009 году исследования выяснилось, что незначительное увеличение времени ожидания при поиске со 100 до 400 мс снижает количество запросов от одного пользователя на 0.2-0.6%. Данный губительный «эффект» сохраняется даже после восстановления исходных значений скорости. Вывод очевиден: при наличии в выдаче «медленных» сайтов Google теряет клиентов, что ведет к финансовым потерям компании. В этой связи с 2010 года поисковый гигант учитывает время загрузки сайтов при ранжировании.

Хорошая скорость загрузки – это сколько?

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

На сегодняшний день скорость загрузки подразделяют на:

• Среднюю  –  2 секунды,
• Медленную  –  > 3-4 секунд,
• Нормальную  –     1 секунды.

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

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

Так же многие считают, что если главная загружается быстро — всё окей, забывая о том, что страницы каталогов может быть в разы тяжелее или отдельная страница может иметь несколько изображений по 1-2mb, что существенно снизит ее скорость загрузки. Потому рекомендую проверять ВСЕ страницы своего сайта.

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

ТОП сервисов для оценки скорости сайта

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

Google PageSpeed Insights

Адрес: developers.google.com/speed/pagespeed/insights
Инструмент для проверки скорости загрузки сайта от Гугл. Проводится анализ данных по «компьютерной» и мобильной версиям.  Отображаемая оценка по шкале от 0 до 100 отражает текущее состояние ресурса.

По результатам теста Google Page Speed предлагает внести корректировки и приводит конкретные способы:

Gtmetrix

Адрес: gtmetrix.com

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

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

WhichLoadFaster

Адрес: whichloadsfaster.co

Инструмент, позволяющий сравнить скорость загрузки 2 сайтов в режиме реального времени. Результат отражается в виде секунд (миллисекунд), а на экран выводится победитель «дуэли». Удобный способ сравнения сайта с конкурентами.

Сервис дает возможность проверить два любых ресурса и даже устроить «гонку» между двумя группам по 3 URL в каждой.

Pingdom Tools

Адрес: tools.pingdom.com

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

Финальный отчет содержит данные о процентном соотношении разных типов контента и их «весе»:

Приводятся предметные сведения о запросах:

Web Page Performance Test

Адрес: webpagetest.org

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

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

Load Impact

Адрес: loadimpact.com

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

Доступен широкий выбор инструментов для точной оценки параметров.

PR-CY

Адрес: pr-cy.ru/speed_test

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

WebPage Analyzer

Адрес: websiteoptimization.com/services/analyze

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

Monitis Tools

Адрес: monitis.com/pageload

Система предлагает провести проверку скорости загрузки с анализом данных при запросах с разных мест (стран, континентов) Земли. Отчет содержит полноценные графические сведения.

SiteSpeed.me

Адрес: sitespeed.me

Аналог Monitis, посылающий запросы с более чем 25 разных дата-центров со всего мира. Отображает скорость работы сайта для каждого сервера (места нахождения – США, Россия, Великобритания и т.д.).

Яндекс.Метрика

Адрес: metrika.yandex.ru

Интерфейс Яндекс.Метрики предлагает сервис группы «Мониторинг» – «Время загрузки страниц».

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

romanus.ru

Google PageSpeed Insights — проверка скорости загрузки страницы сайта

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

Для анализа сайта перейдите по ссылке — https://developers.google.com/speed/pagespeed/insights/

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

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

Рекомендации обычно у всех стандартные:

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

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

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

• Сократите CSS

• Оптимизируйте изображения — это обычно сильно повышает показатель по PageSpeed Insights

• Сократите JavaScript

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

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

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

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

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

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

• GTmetrix
• WhichLoadFaster
• Pingdom Tools
• Web Page Performance Test
• Monitis Tools
• SiteSpeed.me
• Load Impact
• WebPage Analyzer

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

Как улучшить скорость загрузки страниц сайта

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

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

Проверьте, а не весят ли картинки сайта на слайдере главной страницы или в других блоках по несколько мегабайт — и такое бывает!

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

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

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

Также обратите внимание на разрешение изображения. Если фото напрямую с фотоаппарата, то этот показатель скорее всего 300 dpi и можно смело его уменьшать до 72 dpi — этого более чем достаточно для сайта.

В фотошопе я сохраняю картинку в режиме «Сохранить для Web» — это также плюс оптимизации изображения.

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

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

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

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

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

Используйте кэширования страниц сайта

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

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

Если Ваш сайт сделан на wordpress, то наилучшим решением будет плагин WP Fastest Cache, но будьте осторожны — плагин может конфликтовать с некоторыми скриптами. Например, недавно начал сильно тупить слайдер на сайте клиента, оказалось что именно данный плагин перестарался с кэшированием. Но в целом такие случаи единицы и можете попробовать на своем проекте.

На этом пожалуй все. Быстрых сайтов всем моим читателям!

Поделитесь статьей с друзьями