Инструмент проверки скорости Pingdom - как улучшить результаты Pingdom

Сайты с быстрой загрузкой всегда получают больше трафика по сравнению с медленными, что влияет на рейтинг и производительность. В этой статье я расскажу об инструменте Pingdom Speed ​​Test, который поможет вам понять любые проблемы с производительностью вашего сайта. Цель состоит в том, чтобы понять, насколько быстрым является ваш сайт и как вы можете сделать его быстрее.

Слишком часто пользователи неверно интерпретируют данные инструмента Pingdom Speed ​​Test до такой степени, что скорость их веб-сайтов ухудшается. Помните, что всегда используйте все инструменты по инструкции, потому что они не на 100% точны.

Что такое инструмент проверки скорости Pingdom и что он предлагает?

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

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

Давайте посмотрим, как вы можете выполнить тест на Pingdom. Использование инструмента Pingdom Speed ​​Test не составляет большого труда - просто нужно перейти на сайт Pingdom, ввести свой URL-адрес и выбрать местоположение в соответствии с местоположением ваших посетителей. Затем нажмите кнопку «Начать тест» .

Инструмент Pingdom Speed ​​Test позволяет вам протестировать ваш сайт в 7 разных местах тестирования (5 континентов) по всему миру:

• Азия - Япония - Токио
• Европа - Германия - Франкфурт
• Европа - Великобритания - Лондон
• Северная Америка - США - Вашингтон, округ Колумбия
• Северная Америка - США - Сан-Франциско
• Тихий океан - Австралия - Сидней
• Южная Америка - Бразилия - Сан-Паулу

Итак, какое место для тестирования скорости веб-сайта Pingdom было бы лучше всего для тестирования? Это зависит от посетителей вашего сайта. Обязательно выберите место, которое находится рядом с вашими посетителями. Если аудитория вашего сайта находится в Европе , у вас есть 2 варианта на выбор: (Европа - Германия - Франкфурт) или (Европа - Великобритания - Лондон) . Если на ваш сайт заходят посетители со всего мира, протестируйте его в разных местах и ​​примите соответствующие меры для улучшения.

Понимание анализа водопада с помощью инструмента проверки скорости Pingdom

Веб-страница обычно представляет собой комбинацию файлов HTML, CSS, JavaScript и мультимедийных файлов , и каждый из них генерирует запрос для отображения на сервере. Увеличение количества запросов могло быть причиной медленной скорости работы сайта. В инструменте Pingdom Speed ​​Test есть несколько разделов, в которых указаны оценки и предложения по улучшению. Разделы инструмента Pingdom Speed ​​Test:

• Резюме Pingdom
• Повышение производительности страницы
• Коды ответов
• Размер контента и запросы по типу контента
• Размер контента и запросы по домену
• Диаграмма водопада

В этом разделе я собираюсь объяснить вам, как можно провести анализ водопада, и я разбью каждый раздел Pingdom и объясню более подробно.

Резюме Pingdom

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

Если вы протестируете свой сайт несколько раз, вы заметите, что время загрузки вашего сайта меняется при каждом тесте, в то время как другие результаты (оценка производительности, размер страницы и запросы) остаются неизменными. Причиной такой разницы во времени загрузки является кеш DNS, кеш CDN, кеш WordPress и внешние API.

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

Повышение производительности страницы

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

Давайте посмотрим на эти предложения.

1) Используйте сеть доставки контента (CDN)

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

Если вы являетесь пользователем Cloudways, вы можете воспользоваться CloudwaysCDN. Все планы хостинга Cloudways имеют встроенный CloudwaysCDN, который можно включить несколькими щелчками мыши. Чтобы узнать больше, посетите блог WordPress CDN на Cloudways.

Давайте посмотрим на некоторых сторонних поставщиков CDN:

1. KeyCDN
2. CloudFlare CDN
3. Amazon CloudFront
4. CDN77

Здесь вы можете увидеть результаты тестирования WordPress CDN трех широко используемых популярных провайдеров CDN.

2) Избегайте ошибки HTTP 404 (не найдено)

Ошибка Avoid HTTP (404) отображается в предложении инструмента Pingdom Speed ​​Test, когда запрос не может быть успешно завершен. Неработающая ссылка, например, когда вы вручную прикрепляете ссылку на удаленное изображение внутри страницы, приводит к ошибке 404.

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

3) Минимизировать перенаправления

Наиболее частое предложение инструмента Pingdom Speed ​​Test - «минимизировать перенаправления». Перенаправление происходит, когда одна страница вашего сайта вызывает загрузку другой страницы. Это может произойти, если вы перенаправляете HTTP на HTTPS , с www на не-www , а URL-адрес обновленного сообщения изменился.

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

1. Никогда не ссылайтесь на страницу, на которой уже есть перенаправление, так как это может вызвать множественные перенаправления.
2. Обязательно удалите деактивированные / неиспользуемые плагины, которые могут привести к ненужным перенаправлениям.
3. Создавая ссылки на своем сайте, используйте правильный префикс HTTP или HTTPS и проверьте, является ли он префиксом www или не www.

Если вы хотите узнать больше о перенаправлениях, ознакомьтесь со статьей Cloudways о перенаправлениях WP 301.

4) Добавить заголовки с истекающим сроком действия

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

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

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

Добавление заголовков Expires с помощью плагина

Установите плагин W3 Total Cache. После установки и активации перейдите в Панель управления WordPress> Производительность> Кэш браузера , затем включите параметр «Установить срок действия заголовка» и сохраните изменения.

Если вам интересно узнать больше о плагине W3 Total Cache, прочтите статью Cloudways о том, как использовать плагин WordPress W3 Total Cache для более быстрых веб-сайтов.

