Время загрузки страниц — Метрика. Справка

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

Посмотреть отчет: Отчеты → Мониторинг → Время загрузки страниц.

Пример отчета можно увидеть на демосчетчике Яндекс Метрики.

Узнать среднее время загрузки сайта

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

Узнать время загрузки отдельной страницы

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

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

2. Выберите условие Просмотр URL и в строке укажите адрес страницы.

Чтобы увидеть динамику загрузки страницы, выберите диаграмму «Линии».

Проверить скорость загрузки Турбо-страниц сайта

Если на обычную версию и его Турбо-страницы установлен один счетчик Метрики, нужно выделить сегмент:

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

2. Выберите условие Турбо.

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

Для этого используйте переключатель стран и показатели отчета, например Время до загрузки DOM.

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

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

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

Метрики в отчете соответствуют этапам загрузки страницы, а также показывают время загрузки.

• DNS (обработка запросов к DNS) — время, потраченное на отработку запросов к DNS-серверу при загрузке страницы. Учитываются только значения с ненулевым временем.

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

• Редиректы (обработка редиректов) — время, потраченное на отработку HTTP-переадресации при загрузке страницы. Учитываются только значения с ненулевым временем.

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

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

• Ответ сервера — время, в течение которого был отправлен запрос и был получен ответ с содержимым страницы от HTTP-сервера к браузеру. Учитываются только значения с ненулевым временем.

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

• Время загрузки и парсинга HTML — время, в течение которого браузер обрабатывает содержимое страницы после ее загрузки с сервера и до начала отрисовки.

  На этот параметр влияет размер и сложность (количество и вложенность тегов) HTML-страницы.

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

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

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

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

 Написать в чат

Обратите внимание: служба поддержки не обзванивает пользователей. Не следуйте указаниям людей, которые вам звонят и представляются службой поддержки Яндекс Метрики.

Скорость загрузки сайта – как проверить и увеличить скорость загрузки страниц

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

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

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

Во время загрузки страницы происходит цепочка процессов:

1. Пользователь вводит поисковой запрос и переходит по гиперссылке.
2. Браузер отправляет запрос веб-серверу.
3. Веб-сервер обрабатывает запрос.
4. Веб-сервер отправляет ответ браузеру.
5. Браузер начинает получать информацию (мы изучаем этот аспект как время до первого байта).
6. Браузер анализирует, загружает и отображает содержимое страницы.
7. Страница становится полностью доступна в браузере.

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

Что происходит на сервере?

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

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

Если серверных настроек не так много, и в процессе оптимизации сайта повлиять на них невозможно, то HTML-код можно модернизировать с целью ускорения загрузки страницы. Для этого лучше отказаться от плагинов WordPress и делать PHP-код максимально простым и понятным. Рекомендуем удалить из него неиспользуемые элементы, лишние символы, знаки препинания и пробелы. Кроме того, файлы CSS, HTML и JavaScript можно сжимать для ускорения загрузки. Если ваши пользователи находятся в разных географических регионах, можно использовать CDN-хостинг, что обеспечит более быстрый и надежный доступ к сайту.

Проверить скорость загрузки Вашего сайта

Адрес сайта

Что происходит на стороне браузера?

Браузер помогает вашему сайту отображаться быстрее. Он осуществляет:

1. Обнаружение IP-адреса сайта в интернете. Для этого браузер сначала обращается к истории посещений. Это кэшированные данные, которые помогают ему быстрее находить и загружать страницы, которые были открыты ранее. Если же сайт открывается впервые, поиск IP-адреса будет осуществляться при помощи DNS-сервера. Не находя нужную информацию, он будет перенаправлять запрос к серверам другого ранга.
2. Создание HTTP-запроса для получения нужного контента.
3. Прием ответа от сервера в виде пакетов данных и последовательное отображает их содержимого согласно внутреннему алгоритму. Сначала отображается основной HTML-код, после чего создаются запросы на дополнительные элементы, такие как видео или картинки. В последнюю очередь загружается JavaScript.

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

Действительно ли скорость страницы влияет на позиции в Google?

Миссией Google является удобный, быстрый и полезный интернет. На достижение этой цели направлена работа множества внутренних алгоритмов, в том числе и определение скорости загрузки страницы. В 2010 году Google объявила ее одним из факторов ранжирования при поиске на компьютерах, а с 2018 года – еще и на мобильных устройствах. Обновление Page Experience, выпущенное в 2021 году, подтверждает, насколько важен пользовательский опыт при ранжировании страниц.

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

• если время ожидания окажется более 3 секунд, свыше половины пользователей покинут ваш сайт;
• 47% пользователей рассчитывают, что скорость загрузки страницы не превысит 2 секунды;
• если время загрузки увеличится с 1 до 3 секунд, вероятность отказов вырастет на 32 %;
• коэффициент конверсии снижается в среднем на 4,42 % с каждой дополнительной секундой загрузки.

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

Почему стоит инвестировать в ускорение работы сайта?

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

Ваши клиенты не нервничают

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

Данные, опубликованные Google/Civic Science, показали, что 54 % владельцев смартфонов разочаровываются, когда наблюдают длительную загрузку страницы.

Вы уменьшаете показатель отказов

