Медленно загружаются сайты как исправить

И несколько простых способов это изменить.

Все знакомы с пословицей «тише едешь — дальше будешь». Но когда речь заходит о производительности сайта, это скорее рецепт провала. Знаем минимум 10 причин, из-за которых может медленно загружаться ваш сайт, и разбираем их с экспертом Selectel.

Неоптимизированные изображения

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

Формат изображения — еще один важный фактор, который стоит иметь в виду. Например, JPEG-изображения меньше таких форматов, как PNG или GIF. Страницы будут загружаться быстрее, если вы отдадите предпочтение JPEG.

Как быть:

Ошибки JavaScript

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

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

Как быть:

Слишком много Flash-контента

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

Как быть:

Слишком много HTTP-запросов

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

Как быть:

Отсутствие кэширования

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

Как быть:

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

Грязный код

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

Удалив все эти элементы, вы сократите код, уменьшите размер файла и, как следствие, — время загрузки страницы. Кстати, возможно, после такой «чистки» вы также заметите улучшения по части SEO-оптимизации.

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

Как быть:

Отсутствие GZIP-сжатия

Сжатие передаваемого трафика веб-сервером — простой и действенный способ увеличить скорость загрузки сайта. GZIP обеспечивает значительное (до 90%) уменьшение объема веб-трафика (HTML,CSS, файлы JavaScript и т.д.). В результате браузер клиента получает трафик в сжатом виде, который распаковывается при получении.

Как быть:

Если вы еще не активировали GZIP-сжатие на своем сайте, это первое, что вам следует сделать.

Много рекламы

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

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

Как быть:

Рекламные объявления — это лишние HTTP-запросы, которые замедляют загрузку страницы. Используйте их только там, где они точно сработают и «окупят» свой вес.

Отсутствие CDN

CDN (Content Delivery Network) — это распределенная сеть независимых серверов, которые находятся в разных географических точках и доставляют посетителям веб-контент с высокой скоростью и производительностью.

Все входящие запросы на контент обслуживается сервером, расположенным в ближайшем к посетителю центре обработки данных. Это позволяет минимизировать время приема-передачи (round-trip time, RTT) и предоставлять запрошенный контент гораздо быстрее.

Как быть:

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

Плохой хостинг

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

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

Вывод

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

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

Не пропускайте полезное, подписывайтесь на блог Selectel.

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

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

Если ваш сайт создан с использованием HTML, CSS, JavaScript, PHP (или любого другого бэкенд-языка) — наши рекомендации наверняка окажутся полезными. 

Проблемы с нагрузкой и ресурсами на хостинге

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

Как проверить, сколько ресурсов потребляет сайт

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

В панели управления хостингом RU-CENTER потребление ресурсов можно посмотреть в разделе «Статистика». Обратите внимание, сколько оперативной памяти и процессорного времени сайт потреблял за последние дни, неделю, месяц. 

Вот как выглядит превышение ресурсов на графиках в панели управления хостингом RU-CENTER:

Потребление памяти в норме, потребление процессорного времени выросло

Потребление памяти и нагрузка на CPU (центральный процессор) выросли

Потребление памяти высокое, CPU в норме, но есть пик потребления

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

Чаще всего потребление ресурсов растет из-за следующих причин:

• Увеличилась посещаемость сайта.
• Боты ведут вредоносную активность на сайте.
• Есть проблемы в работе скриптов.

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

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

Проблемы с оптимизацией CSS и JavaScript

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

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

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

Начните анализировать сайт с помощью инструмента PageSpeed Insights. Сервис изучит ваш ресурс, подскажет, что надо исправить и как изменения ускорят работу сайта. 

Что делать, если замедляется рендеринг страницы

1. Настроить отложенную загрузку JavaScript. Пусть самые большие JS-файлы будут загружаться в самом конце и не тормозить отображение остального контента. Чтобы настроить отложенную загрузку, настройте вызов внешнего JS-файла перед тегом </body>.
2. Использовать асинхронную загрузку скриптов. При синхронной загрузке страница часто отображается в браузере с задержками, так как браузер не отобразит страницу, пока не обработает CSS- и JS-файлы. Асинхронная загрузка дает браузеру возможность загрузить HTML-страницу, даже если он пока не обработал файлы js и css. 
3. Разместить ссылки на CSS-файлы перед ссылками на Javascript-файлы. Так страница будет загружаться постепенно: заголовок, логотип, рубрики, верхние блоки и т. д. Если разместить CSS-файлы после ссылок на файлы со скриптами, браузер будет тормозить и стараться загрузить все элементы одновременно — через несколько секунд ожидания. 
4. Удалить все неиспользуемые элементы кода: пустые строки и переносы строк, ненужные комментарии, лишние пробелы, символы табуляции. Это уменьшит объем файла, и браузер будет быстрее его загружать. 

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

Не загружаются данные из внешних источников в браузере

В коде сайта могут быть ссылки на внешние источники. Например, иногда для экономии места на диске хостинга картинки и видео хранят на стороннем сервере (CDN). 

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

Ссылки на внешние источники можно проверить через консоль браузера Google Chrome*:

1. откройте нужный сайт в браузере и нажмите F12;
2. откройте вкладку Network;
3. вызовите меню правой кнопкой мыши; 
4. включите столбцы URL и/или Domain;
5. изучите контент, размещенный на вашем домене и на внешних ресурсах.

Не загружаются данные из внешних источников на сервере

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

Еще одна частая проблема — сайт обращается сам к себе. Например, на сайте с условным именем TEST.RU может встречаться код, при помощи которого разработчик хочет подключить еще один файл к скрипту на языке PHP:

require_once(“https://test.ru/somefile.txt”).

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

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

Не настроено кеширование

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

Популярные виды кеширования 

• Кеширование через подключение к системе СDN-сервиса — например, Cloudflare. Внешний сервер кеширует любые элементы, даже скрипты и стили. Это снизит потребление ресурсов хостинга, на котором располагается сайт. Но такой способ кеширования поможет, только если CDN-сервер работает стабильно. Иначе страницы сайта начнут загружаться еще медленнее. Про CDN и принципы его работы мы писали отдельную статью.
• Кеширование запросов к базе данных — об этом мы подробно рассказываем в дальше в статье — в разделе «Проблемы со скриптами и базой данных». 
• Кеширование в PHP — например, с помощью расширения OPcache. Это будет полезно для всех сайтов, использующих CMS. Расширение позволит ускорить выполнение скриптов, написанных на языке PHP, но это незначительно увеличит потребление оперативной памяти. На виртуальном хостинге RU-CENTER это расширение включено по умолчанию. 
• Кеширование статических файлов в браузере. Вы можете указать период, в течение которого статические файлы будут храниться у пользователя в кеше браузера. Это делается в настройках веб-сервера в панели управления хостингом, в файле конфигурации веб-сервера или в файле .htaccess. 
• Кеширование результатов генерации HTML-страниц на диске. Если все страницы вашего сайта генерируются скриптами сайта, но не обновляются каждую секунду, можно сохранять уже сгенерированные страницы в виде файлов. Затем эти страницы путем минимальных преобразований будут сразу же передаваться в браузер пользователя. 

Существует множество плагинов, чтобы настроить кеширование данных для сайтов на CMS. Например, WP Super Cache или W3 Total Cache. Перед установкой плагина лучше посоветоваться с веб-мастером — он подскажет, какой плагин лучше подойдет для вашего сайта.

Не используется сжатие данных

Сжатие данных — один из способов ускорить загрузку страницы. C помощью gzip веб-сервер сжимает стили, JavaScript-файлы и другие элементы сайта, и только потом отправляет в браузер пользователя.

GZIP-сжатие подключается на стороне веб-сервера: в панели управления, как на хостинге RU-CENTER, в конфигурационном файле веб-сервера или через файл .htaccess. Включить сжатие можно также в настройках CMS.

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

Проблемы со скриптами и базой данных 

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

Оптимизация скриптов. На их выполнение должно уходить минимум оперативной памяти и времени. Вот несколько советов: 

• Кешируйте данные, которые редко обновляются. Если для генерации страницы нужно выполнить запрос к БД, данные которой не обновляются каждые несколько минут, имеет смысл сохранять результаты запроса в файле. Если файл небольшой, получить готовый результат из файла проще, чем обратиться к БД. Можно кешировать результаты генерации HTML-кода, как описано выше.
• Используйте актуальную версию PHP. Переход на новую версию PHP почти всегда повышает производительность сайта. К тому же с новым релизом закрываются уязвимости и появляются новые возможности, удобные для разработчиков. Но учтите, что смена версии PHP — это сложно, долго и часто требует доработки кода сайта. Но замена версии PHP оправдана, если другие способы повышения производительности не сработали. 

Оптимизация запросов к БД. Главные требования:

• используйте индексы во всех запросах для выборки данных; 
• старайтесь создавать запросы так, чтобы при их выполнении по минимуму использовались временные файлы и операции сортировки в файле (filesort);
• минимально используйте временные файлы и операции filesort.

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

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

Иногда медленные запросы появляются случайно, например, как результат мгновенной нагрузки на сервере. Но если ситуация повторяется системно, значит, проблема в неэффективных запросах. Для сайтов на WordPress проверить наличие медленных запросов к базе можно с помощью плагинов Query Monitor или Debug Bar. 

Очистка базы от неактуальных данных. Иногда сайт медленно работает из-за того, что БД хранит слишком много лишней информации. Например, неактивные учетные записи пользователей, созданные ботами и спам-комментарии.

Мы советуем периодически проверять базу данных, считать число записей в таблицах и удалять лишние и неактуальные. Для сайтов на WordPress для таких задач подойдет плагин WP-Sweep. 

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

Проблемы с медиаконтентом 

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

Как оптимизировать картинки 

• Вручную перед загрузкой на сервер, например, с помощью утилиты Squash.
• Подключить к сайту плагин-оптимизатор, который вдвое уменьшает размер изображений, почти не влияя на качество. Например: Image Optimizer, WP Compress, Optimus, Robin. 
• Если скрипты вашего сайта добавляют на загружаемые картинки ваш логотип или какие-либо «водяные знаки», нужно убедиться, что они не добавляют эти элементы каждый раз заново. Достаточно сделать это единожды при первой загрузке изображения, а дальше хранить на сервере уже обработанную картинку.

Как оптимизировать видео 

• Использовать специальные программы, которые уменьшают размер видео без ухудшения качества, например: Blazemp или HandBrake.
• Конвертировать видео в совместимые с HTML5 форматы: MP4 или WebM. Для этого удобно использовать video.online-convert.com. 
• Убирать звук на видео, если от этого не пострадает информативность. Если ваше видео уже без звука, не забудьте убрать данные об аудио. Это можно сделать в любом редакторе, например ffmpeg.org.

Почему большое количество рекламы на сайте — это плохо 

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

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

Проблемы с интернетом-провайдером или сетью

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

Как понять, что есть сложности с работой сети

Данные от устройства посетителя сайта до сервера и обратно могут проходить через десятки промежуточных узлов. Причем иногда разные фрагменты данных (разные пакеты) могут ходить от одной точки в другую разными путями. Иногда те или иные узлы сети могут работать неверно и с задержкой передавать пакеты следующему узлу или не передавать их вовсе. Например, из-за работы фильтрующего ПО или оборудования. 

Какие могут быть проблемы в работе сети: 

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

Проведите диагностику сетевых соединений с помощью утилит WinMTR или tracert (traceroute) и отправьте отчет в техподдержку вашего хостинг-провайдера. В ряде случаев такой тест может показать, есть ли проблемы с сетью между вашим устройством и сервером. 

На сайте вредоносный код

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

Проверить сайт на наличие вредоносных программ можно с помощью Антивируса RU-CENTER. Он подготовит отчет со списком подозрительных и зараженных файлов и выгрузит его в панели управления антивирусом. Вы сможете устранить угрозы автоматически или вручную, изучив каждый файл. 

Боты

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

Запросы ботов увеличивают нагрузку на сервер и могут замедлять работу сайта. Чтобы исключить эту проблему, проверьте логи доступа к сайту на наличие большого числа обращений от ботов. Самые популярные боты — mj12, semrush, ahrefs. Их активность можно ограничить, например, запретив доступ к сайту. Это можно сделать через файл .htaccess на хостинге, добавив код:

RewriteCond %{HTTP_USER_AGENT} ahrefs [NC,OR]

RewriteCond %{HTTP_USER_AGENT} semrush [NC,OR]

RewriteCond %{HTTP_USER_AGENT} mj12 [NC]

RewriteRule .* — [F,L]

Также для борьбы с ботами будет полезен Антивирус RU-CENTER. Он поддерживает WAF (Web Application Firewall), который сканирует трафик и блокирует запросы ботов. WAF работает на большинстве популярных CMS — подробнее о нем мы рассказали в статье об Антивирусе.

Чек-лист: что проверить, если сайт медленно загружается

1. Проверьте, сколько ресурсов на хостинге потребляет сайт и не превышаются ли тарифные лимиты. Если тарифные лимиты превышены, проверьте логи доступа к сайту и посмотрите запросы. Увеличилась посещаемость сайта — нужен новый тариф. Проблема в атаке ботов или работе скриптов — ищите рекомендации в этой статье. 
2. Проверьте, правильно ли подключены файлы JavaScript и CSS. 
3. Проверьте скорость загрузки данных из внешних источников.
4. Настройте кеширование данных сайта. Пункты 4–9 мы советуем выполнить, даже если у сайта нет проблем со скоростью. 
5. Настройте сжатие данных сайта с помощью gzip. 
6. Оптимизируйте скрипты и запросы к базе данных. Очистите базу данных от неактуальной информации. 
7. Оптимизируйте картинки, видео и рекламу на сайте. 
8. Проверьте, нет ли проблем в работе сети.
9. Проверьте сайт на наличие вирусов и большого количества обращений от ботов.

*Информация в статье не является рекламой и представлена в ознакомительных целях.

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

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

JavaScript, блокирующий рендеринг страницы

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

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

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

Отсутствие системы CDN

CDN расшифровывается как Content Delivery Network, что в переводе означает «сеть доставки контента». Это множество серверов по всей планете, на которых хранится один и тот же веб-сайт. И независимо от того, из какой части света посетитель заходит на ресурс, он получит данные с ближайшего сервера, что позитивно скажется на скорости загрузки.

Существует несколько провайдеров CDN-систем. Например, Cloudflare. Сервис дает возможность разместить свой сайт в нескольких частях планеты (конкретнее можно узнать на официальном сайте сервиса). Нередко вебмастера подгружают jQuery и другие компоненты с CDN-серверов, чтобы не тратить на их обработку ресурсы арендованного VDS.

Избыток информации в базе данных

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

Бывали случаи, когда базу данных на несколько гигабайт увеличивали параметры планировщика задач Сron. От этого время загрузки страницы увеличивалось до 10 секунд.

Необходимо провести чистку и оптимизацию БД. Нужно удалить лишние записи из таблиц options и postmeta. Если вы пользуетесь WordPress, то можно активировать плагины Clean Options или Plugin Garbage Collector.

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

Неправильно настроенные или неоптимизированные CSS-файлы

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

1. Прописывайте тег @media, чтобы ваш ресурс знал, какой CSS-файл нужно задействовать в конкретной ситуации (на мобильном устройстве, в полноэкранном режиме).
2. Не создавайте слишком много внешних CSS-файлов. Старайтесь объединять их (лучше в один).
3. Используйте CSS-код прямо в HTML (по возможности). Тогда сайту придется меньше обращаться к внешним файлам.

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

Выключенный OPcache

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

Система кэширования и акселерации PHP у Timeweb включена по умолчанию. У других провайдеров может потребоваться ручная настройка модуля.

Чтобы запустить OPcache вручную, надо:

• Создать на сайте файл PHP.ini.
• Ввести туда команду zend_extension=opcache.so.
• Сохранить внесенные изменения.

Теперь проверим, работает ли OPcache, создав файл phpinfo.php и отыскав там строчку Opcode Caching. Если напротив нее написано Up and Running, то дополнительные настройки не потребуются.

Настройка кэширования и устранения связанных неполадок

Кэширование — важная составляющая производительности любого сайта и веб-приложения. Тут можно работать сразу в двух направлениях: настроить кэширование данных на стороннем ресурсе (как в СDN-cистемах) и оптимизировать хранение кэша в браузере посетителей.

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

Во втором случае нужна настройка кэша на сервере и в браузере пользователя. Для сайтов, работающих на WordPress, есть плагины WP Super Cache и Proxy Cache Purge. С помощью них можно отправить запрос на удаление кэш-файлов с устройства пользователя. Таким образом, удастся избежать проблем, если вдруг скопившееся кэш-файлы повредятся и станут помехой при загрузке страницы.

Неоптимизированные изображения

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

Можно сделать это прямо на компьютере, уменьшив разрешение картинки или воспользовавшись утилитой в духе Squash. А можно подключить к своему сайту плагин-оптимизатор. Например Robin, Image Optimizer, WP Compress либо один из их аналогов.

Такие плагины автоматически сокращают размер загружаемых изображений на 40–80%, практически не влияя на их качество (удаляются EXIF-данные и некоторые цвета).

Скрипты конфликтуют с другими элементами страницы

При неправильной настройке или обращении к несуществующим элементам JavaScript-код может негативно повлиять на загрузку сайта. Вплоть до полного «зависания».

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

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

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

Не загружаются файлы из внешних источников

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

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

Плагины в CMS слишком тяжелые

Внушительная часть ресурсов вашей VDS или виртуального хостинга могут уходить на поддержку CMS. То есть систему управления данными наподобие WordPress, Joomla или Drupal. А если установить в них увесистые плагины, то можно лишиться еще части ресурсов, выделенных на работу сайта.

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

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

Избыток рекламы

Без нее никуда, понятно. Реклама — отличный способ монетизировать сайт, но с ней лучше не перебарщивать. Избыток баннеров резко увеличит время загрузки вашего сайта.

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

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

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

Отсутствие gZip-компрессии

Избыточный размер компонентов сервера — основной ответ на вопрос «почему мой сайт работает медленно». К счастью, файлы сайта можно сжать. Если активировать gZip-компрессию, то сервер получит команду упаковать все веб-объекты (включая изображения, стили, JavaScript и т.п.) в один контейнер (архив), перед тем как отправить его в браузер, запросивший данные.

Компрессия сократит время ответа сервера за счет сокращения размера передаваемой информации между VDS и компьютером пользователя.

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

Вирусы

Такое бывает редко, но бывает. На сервер тоже может проникнуть вирус, как и на локальный компьютер, особенно если ваш VDS работает на базе Windows. На этой ОС словить «заразу» куда проще. Но и Linux не защищен на 100%.

Вирусы на сервере, как и на обычном ПК, могут съедать часть ресурсов и заметно замедлять его работу. Решение — антивирус. Проверить сайт можно с помощью специального онлайн-сервиса. А вот чтобы провести комплексную чистку и удалить менее распространенные угрозы, придется установить профессиональное решение. Например Ai-Bolit. Он сможет найти подозрительные скрипты, незащищенные каталоги и странные переадресации.

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

Медленный хостинг

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

Выбрать Timeweb, к примеру, если еще не сделали этого. Одни из самых шустрых серверов в РФ. Есть специализированные решения с 5-герцовыми процессорами, адаптированные под CMS Битрикс. Есть серверы в Европе. Поэтому сомневаться в производительности или доступности VDS на базе Timeweb не придется.

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

Проблемы на стороне клиента

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

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

Но это стоит делать только в том случае, если вы на 100% уверены в наличии проблем на стороне клиента.

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

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

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

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

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

1. Большие и тяжелые изображения

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

Бороться с такими картинками нужно еще на этапе загрузки:

• Поменять основной рабочий формат. PNG стоит заменить на JPG (можно не менять небольшие иконки и значки). Можно также использовать WebP, это современный формат сжатия без потери качества от Google. Однако при WebP изображения не всегда корректно отображаются на устройствах Apple. Поэтому лучше выбрать универсальный JPG.

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

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

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

2. Отсутствие кэширования

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

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

3. «Грязный» код

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

Советы по оптимизации:

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

• Во-вторых, использовать CSS. Если это возможно, таблица стилей должна быть одна.

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

4. Неоправданно большое количество запросов к серверу

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

• Во-первых, нужно сокращать количество Javascript и CSS элементов, отправляющих HTTP запросы на сервер.

• Во-вторых, можно использовать CSS-спрайты. Это объединение всех изображений на странице в один элемент. 

CSS-спрайты кратно сокращают количество запросов.

5. Большое количество рекламы на сайте

Для многих сайтов реклама — это единственный источник монетизации и способ выживание. Поэтому сокращение количества рекламных блоков ради скорости — для многих очень болезненный вопрос. Каждый блок — это отдельный HTTP запрос и дополнительный код, в дополнение к основной части сайта Если есть возможность убрать эти виджеты (ну или часть из них), то так и нужно поступить.

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

6. Недостаточность ресурсов сервера и отказ от CDN

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

Тут есть два совета:

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

2. Использовать CDN (Content Delivery Network) — это сеть из географически удаленных независимых друг от друга серверов. На каждом из этих серверов размещена кэшированная версия сайта. А пользователь при входе на сайт, автоматически подключается к географически ближайшему серверу. Это сильно сокращает показатель RTT (Road-trip Time). Чем ближе сервер к конечному пользователю, тем быстрее грузится страница.

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

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

7. Ошибки JavaScript

Этот пункт, конечно, можно было поставить и выше, сразу после (или внутри) блока про грязный код. Но на самом деле, правильно настроенный и оптимизированный JavaScript не сильно задерживает загрузку сайта. Проблема может быть только в криво реализованном или раздутом (bloat) JavaScript.

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

Для оптимизации стоит:

• Пересмотреть сценарии JavaScript элементов на предмет «раздутости». Оцените, какие действия действительно необходимы, а что можно удалить.

• Настроить асинхронную загрузку JavaScript. Это просто Must Have, особенно если элементы не находятся на первом экране загрузки в поле видимости посетителя. В таком случае видимая часть сайта будет открываться независимо, а JS элементы подтянутся чуть позже, никого не задерживая.

Ну и как всегда главное правило оптимизации — если что-то можно безболезненно удалить, так и нужно сделать. Это, конечно, выглядит как шутка, но у многих неопытных разработчиков (особенно на CMS) количество бесполезного JS контента просто зашкаливает.

8. Много Flash элементов

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

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

9. Не настроено GZIP-сжатие

На конец мы решили оставить одно из самых простых и действенных решений. GZIP позволяет сжимать передаваемый сервером трафик. Такой метод позволяет кратно уменьшить вес передаваемого контента (JS, HTML, CSS и других элементов страницы). Пользователь получает трафик в уже распакованном виде.

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

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

Оптимизация скорости загрузки и решение возникающих проблем производительности — это элементарные нормы «гигиены сайта», которые нужно проводить хотя бы раз в 2-3 месяца. Это прямые обязанности команды поддержки. 

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

В интернете достаточно много сервисов-сканеров, например Google Pagespeed Insights, при помощи которых можно провести аудит загрузки сайта.

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

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

Почему браузеры тупят?

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

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

Браузерам нужен доступ к оперативной памяти, так как брать данные с жесткого диска или SSD гораздо дольше, чем из ОЗУ. Требование большого объема «оперативки» — это своего рода плата за быстродействие того же Chrome, который, вопреки всеобщему мнению является не самой прожорливой программой своего рода.

И все-таки, как получить «скидку» от браузеров и оптимизировать их работу?

Google Chrome

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

1. Открываем браузер и нажимаем сочетание клавиш Shift + Esc;
2. В открывшемся окне отмечаем все работающие в фоновом режиме процессы, которыми вы, разумеется, не пользуетесь в данный момент;
3. Кликаем на «Завершить процесс».

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

Облегчить работу Chrome можно используя раздел с экспериментальными настройками браузера, для доступа к которым нужно ввести в адресной строке: chrome://flags/. После этого можно ознакомиться со всем списком настроек, среди которых, например, есть опция «Переопределение списка программного рендеринга», позволяющая браузеру быстрее рендерить страницы сайтов. Чтобы включить ее, вводим в поиске ignore-gpu-blacklist и выбираем пункт «Enabled».

Расширения

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

1. OneTab. Расширение позволяет одним кликом закрыть все открытые вкладки, а позже, если вам будет нужно, отдельно открыть некоторые из них. Несмотря на простоту OneTab, оно значительно облегчает нагрузку на оперативную память и не дает ее захламлять ненужными процессами.
2. The Great Suspender. В отличие от прошлого участника списка, The Great Suspender не закрывает разом все вкладки, оно просто выгружает их содержимое из оперативной памяти компьютера. Если вам нужно будет вернуться к работе на каком-нибудь из сайтов, просто нажимаем на него в расширении и оно возвращает вкладку к «жизни».
3. TabMemFree. Расширение схоже по функциональности с прошлыми участниками списка, но имеет одну важную особенность. TabMemFree позволяет защитить определенные вкладки от закрытия. Например, если вы слушаете на фоне музыку или смотрите видео, вы можете добавить в исключения вкладку с проигрывателем.
4. Tab Wrangler. Снова расширение для работы со вкладками, но из всего списка оно является самым богатым на настройки. К примеру, тут вы можете выставить время закрытия для каждой из вкладок, а также выставить число невосприимчивых к расширению вкладок.

Mozilla Firefox

Несмотря на то что у многих именно Chrome ассоциируется с «поеданием» больших объемов ОЗУ, другие браузеры немногим ему уступают и Mozilla Firefox не исключение. Но, как и в случае с браузером от Google, «мозилу» тоже можно оптимизировать.

У Mozilla есть схожий с «хромовскими» экспериментальными настройками раздел, в котором можно настроить потребление браузером оперативной памяти. Однако в перечне пунктов у «мозилы» есть один пункт, который гораздо эффективнее, чем все вышеописанные в Chrome:

1. Вводим в адресную строку (именно вводим, не копируем): about:config;
2. Обещаем браузеру быть осторожными и принимаем условия;
3. В поисковой строке вводим следующий параметр: browser.sessionhistory.max_total_viewers;
4. Меняем исходное значение -1 на 0;
5. Закрываем вкладку и перезапускаем браузер.

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

В этой же вкладке about:config можно и полностью запретить браузеру создавать кеш в оперативной памяти. Чтобы это сделать, выполняем описанные ниже действия:

1. Открываем about:config;
2. В поиске пишем: browser.cache;
3. Выбираем из списка пункт browser.cache.memory.enable и выставляем значение «false»;
4. Закрываем вкладку и перезапускаем браузер.

Теперь Mozilla не будет использовать нашу оперативную память как хранилище своего кеша, что значительно уменьшит «прожорливость» браузера, но в то же время заметно скажется на скорости его работы. Чтобы соблюсти баланс между быстродействием и «аппетитом» можно использовать параметр browser.cache.memory.max_entry_size.

1. Открываем about:config;
2. В поиске пишем: browser.cache;
3. Выбираем из списка пункт browser.cache.memory.max_entry_size и выставляем желаемое значение из представленной ниже таблицы;
4. Закрываем вкладку и перезапускаем браузер.

В приведенной таблице правый столбик означает то значение, которое необходимо ввести в browser.cache.memory.max_entry_size, чтобы браузер использовал указанный в левом столбике объем памяти.

Расширения

Как и в случае с Chrome, немаловажную роль в скорости работы Mozilla играют установленные вами расширения. Желательно перейти во вкладку с настройками браузера и отключить те дополнения, которыми вы не пользуетесь, а вместо них установить действительно полезные для вашей «оперативки». Вот парочка дополнений, которые смогут разгрузить ваш браузер и ОЗУ:

1. OneTab. Как вы могли догадаться, это дополнение можно установить не только на Chrome, но и на Mozilla. Функциональность версий не отличается, поэтому если хотите бороться с «прожорливыми» вкладками, ставьте расширение и деактивируйте ненужные страницы.
2. Auto Tab Discard. Схожее с OneTab приложение, которое позволяет экономить оперативную память путем контроля за неактивными вкладками. Вы можете выставить время, по истечении которого страницы будут закрываться. При этом, вы с легкостью сможете их вернуть в любой момент.

Яндекс.Браузер

Как и в вышеописанных случаях Яндекс.Браузер тоже можно достаточно просто оптимизировать и ускорить. Так как российский браузер разработан на движке WebKit, использующийся в Chrome от Google, большинство приемов, которые можно использовать в программе от «гугла» можно применить и в Яндексе.

В Яндекс.Браузере тоже есть раздел с экспериментальными настройками, для получения доступа к которому нужно ввести в адресную строку: browser://flags/. После этого мы увидим абсолютно тот же перечень свойств, что и в Chrome. Поэтому поднимаемся к описанию методов ускорения «хрома» и повторяем описанные там действия.

Кроме идентичного раздела с экспериментальными настройками, в Яндекс.Браузере есть свой диспетчер задач, который включается тем же сочетанием клавиш Shift + Esc. Открываем его и закрываем все ненужные плагины и расширения, влияющие на скорость работы.

Так как браузеры используют один движок, все расширения, что работают в «хроме», будут функционировать и в Яндексе. Поэтому отправляемся в пункт про браузер от Google и ставим те расширения, которые там описаны. Дополнения, к слову, ставятся из официального магазина Google Chrome.

В Яндексе есть еще одна крайне полезная функция, которая позволит в два клика ускорить работу браузера:

1. Заходим в настройки браузера;
2. Нажимаем «Включить турбо»;
3. Готово.

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

Opera

Opera тоже имеет общие корни с браузером от Google. Тут также есть секретные настройки, доступ к которым можно получить после ввода в адресную строку: opera://flags/. Вводим в поиске настроек ignore-gpu-blacklist и выбираем пункт «Enabled». Теперь страницы сайтов будут рендериться быстрее.

Общий движок браузеров позволяет все тем же сочетанием клавиш Shift + Esc вызвать местный диспетчер задач и закрыть все ненужные процессы.

Несмотря на то что Opera работает все на том же движке WebKit, расширения придется ставить уже не из магазина Google. Переходим на сайт с дополнениями для «оперы» и устанавливаем расширение Tab Suspender (Tab Unloader). Дополнение позволяет контролировать количество активных вкладок. Если вы долго не переходите на открытую страницу, она отправиться в спящий режим и компьютер не будет тратить своих ресурсов на хранение данных с этой вкладки. Некоторые особенно нужные вам вкладки можно добавить в исключения, чтобы заботливые руки расширения не отправили их в режим сна.

Режим «Турбо», к сожалению, пропал в последних компьютерных версиях Opera, но он все еще остался на мобильных версиях браузера.

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

• Как узнать, какой у меня компьютер (процессор, видеокарта, оперативная память)? Инструкция для новичков
• Убиваем лаги в играх: простые способы оптимизировать интернет для онлайна
• Как улучшить графику в старых играх: HD-текстуры, разрешение и постобработка

Охлаждающая подставка для ноутбука

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

Умная колонка Яндекс Станция

Что делать, если медленно открываются страницы в браузере?

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

Внешний DVD-привод

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

• Медленная скорость Интернет-подключения.
• Сбоящий Wi-Fi маршрутизатор.
• Тормозящие браузер расширения, кэш и куки.
• Пользователь пытается открывать странички в браузере через VPN-расширение или сервис.
• В операционной системе поселился вирус, который тормозит скорость Интернет-подключения.
• Антивирус или другое ПО, которое точно также затормаживает скорость подключения или же занимает канал на свою работу.
• DNS-сервер провайдера в данный момент испытывает проблемы при работе.

И это были самые распространенные, популярнейшие причины для замедленности загрузки страничек в Интернете. Бывает что-то одно, а бывает — комбинация. Все зависит от случая. Советовать определенный метод в данной ситуации попросту невозможно. Тем не менее мы с вами рассмотрим список из некоторых методов, который вы можете попробовать применить к своей проблеме при загрузки контента из сети.

Стол для ноутбука BRADEX SU

Медленная скорость Интернет-подключения

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

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

Чехол PortCase KNP-18

Проверка используемого браузера

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

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

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

беспроводная мышь

Отключение VPN

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

Акустическая система

Вирусы

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

Провести сканирование можно с помощью системного антивируса Защитника Windows. Нажмите Windows+S, введите в поисковую строку «Центр безопасности Защитника Windows», перейдите в раздел «Защита от вирусов и угроз» и запустите сканирование системы. Избавьтесь от вредителей, если таковые были найдены. Если после этого загрузка страничек в браузере стала проходить куда быстрее, то, поздравляем — вы нашли виновника возникшей ситуации.

USB Hub разветвитель

Отключение антивируса и других защитных программ

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

Отключить Защитник Windows можно в том же разделе его настроек, на которые мы уже взглянули в предыдущем пункте(Центр безопасности Защитника Windows). Если же у вас сторонний антивирус, то тут вам уже придется пробовать отключать его функционал самостоятельно. Как правило, получить доступ к настройкам можно с помощью трея в Области уведомления Пуск. Ищите в настройках пункт об Активной защите против вирусов или иных угроз.

нештатные колонки для ноутбука

Сброс настроек сети

Изменения сетевых настроек вполне могли вызвать оговариваемые в данной статье проблемы. К счастью, вы легко можете проверить настройки сети и вернуть их на прежние значения(по умолчанию), при которых проблем при доступе к Интернету не наблюдалось. Выполнить сброс настроек сети вы можете с помощью такого системного инструмента, как Командная строка. Нажмите на клавиатуре Windows+X и кликните на «Командная строка(администратор)».

Как только перед вами откроется консоль системы, вам понадобится вписать в нее следующий ряд команд:

• netsh winsock reset
• netsh int ip reset all
• netsh winhttp reset proxy
• ipconfig /flushdns

Этими командами вы сбросите WinSock, настройки IP, Прокси, а также очистите кэш-память DNS. Перезагрузите компьютер, а затем попробуйте снова открыть какую-то страничку в своем браузере. Если скорость загрузки увеличилась, то дело действительно заключалось в настройках сети. Увидите повторение ситуации — выполните вышеуказанные команды в системной консоли, чтобы разрешить проблему. Впрочем, часто это делать не придется.

Кресло компьютерное

Смена адреса DNS-сервера

И последнее, что мы затронем в данной статье, — это проблема с DNS-сервером вашего провайдера. Вы можете попробовать на время перейти на общественные DNS-сервера компании Google. Сделать это очень просто:

• Нажмите правой кнопкой мыши на значок сетевого подключения в Области уведомления Пуск.
• Выберите «Открыть «Параметры сети и Интернет».
• Кликните на «Настройка параметров адаптера».
• Дважды кликните на свое сетевое подключение.
• Нажмите на кнопку «Свойства».
• Дважды кликните на «IP версии 4…».
• Выставьте адреса 8.8.8.8. и 8.8.4.4.
• Сохраните изменения.

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

О том, что такое ping в скорости интернета, как проверить, оптимальный показатель, мы рассказали дополнительно.

моноблок

Как вам статья?

Нашли опечатку? Выделите текст и нажмите Ctrl + Enter

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

WordPress:

• WP Rocket (paid) + плагин для оптимизации изображений.
• Autoptimize + плагин для кэша.
• Drupal
• AdvAgg + модуль оптимизации изображений.

Что такое скорость страницы

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

Почему следует заботиться о скорости страницы

В последнее время скорость загрузки с мобильных устройств стала фактором ранжирования: появился отчет Google Search Console; сотрудники Chrome объяснили, что роботы могут помечать медленные сайты и занижать их в SERP.

Вот причины, по которым вы должны оптимизировать сайт:

• Влияние на лояльность пользователей и их опыт с взаимодействием с сайтом. Люди нетерпеливы, если сайт будет долго загружаться они быстро закроют его. Любая задержка или торможение способствует отказу, т.е. выходу человека с веб-ресурса.
• Влияние на аналитику. Быстрый сайт будет регистрировать больше посетителей, потому что тег аналитики загрузится быстрее. Если человек уходит до того, как загрузится тег, регистрации в системе аналитики не произойдет.
• SEO. Согласно официальному заявлению, обновление Speed Update коснется только самых медленных сайтов. Нововведение коснется небольшого процента ресурсов. Но хотим отметить, что Google обрабатывает до 4 млрд поисковых запросов в день, а значит «небольшой процент» – понятие далеко относительное.

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

Существует множество исследований, показывающих, что если увеличить скорость загрузки страницы такие показатели, как органический трафик, соотношение кликов и посещений, увеличение числа посетителей в целом и многие другие начнут расти. В WPO Stats есть много примеров исследований по улучшению скорости.

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

Как быстро должна загружаться страница

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

Эта рекомендация также основана на показателе Speed Index, о котором мы поговорим позже, но это лишь предположения, основанные на том, что было главным показателем на момент проведения исследования. Вряд ли Google когда-либо обозначал конкретный показатель для скорости загрузки страниц. Обычно команда Google даёт общие и поверхностные рекомендации, например, «сделайте сайт быстрее для пользователей» или «сделайте сайт быстрее настолько, насколько это возможно».

Как устроена страница

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

Установление взаимосвязей

Зеленый, оранжевый и фиолетовый цвета обозначают время, необходимое для установления соединения с веб-сайтом. Ниже расскажем о каждом цвете и о том, что он обозначает.

DNS (Зеленый)

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

В большинстве случаев DNS будет принадлежать регистратору домена (где вы купили домен) или Content Delivery Network (сети доставки контента – CDN).

Важно отметить, что не все DNS-провайдеры одинаковы. Если для вас важна каждая миллисекунда, возможно, вам стоит подумать об использовании другого DNS-провайдера. По данным DNSPerf, средняя скорость запроса у Cloudflare составляет 12,6 мс, тогда как у других провайдеров, таких как GoDaddy (46,04 мс) и Rackspace (90,38 мс), она в среднем ниже. Однако эти цифры не являются абсолютными, поскольку DNS может кэшироваться (временно храниться) в браузере после посещения веб-сайта. Время кэширования называется TTL (Time to Live). Пока кэш хранится, браузеру не нужно подключаться к DNS серверу, чтобы перейти на сайт.

Connect (Оранжевый)

Здесь браузер устанавливает соединение с хост-сервером. Протокол управления передачей/интернет-протокол (TCP/IP) сложен, но просто подумайте о том, как вы добираетесь на работу. Скорее всего, это непрямая линия, вам придется поворачивать и будут районы с более высокой проходимостью. Вы меняете маршрут и даже поворачиваете неправильно. Так работает эта система – она прокладывает маршрут от вашего браузера к серверу и обратно.

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

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

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

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

Secure Sockets Layer (SSL) (фиолетовый)

На сайтах, устанавливающих защищенное соединение (HTTPS), браузер и сервер согласовывают версию протокола TLS (Transport Layer Security), шифр (уровень безопасности) и проверяют сертификат (чтобы убедиться, что сайт является тем, за кого себя выдает).

Возможно, вы думаете, что можете сделать свой сайт быстрее, просто не используя HTTPS. Отчасти это правда. Но есть и другие преимущества использования HTTPS. Например, тот факт, что браузеры не позволяют использовать HTTP/2 (H2) без HTTPS.
H2 имеет некоторые преимущества, такие как постоянные соединения, поэтому ему не нужно все время открывать новое соединение для файлов на том же сервере.

Заголовки в этих запросах также меньше, чем в HTTP/1.1 и несколько файлов можно передавать одновременно. В большинстве случаев сайты, использующие HTTPS и H2, работают быстрее, чем сайты на HTTP.

Наиболее значительный выигрыш здесь дает обновление протокола (например, TLS 1.3 быстрее, чем TLS 1.2) и внедрение HTTP Strict Transport Security (HSTS), который указывает браузеру всегда использовать защищенное соединение.

Браузер изменяет запросы с HTTP на HTTPS без необходимости связываться с сервером и выполнять перенаправление. На изображении ниже показано перенаправление с HTTP на HTTPS и время, затраченное на него. Это можно было бы устранить благодаря использованию HSTS.

Также можно рассмотреть использование HTTP/3 для еще более быстрого соединения.

Например, подключение к веб-сайту на смартфоне среднего класса с медленным 3G-соединением занимает ~2 секунды. На том же телефоне с LTE-соединением это время сокращается до ~0,41 секунды. На десктопе с нормальной скоростью – менее 0,1 секунды.

Загрузка и обработка HTML

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

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

Если для TTFB происходит задержка, это может быть связано с запросами к базе данных, ресурсами сервера, ожиданием завершения Server Side Render (SSR) или другими вещами, обычно связанными с созданием динамического контента. Время загрузки будет зависеть от таких факторов, как соединение и размер файла.

Здесь же браузер начинает конструировать страницу. Когда HTML загружен, браузер разбирает его в объектную модель документа (DOM), с помощью которой компьютер понимает структуру содержимого. Этот процесс разбора использует главный поток браузера для обработки действий пользователя и отрисовки ресурса, выполнения JavaScript, а также компоновки, возврата и сбора мусора. Пока просто знайте, что этот основной поток существует и выполняет множество различных задач. Мы расскажем об этом немного позже.

Если вы видите разрыв между HTML и следующим запросом, наиболее вероятной причиной является то, что процессор занят обработкой HTML для создания DOM. Поскольку речь идет о процессоре (все зависит от используемого устройства), вы способны провести тестирование разрыва на более мощном устройстве, чтобы проверить, сохраняется ли он.

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

Обработка дополнительных подключений

После загрузки HTML будут обработаны ссылки на другие файлы и другие серверы, начнутся новые соединения. Обычно сюда добавляются другие файлы, такие как JavaScript, CSS, изображения и шрифты. На этом этапе все может усложниться – одни файлы ссылаются на другие, и начинается цепочка соединений для загрузки. Каждая точка – это индивидуальный запрос, а каждая линия – это место, где один файл ссылается на другой, который необходимо загрузить. В целом это 363 запроса через 128 соединений.

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

Лучшим решением раньше считалось размещение ресурсов на домене без cookie, которые не совпадали с основным доменом. А иногда было выгодно использовать несколько доменов (процесс называется «шардинг доменов») из-за ограничений на количество запросов на соединение, установленных браузером. Начиная с HTTP/2, этот способ считается не лучшим.

Например, возьмем сайт cdn.ahrefs.com на приведенном ниже графике.

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

Используйте Preconnect или DNS-Prefetch (при другом сервере)

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

Пример кода: <link rel=«preconnect» href=«https://site.com»>

Существует также DNS-prefetch, если вы хотите обработать только эту часть соединения на ранней стадии. Зеленая (DNS) часть будет подключена раньше, но остальная часть соединения произойдет позже.

DNS-prefetch имеет лучшую поддержку, чем preconnect, но если вы посмотрите на текущую статистику использования, разница будет незначительной. Preconnect будет эффективнее, если вы знаете, что для функционирования страницы что-то с сервера должно быть загружено раньше. Однако preconnect требует больше работы для маршрутизации и безопасности (оранжевый и фиолетовый цвета), поэтому он также будет более ресурсоемким на ранних этапах.

Пример кода: <link rel=«dns—prefetch» href=«//asset1.com»>

Как браузеры отображают страницу

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

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

Путь рендеринга

HTML преобразуется в DOM-дерево (каждый HTML-тег является объектом; вложенные теги являются «детьми» родительского элемента; текст, который находится внутри тега, также является объектом).

CSS анализируется в объектной модели CSS (CSSOM), которая сообщает браузеру, как все оформлено, дополнено, раскрашено, какой имеет размер и т. д.

CSSOM + DOM вместе составляют так называемое дерево рендеринга.

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

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

Цель – получить необходимые элементы как можно раньше, чтобы первичное представление сформировалось как можно быстрее. Видимое время загрузки – это представление людей о скорости работы страницы, то есть о том, как быстро содержимое появляется на экране. Больше всего на это влияет то, как загружаются ресурсы. Обычно в обязанности CMS или JavaScript Framework входит помощь браузеру в определении приоритетов, когда/какие/как/в каком порядке загружать ресурсы, чтобы сайт отображался быстрее. Подробнее об этом чуть позже.

Показатели визуальной нагрузки

1. First Paint (FP) – браузер отображает что-то впервые.
2. First Contentful Paint (FCP) – браузер отображает что-то из DOM (Document Object Model), это может быть текст или изображение.
3. First Meaningful Paint (FMP) – наиболее важные элементы визуально загружены.
4. Largest Contentful Paint (LCP) – загрузка самого крупного контента.
5. Visually Complete – визуальная перегрузка.
6. Speed Index – рассчитанный балл для визуальной нагрузки, в момент времени.
7. Cumulative Layout Shift (CLS) – сдвиг макета.

Просмотр визуальной нагрузки вместе с графиком каскадной модели

В разделе Summary в WebPageTest, если вы включите запись, у вас должен появиться столбец Video в основной таблице с Filmstrip View. Красная линия вверху с визуальными кадрами находится в той же точке, что и красная линия внизу каскадной модели.

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

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

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

Тип файла CSS

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

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

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

Асинхронная загрузка CSS

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

Он загружает CSS без блокировки рендеринга (потому что в этом случае мы сообщаем браузеру, что таблица стилей предназначена для печати, а не для этой версии страницы), а затем применяется ко всем медиа типам (тем, которые не предназначены для печати) после загрузки.

Например, это: <link rel=«stylesheet» href=«/my.css»>

Становится этим: <link rel=«stylesheet» href=«/my.css» media=«print» onload=«this.media=’all’»>

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

Inline

Код Inline, необходимый для отображения содержимого в верхней части вкладки, передается вместе с HTML-ответом, а не в отдельном файле. Как правило, это самый быстрый способ сократить время, необходимое для отображения начального вида.

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

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

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

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

Встраивание критического CSS в масштабе

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

Обычно для этого существует какой-нибудь плагин/модуль/пакет или версия Critical или Critical CSS. Они существуют для любого диспетчера задач или пакета, который вы используете, например Grunt, Gulp, Webpack, или Framework, React, Angular, Vue.

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

Несколько примеров учебных пособий

Grunt

https://github.com/filamentgroup/grunt-criticalcss

https://www.npmjs.com/package/grunt-critical-css

https://github.com/bezoerb/grunt-critical

Gulp

https://github.com/addyosmani/critical

https://www.npmjs.com/package/gulp-critical-css

Webpack

https://github.com/anthonygore/html-critical-webpack-plugin

https://github.com/GoogleChromeLabs/critters

https://github.com/anthonygore/html-critical-webpack-plugin

https://www.npmjs.com/package/critical-css-webpack-plugin

React

https://www.npmjs.com/package/react-critical-css

https://github.com/addyosmani/critical-path-css-tools

https://github.com/sergei-zelinsky/react-critical-css

Angular

https://github.com/addyosmani/critical-path-angular-demo

Vue

https://github.com/anthonygore/vue-cli-plugin-critical

https://vuejsdevelopers.com/2017/07/24/critical-css-webpack/

Drupal

https://www.fourkitchens.com/blog/article/use-gulp-automate-your-critical-path-css/

WordPress

https://wordpress.org/plugins/wp-criticalcss/

Hand-coded

https://www.sitelocity.com/critical-path-css-generator

https://jonassebastianohlsson.com/criticalpathcssgenerator/

Предварительная загрузка

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

Браузер присваивает каждому запросу на файл приоритет. Чтобы получить файлы, необходимые для отображения содержимого в верхней части вкладки раньше (с более высоким приоритетом) и отложить те, что не требуются, на более поздние этапы процесса. Приоритет файлов можно посмотреть на вкладке Network в Chrome Dev Tools. Просто щелкните правой кнопкой мыши на панели, выберите Priority и добавьте его в качестве столбца.

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

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

Примеры кода:

<link rel=«preload» href=«/my.css» as=«style»>

<link rel=«stylesheet» href=«/my.css» media=«print» onload=«this.media=’all’»>

Выбор файлов для предварительной загрузки

Обычно у вас присутствует основной файл темы, который содержит большую часть CSS для сайта. Разработчики часто называют его «стиль», именем темы или самого сайта. Если вам трудно определить этот файл или вы считаете, что другие файлы, возможно, также необходимо предварительно загрузить, то самый простой способ проверить – использовать функцию блокировки запросов в Chrome Dev Tools.

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

Что надо знать о предзагрузке

1. Вам нужен Cross-origin для шрифтов, иначе вы получите двойную загрузку файла.
2. Вам по-прежнему нужны обычные обращения к файлам JS + CSS, поэтому не удаляйте их.
3. Есть возможность предварительно загрузить шрифт, даже если он вызывается из другого файла, например, в файле CSS.
4. Будьте осторожны при предварительной загрузке. Можно столкнуться с проблемами, пытаясь предварительно загрузить слишком много файлов.

Server Push

HTTP/2 Server Push позволяет серверу, совместимому с HTTP/2, отправлять ресурсы клиенту, совместимому с HTTP/2, до того как он запросит их. Таким образом, минуя цепочку HTML > CSS > Font, это позволяет сайту сказать: «Мне нужен этот шрифт, просто отправьте его».

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

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

Тип файлов JavaScript

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

Если JavaScript играет важную роль в работе или оформлении ресурса, или если это основная система – как в случае со многими JavaScript-фреймворками, – то в отношении инлайнинга и предварительной загрузки действуют те же правила, что и в CSS.

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

Для встроенных сценариев можно рассмотреть возможность их перемещения в подвал. Помните, что JavaScript блокирует парсер, то есть блокирует чтение HTML.

Defer/Async (отсрочка/асинхронность)

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

Примеры кода Defer/Async

Normal:

<script src=«https://www.domain.com/file.js»></script>

Async:

<script src=«https://www.domain.com/file.js» async></script>

Defer:

<script src=«https://www.domain.com/file.js» defer></script>

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

Отклик

Отклик обычно измеряется задержкой первого ввода (FID), то есть временем, которое проходит с момента взаимодействия пользователя с вашим ресурсом до момента, когда она загрузится. Максимальный потенциальный FID – это наихудший случай FID, с которым могут столкнуться ваши пользователи. Многие обычно измеряют время интерактивности (Time To Interactive, TTI) – время, необходимое для того, чтобы вкладка браузера стала полностью интерактивной.

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

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

На изображении выше показано, как выглядит основной поток. Эти красные галочки на вкладке Performance в Chrome Dev Tools указывают на возможные проблемы. Обычно отмечаются задачи, требующие слишком много времени для выполнения в основном потоке. Каждая из них означает, что идет перегруз работой и способности оперативно реагировать на запрос пользователей нет.

Сторонние теги

Это еще один отчет, который можно найти в PageSpeed Insights. Он показывает размер и время, в течение которого сторонние скрипты блокировали основной поток и влияли на интерактивность.

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

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

Common Sources of JavaScript Bloat

• JQuery.
• Системы A / B тестирования.
• Системы тепловых карт.
• Системы мониторинга реальных пользователей (RUM).
• Системы живого чата.

Варианты очистки

1. Используйте меньше отслеживания/скриптов. Это может быть непростым решением, потому что маркетологи любят статистические данные, но иногда объем собираемых данных просто абсурден.
2. Консолидируйте системы с аналогичной функциональностью, например, если вы используете несколько систем аналитики или другие системы, в которых есть информация о пользователях. Многие программы имеют несколько функций, и иногда вы получаете сценарии, которые имеют такие же или похожие функции, поэтому в теории имеется способ обойтись без одной из них.
3. Сегментация. Например, некоторые системы A/B-тестирования сохранят и заставят вас загрузить список всех тестов, находящихся в настоящее время в системе, увеличивая размер загрузки. Вы позволено сегментировать сайт по разделам и создавать уменьшенные версии файла.
4. Отслеживание на стороне сервера вместо наблюдений на стороне клиента. У такого способа присутствуют свои недостатки, о которых не будет рассказано здесь, но можно найти много информации о том, почему возможно использовать один способ вместо другого.
5. Используйте веб-воркеры, чтобы переместить обработку из основного потока. Обратной стороной этого является то, что веб-воркер не будет иметь доступа к DOM. Это также достаточно сложная задача, требующая опытных разработчиков.
6. Service Workers/Edge Workers. Считается, что эту технологию ждет большое будущее. По сути, она позволяет выполнять JS на уровне Edge (или CDN), а не в браузере клиента. Так, для системы A/B-тестирования может оказаться, что файл загружается, а затем обрабатывается и выполняется в браузере пользователя. Поскольку тест может перезаписывать части DOM и происходить позже в процессе загрузки, вам удастся увидеть визуальные эффекты при изменении ситуации. Теперь нужно предварительно обработать изменения, которые будут внесены, и передать их в HTML, который будет доставлен ботам и пользователям. Некоторые платформы уже используют это преимущество.
7. Просто отложите выполнение загрузки файла, если он не нужен прямо сейчас, или инициируйте запрос файла только на основании действия, например, щелчка мыши. Онлайн-консультант, вероятно, не нужен в первые пять секунд загрузки страницы, поэтому отложите его загрузку. Также есть вариант запросить файл после того, как кто-то наведет курсор или нажмет на кнопку, чтобы он вообще не загружался вместе с начальной страницей. Или использовать изображение с кнопкой воспроизведения вместо встраивания видео YouTube и загружать только его элементы, а воспроизводить содержимое, когда пользователь нажимает на кнопку.

Преимущества JS фреймворков

JavaScript фреймворки, такие как React, Angular и Vue, имеют некоторые преимущества перед традиционными системами.

• Tree shaking. Доставка только кода, используемого на вкладке браузера. Любые дополнительные файлы или код, которые не нужны, не загружаются, что приводит к уменьшению размера файлов и страниц. Это устраняет код, традиционно необходимый для других страниц и действий.
• Разделение кода. Разделяйте файлы на более мелкие фрагменты, это даст больше возможностей для интерактивности. Допустим, у вас есть JS-файл размером 1 МБ, который запускается как длинная задача в основном потоке и блокирует интерактивность на время выполнения. Вы способны разделить его на фрагменты по 50 КБ, чтобы задачи выполнялись не так долго, а между ними оставалось больше промежутков в более короткие периоды, когда страница реагирует на запрос пользователя.

Шрифты

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

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

Если вы используете шрифты Google, это еще проще. Все, что вам нужно сделать, это добавить &display=swap в качестве параметра в URL – адресе.

<link href=«https://fonts.googleapis.com/css?family=Whatever&display=swap» rel=«stylesheet»>

Изображения

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

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

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

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

Всегда выполняйте масштабирование изображения. Существует множество вариантов сделать это, например, с помощью CDN, сервера, CMS и API. Вот несколько вариантов:

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

• Akamai Image Manager
• imgix
• Image Engine
• Cloudinary
• Uploadcare

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

• ShortPixel
• Fastly Image Optimizer
• Kraken.io
• TinyPNG
• Imagify

GUI:

• ImageOptim
• Squoosh

Command Line:

• Imagemin, также есть npm модуль, если вы используете webpack, gulp или grunt.

JPEG:

• Guetzli
• MozJPEG

PNG:

• pngquant
• Zopfli

GIF:

• Gifsicle
• SVGO

WordPress/Drupal:

• WordPress plugins and Drupal.

Ленивая загрузка изображений

Если кто-то говорит, что вам нужно «разместить изображения за пределами экрана», это вам подходит. По сути, это отсрочка загрузки изображений, расположенных не над сгибом, потому что они пока не нужны. Как только пользователь начнет прокрутку, изображения загрузятся.

Специалист Ahrefs советует вам библиотеку, которая использует Intersection Observer, но, вероятно, имеет полифил из-за поддержки браузера. Самая популярная библиотека для этого – lazysizes, но можно найти много вариантов для вашей системы.

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

Адаптивные изображения / изображения с измененным размером

Речь идет о передаче правильного изображения на нужный экран. Загрузка большого изображения и последующее его уменьшение только отнимает время и ресурсы. Для этого существует множество автоматизированных решений. Например, многие сети CDN справятся с этой задачей, а также sharp npm, ImageMagick CLI или различные плагины/модули для разных систем.

Изменение формата изображения

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

Размер/вес страницы

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

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

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

Другие возможности веб-производительности

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

Кэширование

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

Кэш сервера

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

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

Проверка обычно выглядит следующим образом: Кэш CDN > Кэш сервера (например, Varnish) > Origin (должен создавать страницу моментально). Как правило, кэш более высокого уровня, например CDN, будет быстрее, поэтому необходимо, чтобы большинство ваших запросов было на этом уровне.

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

Кэш браузера

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

Например, посмотрите на разницу между первой и второй загрузкой для Ahrefs. Большинство файлов, которые нужно было загрузить при первой загрузке, кэшируются на стороне клиента (браузера), а это значит, что при второй загрузке можно просто использовать уже загруженные файлы для создания страницы. Сокращение времени соединения и загрузки означает, что страница загружается значительно быстрее. В данном случае First Paint загружается примерно в два раза быстрее при второй загрузке.

1 загрузка:

2 загрузка:

В таких инструментах, как Lighthouse, проблемы с кэшированием будут отмечены как «обслуживание статических ресурсов с помощью эффективной политики кэширования». Установка продолжительности времени для кэша зависит от системы, но, как правило, все, что вам нужно сделать, это использовать HTTP-заголовок Cache-Control. Max-age – это время, которое вы хотите сохранить в секундах, и его можно задать следующим образом: Cache—Control: max—age=31536000

Установите бюджет производительности

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

Адаптивная загрузка

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

Одной из составляющих этого процесса является Network Information API, который предоставляет вам информацию о подключении пользователя. Вы можете изменить свои изображения/контент или сделать что-то вроде отключения видео, основываясь на информации о сети входящего запроса. Многие CDN для изображений делают это с помощью Network Information API.

Используйте другие подсказки ресурса

Prefetch

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

Preload

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

AMP

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

AMP имеет и другие преимущества, поэтому мы рекомендуем рассмотреть этот вариант. Тем не менее это еще одна система, которую нужно поддерживать, и у нее имеются нюансы, с которыми необходимо ознакомиться до использования.

Тестирование скорости страницы и инструменты

Лабораторные и полевые данные

Лабораторные данные. Характерными чертами являются контролируемая среда, повторяемость процесса и контроль параметров. PageSpeed Insights – отличный пример. Тест проводится в одной и той же среде с одинаковыми настройками, и результаты будут примерно одинаковыми при каждом запуске.

Полевые данные. Мониторинг реального пользователя (RUM) – это то, как пользователи воспринимают ресурс. Он учитывает все, например, кеширование, устройства и сети, но ограничен по показателям и возможности отладки.

Инструменты для измерения скорости страниц

Google Tools

• TestMySite содержит карту показателей скорости, в которой вы можете оценить свою скорость по сравнению с конкурентами, имеет калькулятор влияния, чтобы вы могли оценить влияние скорости на ваш бизнес, и позволяет вам создать отчет с важными рекомендациями Lighthouse (в Chrome Dev Tools) – позволяет тестировать производительность страниц и приложений.
• PageSpeed Insights запускает Lighthouse и предоставляет рекомендации. На запуск Lighthouse в вашем браузере влияют многие вещи, такие как ваш компьютер, сеть, расширения в браузере. PageSpeed Insights позволяет создать довольно стабильную тестовую среду, которая даже не использует ресурсы вашего сервера.
• Инструменты разработчика Chrome – множество полезных функций, позволяющих узнать, что и как загружается на странице.
• Chrome User Experience Report (CrUX) – общедоступная база реальных данных о пользовательском опыте тех, кто решил поделиться ими в Chrome, охватывающая миллионы веб-сайтов.
• Web.dev – еще один инструмент тестирования Google, поддерживаемый Lighthouse. В нем также находится раздел для получения дополнительной информации о скорости страниц.

Другие популярные инструменты для повышения скорости

• WebPageTest
• Sitespeed.io
• SpeedCurve
• Calibre
• Rigor
• New Relic
• Boomerang
• Batch Speed
• GTmetrix
• Pingdom
• SpeedMonitor.io

Аудит сайта > Производительность

Инструмент Ahrefs «Аудит сайта» также содержит некоторую информацию о скорости страницы. Имеется отчет для TTFB и для Load Time, то есть сколько времени нам понадобилось, чтобы загрузить ресурс.

Рекомендации Ahrefs:

• Pagespeed Insights – выборочная проверка отдельных страниц. Также хорошо работает их API. Он позволяет бесплатно проводить 25 тысяч тестов в день и предоставляет множество показателей, включая данные на уровне CrUX. Можно не обращать внимания на общий показатель. Как мы уже видели, скорость – сложная штука. Вы можете улучшить некоторые показатели, но не улучшить свой результат.
• WebPageTest – функция блокировки, видео и карта запросов. Также API для тестирования блокировки в масштабе.
• GTmetrix – отчет о цепочке запросов.
• CrUX – исследование регионов, гистограммы, сравнение конкурентов.
• Web.dev – великолепная документация.

Какие данные использует Google для определения скорости страницы

Как рассказал аналитик Google Webmaster Trends Джон Мюллер, Google использует теоретическую скорость страницы (с использованием лабораторных данных) и реальные данные пользователей, которые пытались использовать эти страницы. По его словам, это похоже на данные отчета Chrome User Experience Report.

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

Оценка влияния изменений

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

Заключение

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

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

Источник