Скорость работы сайта имеет немалое значение, поскольку сейчас такое время, когда все спешат и ожидают быстрых результатов. Эффективное обслуживание означает множество плюсов, в том числе повышение позиции в результатах поиска, улучшение пользовательского опыта, увеличение трафика, конверсии. Поэтому целесообразно оптимизировать веб-сайт и приспособить его к требованиям поисковой системы Google и пользователей.
Чем скорее, тем лучше. Ниже изложен список основных преимуществ ускорения работы сайта:
Повышение показателя качества. Еще одним преимуществом является улучшение качества кампаний Google Рекламы. Идет речь о качестве целевой страницы. Чем выше показатель качества, тем больше шансов, что реклама окажется выше конкурентов и будет стоить дешевле.
Снижение показателя отказов — если страница загружается слишком медленно, она будет генерировать отказы. Пользователь еще не увидит веб-сайт, но уже покинет его и, безусловно, воспользуется предложением конкурентов, которые уважают его время, обслуживая оптимизированный веб-сайт.
Улучшение конверсии.
Чем раньше пользователь получит информацию, тем больше шансов, что он совершит конверсию. Это относится ко всем каналам (органический трафик, реклама, социальные сети).
Удовлетворенность пользователей — это важно. Каждый хочет, чтобы страница, которую он посещает, загружалась как можно быстрее. Поэтому стоит произвести хорошее впечатление и удивить пользователей скоростью и плавностью работы веб-сайта.
Улучшенная индексация страниц роботами — роботы Google лучше сканируют и индексируют страницы быстрее. Стоит отметить, что роботы могут пропускать "громоздкие" сайты, задерживая их включение в индекс.
Прежде чем ускорить страницу, следует знать об инструментах, с помощью которых можно проанализировать ее скорость и получить список элементов, влияющих на длительное время загрузки страницы. Указанные ниже инструменты бесплатны.
Google PageSpeed Insights
Как следует из названия, это инструмент анализа скорости веб-сайта Google. Google PageSpeed Insights позволяет легко и быстро анализировать каждую страницу, определяя ее производительность как на компьютерах, так и на мобильных устройствах (смартфонах).
Чтобы проверить скорость веб-сайта, нужно ввести его URL-адрес и нажать кнопку анализа. В результате проверки появляется отчет с большим количеством полезной информации. Важным разделом отчета является список элементов, отрицательно влияющих на скорость работы сайта, и рекомендуемые решения.
Google PageSpeed Insights — тест для мобильных и настольных устройств
В текущей версии инструмент Google PageSpeed Insights также показывает ссылки на специальные руководства для популярных систем CMS. В зависимости от проблемы на сайте приходит ссылка на руководство с инструкциями по ее решению.
GTmetrix
Еще один инструмент, с помощью которого можно проверить работу веб-сайта. Его отличает то, что в отчете анализируемый сайт получает две отметки по скорости загрузки страницы. Первый определяется руководящими принципами Google, а второй — руководящими принципами Yahoo. В результате можно получить персональные инструкции для веб-сайта и анализировать загруженные ресурсы.
Тест скорости веб-сайта Pingdom
Инструмент Pingdom, помимо списка рекомендаций и элементов, влияющих на время загрузки страницы, позволяет выбрать расположение сервера, с которого будет выполняться тест. Очевидно, что нужно выбирать ближайший к хостингу или ориентироваться на местоположение потенциальных пользователей сайта.
Google Analytics
Если есть тег отслеживания, выполненный в коде веб-сайта, можно подвергать анализу скорость загрузки посещенных страниц. Для этого следует перейти на вкладку Behavior -> Site Speed, где можно увидеть, например, время загрузки отдельных веб-сайтов или рекомендации инструмента Google PageSpeed Insights для каждого из них.
Другие инструменты анализа скорости:
DNSpref — испытывает производительность поставщика DNS.
WebPageTest — расширенный тест, который занимает гораздо больше времени. Инструмент несколько раз исследует страницу, усредняет результат и представляет большой объем информации.
Google Mobile Speed Test — нацелен на анализ удобства использования мобильных устройств.
Key CDN Speed Test — отчет хранит основную информацию о скорости загрузки страницы.
Элементы, воздействующие на скорость загрузки страницы
Ниже приведены наиболее важные элементы, влияющие на производительность и время загрузки веб-сайта. Некоторые из них связаны с сервером и способом передачи ресурсов, а остальные — с SEO, то есть оптимизацией сайта. У каждого элемента есть определение и описание того, как его улучшить.
Что можно улучшить на сайте:
1. Изменение размера фотографий, сжатие и новые форматы.
Один из самых распространенных элементов, увеличивающих время загрузки веб-сайта, — это неоптимизированные изображения. В основном это относится к формату графики, их сжатию и размерам фотографии на сервере по отношению к изображению, отображаемому на веб-сайте. Они должны быть такими же. Например, нужно избегать уменьшения размера изображения с помощью CSS.
Изменяя формат изображения, например, на WebP, который является лучшим форматом сжатия, можно сэкономить много килобайт и значительно ускорить время загрузки веб-сайта.
Как использовать формат WebP? Если сайт основан на движке WordPress, стоит использовать плагин Webp Express, но конфигурация сервера часто влияет на его корректную работу. Можно разместить фотографии в стандартном формате и формате Webp на сервере и подготовить исходный сценарий, который, в зависимости от браузера, будет отображать соответствующий формат изображения. Это особенно важно, потому что некоторые браузеры еще не поддерживают этот формат.
2. Ленивая загрузка.
Это механизм, цель которого — загружать графику на веб-сайт только тогда, когда она необходима, то есть когда пользователь прокручивает содержимое веб-сайта и находит фрагмент с графикой. В результате страница будет загружаться быстрее.
Как включить ленивую загрузку? Эта функция доступна по умолчанию с версии 5.5 WordPress, в более старых версиях этого ПО стоит использовать, например, плагин A3 Lazy Load.
Но не не всегда есть возможность включить ленивую подгрузку в движке. Например, если это обычная статья и в ней содержится несколько картинок. Можно использовать использовать такой скрипт. У изображения убираем атрибут src, добавляем data атрибут data-src="Ссылка на картинку", скриптом устанавливаем значение атрибута src из атрибута data-src
window.onload = function() {
[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) {
img.setAttribute('src', img.getAttribute('data-src'));
img.onload = function() {
img.removeAttribute('data-src');
};
});
};
3. Видео на сайте.Это может быть фатальным для сервера, особенно если у видео есть ограничения полосы пропускания и фильм часто воспроизводится. Это может вызвать задержки или даже перебои в воспроизведении.
Что делать?
Обязательно стоит остерегаться больших видеофайлов. Такая практика отрицательно сказывается на времени загрузки страницы и опыте пользователей.
Размещение фильма на собственном сервере неэффективно, гораздо лучшим решением было бы разместить видео на внешней платформе, такой как YouTube, и сделать фильм доступным на веб-сайте. Такая процедура сэкономит место на сервере и сократит время загрузки фильма или страницы. Потому что серверы YouTube являются одними из лучших и расположены по всему миру. Кроме того, YT регулирует качество видео в зависимости от пропускной способности интернет-соединения пользователя. Это означает, что если медленное интернет-соединение, видео будет более низкого качества. Эффект будет заключаться в том, что видео будет отображаться намного быстрее и с меньшей вероятностью прерывания воспроизведения (клипов). Атрибут loading = "lazy" также может быть назначен видео iframe на странице, что должно немного ускорить время загрузки страницы.
Обычной практикой для ускорения загрузки страницы является размещение графики со значком воспроизведения, напоминающим видеоплеер. Только после нажатия на картинку начнется загрузка видео или загрузка скриптов плеера YouTube. Однако использование такого решения требует навыков программирования.
4. Минификация файлов JavaScript, CSS и HTML.
Что такое минификация файлов? Это не что иное, как удаление ненужных пробелов, вводов, табуляции и комментариев из файлов HTML, JavaScript и CSS, которые не имеют отношения к интерпретатору кода и без необходимости увеличивают размер файлов. Минифицированные файлы легче, и в результате страница загружается быстрее.
Как включить минификацию файлов? Можно написать собственный скрипт, который удалит ненужные символы из файлов. Для веб-сайтов с движком WordPress стоит использовать плагин WP Fastest Cache. CloudFlare также минимизирует файлы.
5. Использование кеша браузера.
Кеширование браузера — это место на устройстве пользователя, где статические элементы веб-сайта могут быть сохранены (в течение определенного периода времени). Идет речь о хранении данных на мобильных устройствах, планшетах, компьютерах. В результате когда пользователь переходит на следующую подстраницу или посещает веб-сайт через несколько дней, некоторые ресурсы загружаются прямо с устройства, что значительно ускоряет загрузку страницы.
Как включить кеш браузера? Сделать это можно несколькими способами, например, изменив настройки в панели администрирования сервера. Самый популярный вариант — установить кеш браузера в файле .htaccess.
6. Ограничение и оптимизация кода.
Еще один фактор, который не оказывает оптимального влияния на скорость загрузки сайта — это избыточный код. Это особенно верно для сценариев PHP и JS, которые не используются, но тем не менее загружаются и обрабатываются сервером или браузером.
В WordPress и других популярных системах CMS эта проблема обычно вызвана чрезмерным количеством установленных плагинов. Особенно, когда используются многофункциональные плагины и только выбранные функции — весь код плагина и другие функции по-прежнему загружаются и выполняются.
Проблема оптимизации кода сложна и касается также дублирования избыточных тегов и стилей, например, каждый абзац в коде имеет идентичный встроенный стиль, в результате чего он повторяется несколько десятков раз.
Как ограничить и оптимизировать код? Прежде всего, избегать установки нескольких плагинов. Устанавливать только те, которые действительно используются и необходимы для работы сайта. Часто бывает, что функциональность плагина не нужна, и можно легко достичь того же эффекта без нее, например, созданием перенаправлений, оптимизацией графики, реализацией аналитических тегов.
Стоит проанализировать свои внутренние скрипты и скрипты, загруженные из внешних источников, избавиться от ненужных или внести изменения, чтобы они загружались только на определенных страницах, а не на всех.
Если используются внешние ресурсы для правильной загрузки нашей страницы, стоит использовать атрибут rel = "preconnect" в теге.
Как это работает?
Необходимо браузеру как можно скорее установить соединение с другим доменом. Это происходит до фактического запроса ресурса, что означает, что при возникновении таких запросов ресурс загружается немедленно. Атрибут следует использовать с осторожностью, так как чрезмерное его использование может привести к обратным результатам.
7. Избежание множественных переадресаций.
Цепочки перенаправления немного увеличивают время, в течение которого будет загружена целевая страница. Это связано с тем, что сервер, запрашивающий URL-адрес, обычно возвращает адрес, на который указывает перенаправление, после чего браузер должен отправить другой запрос, на этот раз по адресу, полученному в ответе. Рекомендуется избегать перенаправления, например, со страницы A на страницу B и со страницы B на страницу C. Это ускорит скорость загрузки целевой страницы.
8. Устранение ресурсов, блокирующих рендеринг.
Устранение блокирующих отрисовку ресурсов применяется к разделу над сгибом, то есть к фрагменту страницы, который виден первым без прокрутки страницы. Проблема возникает, когда вместе с файлами JavaScript и CSS, отвечающими за отображение раздела "Над сгибом", также загружаются файлы, не влияющие на него. В результате рендеринг сайта задерживается, что отрицательно сказывается на скорости загрузки сайта.
Как устранить ресурсы, блокирующие рендеринг? Если это WordPress, можно использовать плагин A3 Lazy Load, который должен решить проблему без серьезных проблем.
9. Асинхронная загрузка файлов.
Можно загружать файлы тремя разными способами. Первый — это одновременная загрузка, то есть каждый файл загружается один за другим в том порядке, в котором они появляются в коде страницы. Второй способ — это асинхронная загрузка, при которой веб-браузер загружает сразу несколько файлов. Последний вариант — отложить загрузку внешнего ресурса до абсолютной загрузки страницы. Этот вариант используется, когда файл не важен для корректной отрисовки страницы, например скрипт модуля чата.
Как это работает на практике? Когда браузер загружает страницу, он делает это сверху вниз. Если он достигает файла JS или CSS, который загружается синхронно, он прекращает загрузку страницы, пока файл не будет полностью загружен. Если тот же файл загружается асинхронно, браузер продолжит одновременно загружать другие ресурсы страницы. В результате страница загружается быстрее.
Как включить асинхронную загрузку файлов? Это в основном касается файлов JS и CSS, загруженных из внешних источников. Традиционно следует использовать подходящий плагин в зависимости от используемого шаблона WordPress. Другое решение — добавить атрибут async в код к скриптам, которые запускаются.
10. Реализация AMP (ускоренных мобильных страниц).
AMP, то есть ускоренные мобильные страницы, которые загружаются очень быстро. Это технология Google. Страницы AMP выделяются молнией в результатах мобильного поиска. Когда веб-сайт соответствует требованиям, его можно загрузить с серверов Google AMP Cache, что дополнительно ускоряет работу веб-сайта.
11. Сжатие Gzip, Deflate или Brotli.
Это методы, которые сжимают файлы веб-сайта без потерь и выполняются на стороне сервера. В результате в браузер поступает меньше ресурсов, что сокращает время загрузки веб-сайта. Эффективность сжатия Gzip и Deflate очень похожа, но при использовании сжатия Brotli можно рассчитывать примерно на 20% сжатия.
Какие файлы нужно сжать методом Gzip, Deflate, Brotli? В целом получается максимальная отдача от сжатия текстовых файлов, в том числе HTML, CSS, JavaScript, XML, шрифты, где их размер можно уменьшить даже на 70-80%. Нельзя сжимать уже сжатые файлы и пропускать фотографии.
12. Версия PHP.
Если веб-сайт, то есть WordPress, PrestaShop, Joomla, основан на PHP, версия интерпретатора PHP на сервере очень важна для скорости и производительности веб-сайта. Как это работает? Прежде чем сервер отправит файлы веб-сайта в браузер пользователя, на нем должен быть обработан код PHP.
В более новой версии PHP эффективность обработки кода PHP на сервере выше и заметнее.
Как проверить версию PHP и как ее изменить?
Не все планы хостинга позволяют использовать последнюю версию, поэтому следует обратить на это внимание при выборе сервера. Версию PHP можно изменить в панели или обратившись к хостинг-провайдеру. Чтобы проверить, какая версия установлена, нужно войти в панель у хостинг-провайдера. Альтернативный способ — создать файл, например, с именем "version.php" с функцией. Позже файл должен быть загружен на сервер с файлами страниц и вызван в браузере. В результате получается конфигурация сервера, где основным заголовком является версия PHP.
После обновления версии PHP следует проанализировать работу всего сайта, так как некоторые элементы могут перестать работать должным образом. Это связано с тем, что в новых версиях PHP старые функции заменяются новыми и могут работать некорректно или возвращать другой результат.
13. Протокол HTTP / 2.
Он определяет, как браузер взаимодействует с сервером, и как ресурсы передаются между ними. Более ранние версии HTTP / 1.x отправляли запросы ресурсов последовательно, то есть браузер запрашивает файл, получает его с сервера, обрабатывает его и запрашивает другой. Использование протокола HTTP / 2 ускоряет загрузку страницы благодаря одновременной обработке нескольких запросов. Кроме того, сервер имеет возможность отправлять файлы до того, как их запросит браузер.
При выборе хостинга также стоит обратить внимание на версию протокола HTTP, используемого сервером. Как включить протокол HTTP / 2? Если сервер использует HTTP / 2, он обычно включается сверху вниз, но стоит проверить настройки в панели хостинга. Альтернативный вариант использования протокола HTTP / 2 - подключение к сервису CloudFlare, который использует это решение и дает гораздо больше преимуществ.
Время ответа сервера TTFB (Time To First Byte)
Что такое TTFB?
Это время, отсчитываемое с момента отправки запроса до получения от него первого байта данных. В результате получается время, за которое сервер ответил на запрос.
Что влияет на долгое время отклика сервера TTFB? Конечно, есть много факторов, которые влияют на то, как быстро сервер отвечает на запрос. Основной причиной может быть конфигурация сервера, его параметры и его расположение. Это также относится к версии интерпретатора PHP, текущей нагрузке и DNS-серверам. Сложные запросы к базе данных, обширные функции и сценарии PHP и неоптимальный код также могут повлиять на более длительное время обработки запроса и ответа. Как ускорить время ответа сервера? Эти факторы следует проанализировать и исправить.
Следуя приведенным выше советам, можно наблюдать разницу во времени загрузки веб-сайта, и, таким образом, показатель отказов снизится, а конверсия и рейтинг в результатах поиска улучшатся. В процессе позиционирования сайта не следует забывать оптимизировать контент под выбранные ключевые слова и получать ценные внешние ссылки.
Может быть интересно
Комментарии (48)