Пользователи оценивают скорость загрузки сайта по своим субъективным ощущениям, однако общие закономерности выражены слишком ярко, чтобы их игнорировать. Исследование на предмет отказов Google продемонстрировало, что при увеличении скорости загрузки страницы с 1 до 10 секунд вероятность отказа пользователя мобильного устройства растет на 123 %.

Наглядным примером эффекта от ускорения являются результаты работы с сайтом компании Dakine. Увеличение скорости загрузки отдельных страниц на 48–65 % привело к росту трафика на 31 %.

Вы увеличиваете конверсию/скорость продаж

Взаимосвязь между этими двумя показателями была выявлена еще в 2006 году. Ее продемонстрировал Грег Линден на примере компании Amazon. Вы удивитесь, но клиенты оказались нелояльными даже к такому гиганту индустрии. 100 миллисекунд задержки рендеринга привели к сокращению продаж на 1 %. Современные исследования, проведенные Akamai, демонстрируют еще более шокирующие результаты – снижение конверсий на 7 % при задержке в загрузке сайта всего на 1 секунду. Что такое 7 % для сайта, который приносит 100 000 грн ежедневно? За год эта сумма превысит 2,5 миллиона грн.

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

В этом же исследовании Google было установлено, что ускорение сайта на 0,1 с дает прирост конверсии на 8,4 % для розничной торговли и 10,1 % для туристической отрасли. К тому же в сфере ритейла ускорение привело к увеличению средней суммы заказа на 9,2 %.

Как проверить скорость: сервисы и их возможности

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

Google PageSpeed Insights

Проверяет скорость загрузки сайта и выдает общую оценку в баллах. Результат выше 90 свидетельствует о хорошей скорости загрузки страницы, диапазон в пределах от 50 до 90 говорит о средних значениях, а показатели ниже 50 являются низкими. Сервис оценивает время загрузки по 16 наиболее значимым критериям и дает рекомендации для дальнейшей оптимизации ресурса при работе на компьютерах и мобильных устройствах. Выглядит это как перечень элементов, требующих вашего внимания к их URL. Прислушиваться к рекомендациям Google PageSpeed Insights однозначно стоит, особенно если вы занимаетесь продвижением в этой поисковой системе.

Pingdom Tools

Бесплатный сервис предназначен для измерения скорости выбранных страниц в определенном регионе. Pingdom Tools дает оценку отдельных элементов по шкале от A до F, кроме того, указывает на вполне конкретные направления для дальнейшей оптимизации, которые могут быть использованы для продвижении сайта в интернете. Сервис анализирует использование кэш-памяти, файлов куки, редиректы, CDN, оценивает качество проработки CSS, Java Script, графического контента и ссылок.

Load Impact

Приложение, требующее установки на ваш ПК. Основное предназначение – проверка скорости загрузки сайта при изменении числа посетителей. Имитирует нагрузку на сервер, составляющую до 50 человек. Платная версия позволяет тестировать страницы в условиях еще большей нагрузки. Попутно в Load Impact (K6) проверяется скорость загрузки страницы. Такой подход позволяет выявить, справляется ли ваша система с пиковыми нагрузками и может ли выдерживать временные всплески прироста трафика без сбоев в работе.

Which Loads Faster

Как следует из названия, сервис предназначен для сравнения скорости загрузки сайта с конкурентами. Which Loads Faster обладает максимально простым интерфейсом. Любые настройки отсутствуют – необходимо лишь ввести URL изучаемых страниц. Анализ дает весьма общие результаты, но отлично подходит для быстрого сравнения.

GTmetrix

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

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

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

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

WebPagetest

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

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

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

Dotcom-Monitor

Платное облачное приложение с 30-дневным тестовым периодом. Позволяет проверить сайт на скорость в условиях использования различных браузеров и систем – Google, Firefox, Edge, iOS, Android, а также разных типов сетей (2G, 3G, 4G). За один тест анализирует 25 геолокаций. Итоги анализа в Dotcom-Monitor отображаются в виде отчета о времени загрузки при первом и повторных посещениях, а также сервис предоставляет детализированную информацию по каждому конкретному местоположению.

Во вкладке Page Speed Insights доступен перечень советов, который касается оптимизации графического контента, кэша, Java Script и CSS и других факторов. Результаты теста можно распространить при помощи открытых ссылок.

Dareboost

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

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

GiftofSpeed

Выполняет комплексное тестирование сайта, позволяющее провести оптимизацию для всех типов устройств – компьютеров, планшетов и мобильных телефонов. GiftofSpeed использует 8 стран для контроля. Анализирует такие важные факторы, как оптимизация CSS и JS, сжатие CSS и JS файлов, проверяет GZIP, кеширование файлов, количество HTTP-запросов.

Uptrends

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

Varvy

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

KeyCDN

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

Как ускорить загрузку сайта: эффективные приемы

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

Что можно ускорить на стороне сервера?

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

Использовать сжатие без потерь

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

Оптимизируйте свой PHP-код

Если код страницы не задействован полностью, его неиспользуемые части можно попросту удалить. Такая модернизация может проводиться вручную, а также с использованием автоматизированных решений, таких как CSSNano или UglifyJS. Для определения неиспользуемого кода можно применять Developer Tools в Chrome. Для этого вам потребуются вкладки Sources и Coverage:

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

Использовать кэш на стороне сервера

