Оптимизация скорости страницы крайне важна для любого сайта и является основополагающей для его SEO и удобства использования. Кроме того, она оказывает большое влияние на рейтинг посещаемости вашего сайта и показатели Google. Скорость страницы можно измерить и улучшить несколькими способами, и в этой статье мы расскажем о том, как это сделать. Но сначала о том, как загружаются страницы:
- Пользователь заходит на их сайт и вводит веб-сайт, ведущий к DNS-запросу.
- Это связывает их с провайдером доменных имен, который перенаправляет их на ваш сервер, где находятся все ваши файлы.
- Объектная модель документа (DOM) загружает HTML, CSS и JavaScript для страницы. Обычно DOM приходится запрашивать дополнительные ресурсы у вашего сервера, что и приводит к основным замедлениям.
Что касается того, как Google оценивает скорость страниц, то здесь есть 2 основных показателя, которые он учитывает:
- время до загрузки: Время, прошедшее с момента запроса пользователем новой страницы до момента, когда браузер отобразит ее содержимое.
- время полной загрузки страницы: Время, прошедшее с момента запроса пользователем новой страницы до момента полного отображения страницы браузером.
Факторы, влияющие на скорость
Есть несколько различных причин, на которые следует обратить внимание, если ваш сайт тормозит. Одна из первых - это изображенияТак как более тяжелые изображения могут сильно затруднить загрузку. Чтобы решить эту проблему, вам, возможно, придется сжимать и изменять размер фотографий, чтобы привести их в соответствие с требованиями. Как правило, размер страницы не должен превышать мегабайта (а в большинстве случаев даже не должен быть таким большим). Оптимизация изображений - самый распространенный виновник, вызывающий замедление работы многих страниц из-за небрежности и отсутствия контроля за загрузкой изображений.
Хотя программное обеспечение CMS, такое как WordPress, может выполнять достойную работу по изменению размера и сжатию, лучше всего делать это самостоятельно. Поручение WordPress часто означает, что ваши файлы будут на 15-30 % больше, чем если бы они были сжаты вручную перед загрузкой.
Хостинг еще один фактор, который может дать вашей странице преимущество. Важно выбрать пакет хостинга, который поможет повысить скорость загрузки страниц вашего сайта. Это можно сделать, выбрав сервер с выделенными ресурсами, который не позволит другим сайтам перегружать ваш процессор и память. Аналогичным образом, наличие лучшего жесткого диска SSD и хранение базы данных и других ресурсов непосредственно на веб-сервере также помогает. Вы также можете кэш и минифицировать ресурсы, что поможет улучшить скорость работы сайта.
Следите за своими плагины, приложения и виджеты. Все сторонние скрипты могут значительно снизить скорость работы. Что такое тема также имеет значение, так как более тяжелые могут истощать. Сайт количество перенаправлений время, необходимое для перехода на веб-страницу, также может повлиять на оптимизацию скорости страницы. Вы также можете ускорить работу, используя HTTP/2, префетчинг, предварительное подключение, и элементы предварительной загрузки.
Инструменты для оптимизации скорости страниц
Если речь идет об инструментах, то те, которые предоставляет Google, всегда являются отличной отправной точкой. К ним относятся Собственный отчет Chrome о пользовательском опыте и Маяк Google (о котором мы рассказывали в предыдущей статье). В то время как Chrome Report полезен только для крупных сайтов, Lighthouse может провести аудит практически всего. Поскольку оба инструмента принадлежат Google, они могут предоставить именно те данные, которые вам нужны. Кроме того, Lighthouse предоставляет пользователям обратную связь о том, что они могут улучшить, подобно другому инструменту: Page Speed Insights.
Существуют также альтернативы, не относящиеся к Google, например Pingdom и GTmetrix которые могут быть полезны сами по себе. Аналогичные инструменты доступны на сайте testmysite.thinkwithgoogle.com.
Показатели скорости
Первая содержательная краска это момент появления первого фрагмента содержимого. Как правило, это часть строки поиска, где при загрузке появляется название. Далее следует Первая значимая краска, то есть когда первичный контент впервые становится видимым. По мнению Google (который придумал этот термин): "Допустим, у вас есть страница электронной коммерции, и на ней есть изображение, которое имеет решающее значение для страницы, тогда первая значимая краска требует, чтобы это изображение было видно". Это время может иметь решающее значение, так как оно дает пользователю возможность ознакомиться с некоторым контентом, прежде чем он сможет взаимодействовать со всем остальным. Если загрузка в этой части происходит медленно, большинство пользователей отворачиваются и переходят на другую страницу.
За этими двумя следует Время для интерактиваЭто когда страница визуально пригодна для использования и пользователь может правильно взаимодействовать с ней. Наконец, есть момент, когда страница имеет Загрузка содержимого DOM. Это означает, что HTML полностью заблокирован и загружен.