Добавление заголовков Expires с помощью кода

Вы также можете добавить заголовки Expires с помощью кода. Для этого выясните, использует ли ваш сайт серверы Apache или Nginx. Для этого запустите свой сайт в браузере, нажмите Ctrl + Shift + I, чтобы перейти в сеть сайта (возможно, вам нужно обновить сайт один раз), нажмите на доменное имя вверху и перейдите к заголовку раздел. Там вы найдете имя вашего сервера.

Чтобы добавить заголовки Expires на сервер Apache, войдите в свой файл .htaccess, используя любой FTP-сервер (Filezilla) и указанный код в верхней части файла .htaccess.

 ## ИСКЛЮЧАЕТ КЭШИНГ ЗАГОЛОВКИ ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image / jpg «доступ на 1 год»
ExpiresByType image / jpeg "доступ на 1 год"
ExpiresByType image / gif "доступ на 1 год"
ExpiresByType image / png "доступ на 1 год"
ExpiresByType image / svg "доступ на 1 год"
ExpiresByType text / css "доступ на 1 месяц"
Заявление ExpiresByType / pdf "доступ на 1 месяц"
Приложение ExpiresByType / javascript "доступ на 1 месяц"
Приложение ExpiresByType / x-javascript "доступ на 1 месяц"
Приложение ExpiresByType / x-shockwave-flash "доступ 1 месяц"
ExpiresByType изображение / значок x "доступ на 1 год"
ExpiresDefault "доступ 3 дня"
</IfModule>
## ИСКЛЮЧАЕТ КЭШИНГ ЗАГОЛОВКИ ##

В Cloudways вы не можете вносить какие-либо изменения на уровне Nginx, но вы можете использовать правила Apache и добавлять заголовки Expires в файл .htaccess ваших приложений. Для получения дополнительной информации ознакомьтесь со статьей Cloudways Использование кеширования браузера в WordPress для оптимизации времени загрузки страницы.

5) Делайте меньше HTTP-запросов

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

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

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

• Удалите HTTP-запросы, удалив ненужные плагины, которые не добавляют ценности вашему сайту, потому что плагины обычно загружают свои собственные CSS и JavaScript.
• Объедините HTTP-запросы, объединив несколько файлов CSS в один файл CSS. Сайт загружается быстрее, потому что браузеру нужно делать меньше запросов.
• Одна из лучших стратегий - заменить тяжелый плагин более легкими.
• Хотя изображения делают ваш сайт более привлекательным и повышают ценность вашего сайта, удалите ненужные изображения и всегда используйте оптимизированные изображения (вы можете использовать ShortPixel и WP Compress для оптимизации изображений).
• Используйте отложенную загрузку изображений и видео.

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

6) Сжатие компонентов с помощью GZIP

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

Cloudways поставляется с установленным плагином Breeze, поэтому вы можете добиться сжатия GZIP, просто установив и активировав плагин кеширования Breeze WordPress.

Вот рекомендуемые плагины для сжатия GZIP:

• GZIP с WP Rocket
• GZIP с WP Super Cache
• GZIP с W3 Total Cache

W3 Total Cache - это плагин для кеширования в бесплатной версии. Вам просто нужно установить и активировать плагин, и сжатие GZIP будет автоматически включено на вашем сайте. Перейдите в « Производительность»> «Общие настройки» и включите «Кэш браузера» . После внесения изменений нажмите кнопку «Сохранить все изменения» .

7) Избегайте пустых Src или Href

HTML-атрибуты без установленного значения (без информации в кавычках) называются «пустыми» атрибутами. Пустой атрибут источника (src) и ссылки (href) подчеркивают, что браузер должен подключиться, даже если нет значения унифицированного идентификатора ресурса (URI).

Вот несколько примеров пустых тегов Source (src) и Link (href) в HTML и JavaScript :

HTML:

 <img src = ””>
<a href="">

JavaScript:

 var img = новое изображение ();
img.src = "";

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

8) Поместите JavaScript внизу

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

Сохраните файл JavaScript с расширением .js (my-amazing-script.js) и поместите этот файл JS в каталог своей темы (вы можете создать каталог для сценариев JavaScripts, то есть public_html / wp-content / themes / your-theme / assets / js). После размещения файла JavaScript отредактируйте файл functions.php вашей темы и добавьте этот код:

 function wpb_adding_scripts () {
wp_register_script ('мой-удивительный-скрипт', get_template_directory_uri (). '/js/my-amazing-script.js','','1.1', true);
wp_enqueue_script ('мой-удивительный-скрипт');
}
add_action ('wp_enqueue_scripts', 'wpb_adding_scripts');

Используется функция wp_register_script () и в нее входят:

 <? php
wp_register_script ($ handle, $ src, $ deps, $ ver, $ in_footer);
?>

Установите для параметра $ in_footer значение true, чтобы добавить скрипт в нижний колонтитул или внизу страницы WordPress.

Коды ответов

Следующий раздел в инструменте проверки скорости Pingdom - это коды ответа, также называемые кодами состояния HTTP. В этом разделе рассказывается, что происходит со всеми ресурсами, которые вы загружаете на страницу. Вот некоторые из распространенных:

• 200 - Все ок
  301 - Запрошенный ресурс был перемещен навсегда
  404 - Запрошенный ресурс не найден

Код ответов в диапазоне от 200 до 300 обычно подходит, но коды от 400 до 500 обычно называют ошибками, которые следует исправить.

Размер контента и запросы по типу контента

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

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

Размер контента и запросы по домену

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

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

Диаграмма водопада

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

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

Резюме

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

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