Кеширование помогает увеличить скорость загрузки некоторых элементов при повторных посещениях сайта пользователями или обновлении страницы. Этот способ оптимизации поможет сократить время до первого байта (TTFB) , требуя, чтобы сервер использовал меньше ресурсов для загрузки веб-страницы. Кэширование сохраняет копии файлов, сводя к минимуму работу по их последующим поиску и передаче. Это происходит за счет того, что сервер создает статический HTML-файл с однотипными данными, которые отправляются каждому следующему пользователю. Данные в кэш могут сохраняться ограниченное время, после чего память очищается и процесс выполняется заново. Кэширование позволяет не только ускорять загрузку страниц, но также использовать меньше ресурсов хостинга. По данным Kinsta, такой прием дает возможность ускорить загрузку до 30 %.

Что можно ускорить в браузере?

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

Включить кэширование на стороне браузера

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

Оптимизируйте свою графику

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

• изменение форматов файлов;
• запуск отложенной загрузки;
• сжатие без потерь в качестве.

Для оптимизации графики существуют готовые решения – плагины WordPress. Если же ваш сайт разработан на другой платформе, можно воспользоваться такими сервисами, как Attrock или Squoosh. Это позволит уменьшить «вес» отдельных файлов на 25–80 %.

Как ускорить загрузку сайта, работая с изображениями? У вас есть несколько способов:

• оптимизируйте размеры файлов. Учитывайте формат экрана устройств, используемых посетителями сайтов;
• используйте форматы по назначению. JPG предназначены для фото, PNG – для растровой графики, а SVG – для векторной. Использование оптимальных форматов для каждого типа информации поможет сократить время загрузки страниц без потери качества изображений;
• задействуйте Lazy Load
  . Ленивая загрузка предполагает, что файлы, находящиеся на странице, загружаются постепенно. Пользователи даже не замечают такой отсрочки, поскольку изображения подгружаются в момент прокрутки, как раз перед тем, как она понадобится.

Для оптимизации размера изображений существуют такие инструменты, как ImageOptim, JPEGmini, Kraken. Также можно откорректировать их формат непосредственно в HTML-коде, управляя такими атрибутами, как <secret> и <size>.

Оптимизация файлов CSS и JS

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

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

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

Выводы

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

КОМПЛЕКСНЫЙ АУДИТ САЙТА

Профессиональный комплексный аудит сайта — глобальный анализ вашего проекта ✔ Подробный отчет с перечнем ошибок и рекомендаций для улучшения ✔ Увеличение конверсий

Получить консультацию

Наш менеджер свяжется с Вами в ближайшее время

Скорость загрузки сайта в 2021 году: как определить, зачем ускорять

Что такое скорость загрузки сайта и почему она важна

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

Исследование Google говорит о том, что 53% пользователей закроют сайт, если он будет загружаться дольше трёх секунд. А если скорость загрузки страницы возрастёт с одной до десяти секунд, процент отказов увеличится на 123%.

В исследовании Portent есть данные о том, что конверсия с каждой дополнительной секундой загрузки сайта снижается на 4,2%.

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

Яндекс в своём блоге также постоянно говорит о том, как важна скорость загрузки.

В каких случаях пользователь готов ждать

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

• Знакомый сайт

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

• Социальные сети

То же самое и с соцсетями. Если любимый Instagram (организация, запрещенная на территории РФ) стал грузиться 5 секунд вместо 3, скорее всего, пользователь подождёт.

• Сайты государственных организаций

Загрузку сайтов типа Госуслуг пользователи готовы ждать хоть 10, хоть 20 секунд. Потому что на таких ресурсах оказывают важные услуги, которые в других местах получить нельзя.

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

Зачем увеличивать скорость загрузки сайта

• Конкуренция

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

• Повышение позиций в поиске

Мы уже говорили, что скорость загрузки влияет на позиции сайта в поисковиках. Это касается и Google, и Яндекс.

• Снижение процента отказов

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

• Имидж компании

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

Как проверить скорость загрузки сайта

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

1.   PageSpeed Insights от Google

Бесплатный сервис

Один из самых популярных инструментов, с помощью которого можно проверить скорость загрузки сайта — Google Page Speed. Сервис показывает, как быстро сайт отображается на компьютерах и мобильных. Результат вы видите в баллах от 1 до 100. Помимо самой оценки скорости, инструмент даёт конкретные рекомендации о том, как эту скорость увеличить. Вы также можете видеть, насколько увеличится скорость загрузки, если вы исправите ошибки.

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

Бесплатный сервис

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

3.   WebPageTest

Бесплатный сервис

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

4.   PR-CY

Бесплатный сервис с отдельными платными функциями

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

В платной версии можно проверить скорость отдельных страниц вашего сайта.

5.   Site Speed

Бесплатный сервис

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

6.   K6

Бесплатный период — 30 дней

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

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

7.   Uptrends

Бесплатный сервис

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

8.   Pingdoom Tools

Бесплатный сервис

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

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

9.   GTmetrix

Бесплатный сервис с отдельными платными функциями

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

10.   Dotcom-Monitor

Бесплатный сервис с отдельными платными функциями

Если для вашего сайта важна скорость загрузки из разных регионов, можно воспользоваться сервисом от Dotcom-Monitor. Он поможет измерить скорость загрузки сайта из 25 точек мира. При этом показатель замеряется при первом и повторном визите.

Что может плохо влиять на скорость загрузки сайта

• Скорость хостинга

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

• Перегруженный код сайта

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

• Большое количество графических элементов

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

• Структура сайта

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

Как ускорить загрузку сайта: 3 совета

И вот вы проверили свой сайт и увидели, что он загружается больше 3-4 секунд. Что можно сделать? Как ускорить скорость загрузки сайта?

1.   Сжать картинки

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

2.   Оптимизировать работу сервера

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

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

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

3.   Подключить Яндекс.Турбо и AMP от Google

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

4.   Использовать плагины в CMS

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

Итоги

Поисковики уже давно обращают внимание на скорость загрузки сайтов. Но сейчас это становится важно ещё больше. Например, в мае 2021 Google начнёт применять новый фактор ранжирования Core Web Vitals. Скорость загрузки занимает в нём одно из первых мест.

Поэтому даже если вас устраивают остальные показатели (трафик, процент отказов, конверсия), скорости сайта всё-таки придётся уделить внимание.

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

X

• Новости Be1.ru
• Новости SEO

Be1 Вконтакте

1251 подписчиков

Be1 Facebook

1567 подписчиков

Новости

Сообщить о проблеме

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

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

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

Отзывы об инструменте

Оценка:

4.2 5 25

21.07.2022  13:45

Скорость загрузки магазина игрушек #сайт# — 0.169 сек.

Ответить

26. 05.2021  22:42

Скорость загрузки: 0.871 сек. elit.cf насчёт сайта be1.ru просто супер для веб мастера инструменты

Ответить

29.03.2021  12:53

Скорость загрузки: 0.03 сек.

Ответить

26.11.2020  03:52

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

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

То есть с какой стороны не подойди, тест является мистификацией.

28. 06.2020  19:59

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

Ответить

16.04.2020  11:43

0.429 сек. — неплохо для сайта

Ответить

10.02.2020  22:19

А у меня 3.185 сек. Интересно, это долго?

12.01.2020  14:11

Такого неправдоподобного сервиса измерения скорости еще не встречала… Специально сравнила 2 чужих сайта — тот, что реально грузился «Неделю», оказался самым быстрым здесь! Если такая проверка скорости, что говорить об остальном?

23.09.2018  23:58

если судить по результатам других сервисов, а самое главное по весу сайтов, результат вообще неправильный

Ответить

27.03.2018  09:05

Отлично, правильно показал

Ответить

30. 07.2021  11:03

Офигенный сайт. Часто здесь анализирую сайты. Спасибо разработчикам.

Ответить

31.03.2021  17:45

Почемуто показатель скорости данного инструмента и пейджспид отличается?

Ответить

28.12.2020  19:43

Скорость загрузки: 0.503 сек.

Ответить

04.07.2020  00:13

0,648 сек это у сервера с 8 -ю ядрами и ssd диском. Ну а так себе проверка на 4-ку…. я бы сказал

Ответить

22.06.2020  02:03

Скорость загрузки: 2.941 сек.
Сервер в США

Ответить

14.04.2020  12:26

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

Ответить

27.01.2020  23:05

Мой сайт пишет Скорость загрузки: 0.068 сек, на гугл пейд 98% показывает, и по спидометру там так же примерно под сотку максимальных. Поэтому правильно все показывает ничем не хуже Гугла.

Ответить

29.10.2018  17:01

Разные результаты каждый раз.

Ответить

14.05.2018  13:12

А сервис только главную страницу проверяет?

Ответить

26.02.2018  23:44

Все хорошо! Если всегда будет бесплатно)

Ответить

\n’ + ‘

\n’ + ‘

\n’ + ‘ 0\n’ + ‘ \n’ + ‘

\n’ + ‘

\n’ + ‘ 0\n’ + ‘ \n’ + ‘

\n’ + ‘

\n’ + ‘ ‘+item. author+’\n’ + ‘

Как проверить скорость загрузки сайта на мобильном в google page

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

Результатом анализа будет оценка по шкале XY/100. А ошибки, влияющие на скорость загрузки сайта, будут подсвечены одним из цветов:

• Красным – требуют скорейшего устранения.
• Оранжево-желтым – нужно исправить по возможности.
• Зеленым – с элементами сайта все хорошо.

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

Содержание

1. Как проверить скорость загрузки сайта
2. Как ускорить страницу
3. Способ №1: Оптимизация картинок
4. Способ №2: Удаление лишних строчек кода
5. Способ №3: Включения сжатия
6. Способ №4: Оптимизация мобильной версии сайта
7. Способ №5: Включения кеширование браузера
8. Насколько важна скорость загрузки с мобильного
9. Почему в Google page нужно проверять несколько страниц
10. Заключение

Чтобы оценить скорость загрузки интернет ресурса нужно выполнить такие действия:

1. Зайти на официальный сайт Google page developers. google.com/speed/pagespeed/insights/.
2. Главная страница представляет собой форму, в которую нужно записать ссылку на сайт, который нужно проанализировать.

1. В качестве примера для проверки будет использован популярный ресурс «Википедия». После ввода сайта необходимо нажать кнопку «Анализировать».
2. После чего пользователь увидит оценку производительности сайта.

 

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

5. Спустившись ниже можно узнать скорость загрузки страницы в условиях популярной для смартфонов 3G сети.

5. Следующим пунктом идет список рекомендаций по улучшению сайта и основная информация о его производительности.

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

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

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

Чтобы ускорить сайт потребуются минимальные технические знания о сайтостроении, JAVASCRIPT, CSS, HTML и CMS.

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

Способ №1: Оптимизация картинок

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

Для этого подойдут такие способы:

• Бесплатные Сервисы Compressor.io и TinyPNG помогут сжать изображения на более чем 80% и в большинстве случаев без потери качества.
• Следует удалить все CSS и HTML теги, с помощью которых картинка подгонялась под сайт. Необходимо сразу загружать изображение, которое соответствует требованиям в расширении.

Способ №2: Удаление лишних строчек кода

Большую роль в оптимизации играет минимизация кода старицы. Google page всегда рекомендует пересмотреть объемы кода JavaScript и CSS файлов, сократив ненужное.

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

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

• Чтобы устранить подобную проблему можно установить плагин Gulpjs, который автоматически устранит все ненужные пробелы в коде файлов CSS.
• Оптимизировать JavaScript поможет плагин Closure Compiler и JSMin которые проделывают аналогичную вышеописанную операцию.
• Очистить HTM код сайта можно с помощью инструмента PageSpeed Insights для CMS wordpress.

Способ №3: Включения сжатия

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

Способ №4: Оптимизация мобильной версии сайта

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

Увидеть, как выглядит сайт со смартфона, можно даже не имея его под рукой, с помощью браузера Google Chrome, для этого нужно:

1. Нажать на «Настройки» в правом верхнем углу всплывающего окна.
2. Далее выбрать «Дополнительные инструменты».
3. Затем «Инструменты разработчика» и на панели инструментов нажать на иконку со смартфоном.
4. Теперь сайт выглядит как на телефоне.

Способ №5: Включения кеширование браузера

Кэширование браузера может оказывать влияние на скорость загрузи сайта с мобильного. Это работает так:

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

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

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

Насколько важна скорость загрузки с мобильного

Согласно последним исследованием и статистике компании Google, более половины времени в интернете пользователь проводит со смартфона. В этом же исследовании был проведен опрос, в результате которого больше 40% пользователей считают, что скорость загрузки страницы не должна превышать 3 секунды. А 30% назвали уже 2 секунды слишком долгим временем.

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

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

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

Почему в Google page нужно проверять несколько страниц

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

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

Заключение

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

Google разработали функциональный сервис для проверки скорости загрузки сайта с мобильного телефона и выявления проблем, которые тормозят его работу. Понравилась статья, не забудь подписаться на обновление. На сегодня у меня все! А вы как проверяете скорость загрузки своего сайта? До встречи на блоге.

Бала ли вам статья полезной?

Как улучшить оценку PageSpeed Insights мобильной версии сайта

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

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

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

Приоритет мобильной версии сайтов

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

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

Какие страницы необходимо проверять в интернет-магазине

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

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

Как проверить скорость загрузки мобильных страниц

Существует много бесплатных инструментов, которые помогаю проверить скорость загрузки сайта. Наиболее популярный из них за счет простоты использования и информативности — PageSpeed Insights (PSI) от самого Google.

Читайте также

• Как работает PageSpeed Insights

В PageSpeed Insights вы можете увидеть как быстро загружалась страница у реальных пользователей (блок Данные наблюдений).

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

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

---

Воспринимать рекомендации PSI как нечто обязательное к исполнению от и до было бы ошибкой

---

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

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

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

Как улучшить скорость загрузки мобильных страниц

В Хорошопе мы регулярно мониторим изменения, которых требуют поисковые системы и работаем над оптимизацией тех факторов, которые зависят непосредственно от самой платформы:

• оптимизация и ускорение работы хостинга;

• верстка страниц и оптимизация загрузки кода;

• оптимизация кеширования страниц;

• оптимизация системы хранения изображений;

• и так далее.

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

---

Скорость загрузки магазина зависит не только от платформы, но и от организации контента.

---

Формат изображений

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

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

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

Маркетинговые системы

Сложно представить работу современного интернет-магазина, к которому не подключены базовые маркетинговые системы, как минимум, Google Analytics и Facebook Pixel.

Однако, даже подключение в полном соответствии с требованиями Google их собственных продуктов, например, Google Tag Manager снизить оценку PSI. Нормальная оценка для сайтов с самыми необходимыми скриптами аналитики будет составлять 70+, в то время как этот же сайт без аналитики может показывать результат от 90 и выше.

Скрипты внешних систем и кастомные шрифты

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

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

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

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

Контент на страницах сайта

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

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

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

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

Читайте также

• Баннеры в мобильной версии сайта

---

Чек-лист для проверки

1. Проверьте баннеры на главной странице/страницах каталога и оставьте только самые информативные.

2. Загрузите для баннеров на мобильной версии изображения в формате jpg c параметром Качеcтво = 50%.

3. Отключите от сайта избыточные скрипты сторонних систем и кастомные шрифты.

4. Оптимизируйте вес и размер изображений товаров.

5. Проверьте блоки seo-текстов на страницах категорий.

6. Проверьте блок Описание на страницах товаров.

---

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

7 точных инструментов для тестирования скорости веб-сайта (мобильный сайт и сайт для ПК)

7 апреля 2016 г. 28 мая 2020 г. / Автор Суровый Агравал / 5 минут чтения

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

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

Верно?

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

Очевидно, это серьезно!

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

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

• Как ускорить работу WordPress (руководство по настройке производительности)

CDN, например MAXCDN или BunnyCDN. Это еще больше сократит время загрузки вашего веб-сайта.

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

Я поделюсь с вами 7 лучшими (бесплатными) онлайн-инструментами, которые  проверяют время загрузки вашего веб-сайта для мобильных устройств или компьютеров  и предлагают способы улучшения.

Содержимое страницы

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

1. GTMetrix Mobile Test

GTMetrix предлагает тестирование загрузки мобильного сайта на устройствах Android.

Чтобы попробовать это, вам нужно создать  бесплатную учетную запись  на их сайте, а на панели инструментов вы можете выбрать вариант «Chrome, (Android, Galaxy Nexus)», который проверит время загрузки вашего Android.

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

Если на данный момент у вас нет адаптивного или мобильного дизайна, вам следует хотя бы проверить время загрузки вашего сайта на низкой скорости (скорость 3G или 2G). Когда я проверил свой настольный сайт в 3G, загрузка заняла почти 14 секунд.

Ознакомьтесь с GTMetrix.

С помощью Google PageSpeed ​​Insight вы также будете получать предложения по повышению скорости мобильного сайта. Он покажет важные вещи, вещи, требующие внимания, и вещи, которые совершенны. Я понял несколько проблем с моим мобильным сайтом после использования этого.

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

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

Check out Google PageSpeed ​​Insights

5 Free Tools To Check Website Speed ​​

1. Google Page Speed ​​Insights tool
2. WebpageTest.Org
3. Sucuri Load Time Tester
4. GTMetrix
5. Pingdom

Let us take a detailed look на все инструменты, упомянутые выше.

1. Инструмент Google Page Speed ​​Insights (Desktop)

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

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

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

Проверить скорость веб-сайта сейчас

2.

WebpageTest.Org

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

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

3. GTMetrix

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

Вот отчет о производительности ShoutMeLoud, и вы можете увидеть множество предложений. Здесь GTMetrix показывает, что ShoutMeLoud занимает 90,26 секунды для загрузки, что самоубийственно.

Неплохо бы повторно запустить тест. Иногда плагины кеширования могут делать забавные вещи ( например, удаление 6 секунд из времени загрузки страницы ).

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

4. Tools.Pingdom

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

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

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

Проверьте Pingdom здесь.

5. Тест скорости сайта

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

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

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

Также прочтите:

• Имеет ли значение время загрузки сайта для SEO?

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

Если вам интересны эти инструменты, не забудьте поделиться этой статьей со своими друзьями на Facebook и Google Plus.

Подписаться на YouTube

Автор Харш Агравал

Блогер, автор и спикер! Харш Агравал признан лидером в области цифрового маркетинга и финтеха. Основатель ShoutMeLoud и спикер на ASW, Hero Mindmine, Inorbit, IBM, саммите по блокчейну в Индии. Кроме того, отмеченный наградами блогер.

6 лучших инструментов для получения статистики времени загрузки веб-сайта

Облако категорий

По состоянию на 2 октября 2020 г.

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

© 2020 SolarWinds Worldwide, LLC. Все права защищены.

SolarWinds ^® Pingdom ^® — популярный инструмент мониторинга доступности и производительности веб-сайтов, предназначенный для извлечения информации из статистики времени загрузки веб-сайта. Его мониторинг скорости страницы прост в использовании; все, что вам нужно сделать, это ввести URL своей страницы и выбрать регион тестирования. Инструмент выполняет тесты скорости страницы каждые 30 минут, предоставляя результаты для элементов HTML, CSS и JavaScript на странице в порядке загрузки страницы. Результаты можно легко проанализировать с помощью каскадной диаграммы, в которой перечислены размеры файлов, путь, время загрузки и другие сведения об элементах на веб-странице. Эта визуализация помогает быстро определить медленно загружающиеся элементы. Инструмент также предлагает скриншоты диафильма, снятые с частотой 500 мс во время загрузки страницы. С помощью скриншотов вы можете визуально отслеживать, достаточно ли быстро загружаются важные элементы на странице. Основываясь на этом визуальном анализе, разработчики могут оптимизировать веб-сайт, чтобы улучшить воспринимаемое время загрузки. В дополнение к синтетическим инструментам для мониторинга скорости страницы вы также можете попробовать функции Pingdom Real User Monitoring (RUM), которые дают представление о реальной производительности ваших веб-страниц. Вы можете использовать оценку Apdex или создать свои собственные оценки, чтобы обеспечить оптимальное качество обслуживания клиентов. Планы Pingdom начинаются с 10 долларов в месяц, и вы также можете подписаться на 14-дневную бесплатную пробную версию.

© 2020 GTMetrix. Все права защищены.

GTMetrix предлагает комплексный мониторинг скорости страницы, включающий важные показатели, совокупные оценки и тестирование скорости в различных регионах мира. Вы также можете оценить реальные данные о производительности на мобильных устройствах и настольных компьютерах. Он предоставляет набор инструментов для выполнения тестов на смоделированных устройствах, чтобы найти возможности для повышения скорости загрузки страниц и улучшения взаимодействия с пользователем. Графические отчеты GTMetrix с параметрами настройки представления с использованием диапазона дат, масштабирования и панорамирования, а также аннотаций позволяют лучше проверять и понимать производительность страницы. Кроме того, вы можете настроить оповещения на основе пороговых значений на основе совокупных оценок или любой важной метрики. Этот инструмент очень полезен как для отделов маркетинга, так и для команд разработчиков и может оказаться подходящим для большинства организаций; планы начинаются с $ 14,95 в месяц. Существует также бесплатный план, который может помочь в оценке.

© 1998-2020 Dotcom-Monitor, Inc. Все права защищены.

Dotcom-Monitor — еще одно эффективное решение для мониторинга производительности веб-сайтов, разработанное для того, чтобы помочь вам отслеживать время загрузки страниц с его глобальных тестовых серверов. Его отчеты помогут вам быстро определить самые быстрые и самые медленные элементы на ваших веб-страницах, и вы сможете получить разбивку производительности каждого элемента на странице. Водопадные диаграммы дают четкое представление о производительности элементов по мере загрузки страницы. Вы также можете использовать функцию дросселирования сети, чтобы проверить производительность вашего веб-сайта в различных сетевых условиях. Инструмент предлагает расширенные возможности как с реальными пользовательскими, так и с синтетическими функциями мониторинга, а его планы начинаются с 19 долларов.0,95 в месяц.

Сервис от Zoho Corp © 2020. Все права защищены.

Site24x7 — это всестороннее решение для мониторинга веб-сайтов, предлагающее расширенные функции RUM и синтетического мониторинга, детализированные отчеты, оповещения и сторонние интеграции. Вы можете получить статистику времени загрузки веб-сайта из 110 мест по всему миру и проанализировать производительность с помощью реальных браузеров. Хотя вы можете получить его стартовый план всего за 9 долларов в месяц, он включает только поддержку по электронной почте и на форуме, что может привести к задержкам при возникновении технических проблем. Рекомендуемый поставщиком план Pro стоит 35 долларов в месяц.

© Google LLC, 2020 г. Все права защищены.

PageSpeed ​​Insights от Google — популярный инструмент среди разработчиков. Он отслеживает веб-сайты в режиме реального времени и предоставляет предложения по улучшению производительности на разных устройствах. В его отчетах об эффективности вы можете получить совокупную оценку, которая поможет вам понять общую производительность страницы. Согласно рекомендациям PageSpeed, организации должны стремиться набрать по этому показателю более 90 баллов. Он также предоставляет сводку данных о производительности страницы за последние 28 дней для различных показателей в разделе «Пользовательский опыт Chrome» (CrUX), классифицируя производительность как хорошую, плохую или требующую улучшения. С помощью этих точек данных и предложений разработчики могут легко принимать обоснованные решения об улучшении производительности страницы.

© 2020 WebPageTest LLC.

WebPageTest — это инструмент для тестирования скорости веб-страницы с открытым исходным кодом, изначально разработанный и используемый AOL внутри компании. С 2008 года инструмент вырос из большого сообщества, которое постоянно совершенствует программное обеспечение. Будучи инструментом с открытым исходным кодом, он полагается на своих партнеров в отношении серверов тестирования. Интерфейс инструмента может показаться немного устаревшим; тем не менее, он предоставляет несколько дополнительных параметров для настройки параметров теста, таких как местоположение теста, браузер, минимальная продолжительность теста, а также возможность запуска JavaScript после теста. Хотя инструмент предлагает гибкость для настройки тестов скорости, он может быть немного сложным для начинающих пользователей или тех, кому не хватает технических знаний.

Заключение

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

По состоянию на сентябрь 2020 г.

Как повысить скорость страницы от начала до конца (Расширенное руководство)

Патрик Стокс

Патрик Стокс — консультант по продуктам, специалист по технической оптимизации и представитель бренда в Ahrefs. Он является организатором Raleigh SEO Meetup, Raleigh SEO Conference, Beer & SEO Meetup, Findability Conference и модератором /r/TechSEO.

Показывает, сколько разных веб-сайтов ссылаются на этот фрагмент контента. Как правило, чем больше веб-сайтов ссылаются на вас, тем выше ваш рейтинг в Google.

Показывает расчетный месячный поисковый трафик этой статьи по данным Ahrefs. Фактический поисковый трафик (по данным Google Analytics) обычно в 3-5 раз больше.

Сколько раз этой статьей поделились в Твиттере.

Поделитесь этой статьей

Подпишитесь на еженедельные обновления

Подписка по электронной почте

Подпишитесь

Содержание

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

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

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

WordPress:

• WP Rocket (платный)+ плагин оптимизации изображений, OR:
• Autoptimize+ плагин Cache

Drupal

• Advagg+ Оптимизация изображения
9923
• Advagg+ Advagge Optimization Module
9923 9000 2
• ADVAGG+. Оптимизация изображения
9233
• ADVAGG+. Оптимизация Image
99 2
• . . Вот все, что я собираюсь рассказать:
  • Что такое скорость страницы?
  • Почему вы должны заботиться о скорости загрузки страницы
  • Как быстро должна загружаться моя страница?
  • Как создается страница
  • Тестирование скорости страницы и инструменты
  • Оценка влияния изменений

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

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

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

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

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

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

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

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

  Так почему же вы видите больше посетителей?

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

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

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

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

  Как создается страница

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

  Примечание.

  Я буду использовать https://www.webpagetest.org/ для многих изображений, а также буду ссылаться на тесты и перечислять настройки, где это применимо.

  Установление соединения

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

  DNS (зеленый)

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

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

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

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

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

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

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

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

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

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

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

  Возможно, вы даже захотите использовать HTTP/3 для еще более быстрого соединения. Однако поддержка этого протокола все еще находится на ранних стадиях и, по крайней мере, на момент написания статьи, вероятно, еще не является жизнеспособным вариантом.

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

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

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

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

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

  Для HTML и других типов файлов, таких как CSS и JavaScript, вы можете сократить время за счет использования меньшего количества кода, минификации для удаления ненужных символов, таких как комментарии и пробелы, из кода и сжатия для уменьшения размера файлов. Смысл в том, чтобы сделать загрузку файла меньше, чтобы эта часть загрузки была быстрее. Однако существует не только один способ минификации и сжатия. Во многих случаях это обрабатывается CDN или сервером (Apache или Nginx являются распространенными серверами) или плагином/модулем/пакетом. Дополнительную информацию о реализации сжатия можно найти здесь, а минификации — здесь.

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

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

  Использовать один и тот же сервер для запросов, когда это возможно

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

  Начиная с HTTP/2, это не лучшая практика. Вы должны использовать тот же сервер для запросов, если это возможно.

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

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

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

  Использовать предварительное подключение или предварительную выборку DNS (если вы используете другой сервер)

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

  Пример кода:
  

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

  Пример кода:
  com">

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

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

  1. HTML обрабатывается в дерево DOM, о котором мы упоминали ранее
  2. CSS анализируется в объектную модель CSS (CSSOM), которая сообщает браузеру, как все оформлено, дополнено, окрашено, имеет размер и т. д.
  3. CSSOM + DOM вместе сделать то, что называется Render Tree.
  4. Происходит компоновка, то есть обработка того, где каждый элемент будет находиться в области просмотра браузера, в зависимости от того, что находится в дереве рендеринга.
  5. Пиксели закрашиваются на экране, поэтому вместо белого экрана вы видите цвета, формы, текст и изображения.

  Примечание.

   Любопытный факт, раскрытый Мартином Сплиттом из Google, заключается в том, что робот Googlebot экономит время и ресурсы, фактически не рисуя пиксели страницы. У них есть информация, которая им нужна после компоновки.

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

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

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

  • Первая отрисовка (FP)  – браузер отображает что-либо в первый раз.
  • First Contentful Paint (FCP)  — браузер отображает что-то из DOM (объектной модели документа), что может быть текстом, изображением и т. д.
  • First Meaningful Paint (FMP)  — визуальная загрузка наиболее важных элементов.
  • Отрисовка с наибольшим содержанием (LCP)  — самый большой элемент над загруженным сгибом.
  • Визуально завершено  – страница визуально загружена.
  • Индекс скорости — расчетный показатель зрительной нагрузки, учитывающий несколько моментов времени.
  • Совокупное смещение макета (CLS)  – измеряет, сколько элементов перемещается в области просмотра во время загрузки или насколько стабилен макет. Здесь есть хорошее руководство по причинам CLS.

  «Если вы не можете это измерить, вы не можете это улучшить» https://t.co/dNrDYaIj4Z рассказывает, как измерить современные показатели веб-производительности и оптимизировать их. pic.twitter.com/yvBO2FQ6Ds — Эдди Османи (@addyosmani) 31 января 2020 г.

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

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

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

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

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

  Тип файла CSS

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

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

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

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

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

  Например, это:

  Становится следующим:

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

  Встроенное

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

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

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

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

  Вероятно, вы не хотите встраивать все содержимое всех файлов. Будьте внимательны и вставляйте только критический контент. Технически вы можете встроить все CSS и JS и даже шрифты и изображения, но в итоге вы получите гигантскую загрузку 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/

  Код вручную:
  https://www.sitelocity.com/critical-path-css-generator
  https://jonassebastianohlsson.com/criticalpathcssgenerator/

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

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

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

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

  Новое: Советы по загрузке производительности для, предварительной выборки и приоритетов в Chrome: https://t.co/PzgxSQEgcd 🔥 pic.twitter.com/DpDmlNIedO — Addy Osmani (@addyosmani) 27 марта 2017 г.

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

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

  
  

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

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

  Что нужно знать о предварительной загрузке

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

  Сервер Push

  Это было частью спецификации HTTP/2 (h3). Это позволяет серверу доставлять файл без запроса. Таким образом, вместо цепочки, которая может быть HTML > CSS > Шрифт, это позволяет сайту сказать, что мне нужен этот шрифт, просто отправьте его.

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

  Тип файла JavaScript

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

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

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

  Переместить в нижний колонтитул

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

  Defer/Async

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

  Примеры кода отсрочки/асинхронизации

  Обычный:
  

  Асинхронный:

  2

  2

  Отложить:
  

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

  Приоритеты загрузки JavaScript в Chrome: https://t.co/O3Qg2eHgXb ~ как загружаются и выполняются