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

Проверка скорости сайта

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

Почему важно проверять скорость сайта?

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

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

Анализ скорости в сервисе состоит из измерения параметров, составляющих время загрузки сайта: FCP — времени до загрузки видимого контента, CLS — видимых сдвигов элементов, Total Blocking Time — времени блокировки действий пользователя, и других важных параметров.

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

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

Зачем нужна и что дает проверка скорости сайта?

Какие основные параметры учитываются при проверке?

Источник

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

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

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

Гонка за покупателем

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

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

Почему так важна скорость?

Работа в интернете — это серфинг. Человек легко переходит со страницы на страницу, с сайта на сайт. За короткий промежуток времени совершаются десятки кликов, переходов, просмотров страниц.

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

Время — главная ценность для человека, и особенно для интернет-пользователя.

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

Простой пример:

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

Результаты поисковой выдачи по запросу «робот-пылесос купить» в регионе Москва

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

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

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

Факт

«70% пользователей с меньшей вероятностью совершат покупку (и маловероятно, что вернутся в будущем), если время загрузки дольше, чем ожидалось».

По данным опроса Unbounce

Как скорость влияет на SEO?

Скорость загрузки сайта — один из факторов ранжирования. Google сообщил об этом еще в 2010 году. Ну а к 2020-м гг. значимость показателя page speed только выросла.

Быстродействие прямо влияет на SEO, и вот почему:

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

Какой сайт быстрый, а какой нет?

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

Задержка в 5-7 секунд еще допустима. Но если контент загружается более 10 секунд — нужно принимать меры.

64% пользователей ожидают, что страницы будут загружаться не более 4 секунд.

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

Как измеряется скорость?

Для проверки скорости сайта можно использовать доступные сервисы. Самый популярный из них — PageSpeed Insights от Google.

Пример работы сервиса PageSpeed Insights

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

Еще один инструмент от Google — сервис Lighthouse, встроенный в браузер Chrome. С его помощью удобно тестировать страницы, просто заходя на них и нажимая кнопку теста.

Для проверки скорости мобильной версии предназначен сервис Test My Site.

Альтернативные инструменты

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

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

Почему сайт медленный?

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

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

Как «разогнать» сайт?

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

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

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

Всего лишь односекундная задержка загрузки сайта снижает конверсию на 7%!

Источник

Как узнать скорость загрузки сайта: исчерпывающее руководство

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

О том, что скорость загрузки сайта — один из факторов ранжирования, Google сообщил ещё в 2010 году, а в 2017-м показатель page speed стал также сигналом в мобильном поиске.

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

К тому же от того, как быстро загружается страница, зависят конверсия и связанные с ней бизнес-показатели: продажи, LTV, ROI. Согласно опросу Unbounce (участвовали сотни американских покупателей и маркетологов), около 70% респондентов признались: если время загрузки дольше, чем ожидалось, они с меньшей вероятностью совершат покупку (и маловероятно, что вернутся в будущем на медленный сайт).

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

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

Измеряем время загрузки с помощью специализированных сервисов

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

Page Speed Insights и другие инструменты Google

Google Page Speed Insights — популярный SEO-инструмент, который определяет время загрузки страниц на мобильных устройствах и десктопах, даёт рекомендации по его уменьшению. Загрузка (в 3G-сетях для мобайла) имитируется с помощью технологии Lighthouse. Также в отчёте используются данные наблюдений — как тестируемая страница загружалась в Chrome у других пользователей.

Кстати, скорость загрузки сайта можно измерять по-разному. Page Speed Insights показывает шесть параметров.

Ниже результатов теста — советы по оптимизации страницы с прогнозами по увеличению скорости загрузки.

Важно!

Оценка Page Speed Insights не является фактором ранжирования в поиске Google. Не следует слепо следовать каждой рекомендации, но стоит обсудить это с веб-разработчиком.

Альтернатива — инструмент Lighthouse, встроенный в браузер Google Chrome. Чтобы запустить проверку скорости, нужно просто зайти на нужную веб-страницу, нажать комбинацию Ctrl + Shift + I, выбрать вкладку Audits и кликнуть на Run Audits.

Для тестирования скорости загрузки на мобильных также можно использовать другой инструмент Google — Test My Site. Он даёт возможность выбрать сеть, а также страну. Рейтинг выставляется по аналогии с Page Speed Insights. Также здесь есть анализ изменений показателя за последний месяц.

Pingdom Tools

Pingdom Website Speed Test — инструмент для мониторинга доступности и производительности веб-проектов от американской компании SolarWinds. Можно выбрать одну из семи локаций: Токио, Франкфурт, Лондон, Вашингтон, Сан-Франциско, Сидней, Сан-Паулу.

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

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

На pingdom.com есть также продукты для регулярного мониторинга быстродействия и работоспособности страниц. Тарифы от 42 доллара в месяц, есть пробный период — две недели.

UpTrends

Free Website Speed Test — бесплатный инструмент внутри ещё одной платформы для мониторинга сайтов, приложений, серверов.

В отличие от предыдущего сервиса, UpTrends предоставляет для теста девять локаций США, Австралии, Европы и Азии. Плюс можно указать размер экрана, тип соединения и браузер. И измерить скорость не только на ПК, но и на мобильных устройствах.

В общем и целом, UpTrends очень похож на продукт Pingdom. Те же данные по кодам ответов, типам объектов и их весу; измерение времени загрузки на каждом этапе взаимодействия; рекомендации и Google PageSpeed Score.

Здесь также можно подключить регулярный мониторинг проектов. Стоит это от 11 долларов в месяц.

WebPageTest

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

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

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

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

Есть ещё один интересный инструмент внутри WebPageTest — Visual Comparison. Он позволяет анализировать скорость загрузки сразу нескольких сайтов. Например, так можно измерить page speed своего проекта в сравнении с конкурентами. Очень удобно и показательно.

Есть и другие инструменты (например, GTMetrix, SiteSpeed, PR-CY), но они уступают вышеперечисленным по работоспособности и функциональности.

Анализируем page speed по отчётам веб-аналитики

Если сервисы оценивают сайт с точки зрения потенциального пользователя, то отчёты веб-аналитики показывают результат постфактум, как есть. Сразу можно увидеть, как скорость коррелирует с другими параметрами (отказы, конверсии и прочее), как пользователи ведут себя, реагируют на процесс загрузки. Тем более что это единственная возможность изучить показатель по разным регионам России и СНГ.

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

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

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

Метрики уже разбирали в разделе о Google Page Speed Insights, но здесь они называются иначе. Так, «Время до отрисовки» = «Время загрузки первого контента», «Время до загрузки DOM» = «Время загрузки для взаимодействия».

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

Google Analytics

Путь: «Отчёты» → «Поведение» → «Скорость загрузки сайта».

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

В разделе «Ускорение загрузки» можно посмотреть среднее время по всем URL и ознакомиться с рекомендациями Page Speed Insights по каждой странице.

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

P. S. Скорость загрузки — не самое главное

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

Джон Мюллер, ведущий аналитик Google, сказал на одной из видеоконференций, что скорость — не самый важный фактор ранжирования. Если сайт быстрый, не значит, что он будет №1. Теоретически пустая страница — самая быстрая, но вряд ли она будет хорошим результатом в выдаче.

Исследование «Ашманов и партнёры» (2018) по факторам ранжирования Google и Яндекса тоже не дало однозначных результатов относительно влияния скорости загрузки. Цитата: «Ситуация сложная и даже противоречивая. С одной стороны, чем быстрее страница загружается, тем лучше — и более низкое время загрузки в среднем для Google, вероятно, связано с тем, что он уделяет этому фактору больше внимания. С другой — чем больше размер HTML, тем больше времени уходит на его загрузку, поэтому неудивительно, что и в Яндексе, и в Google с приближением к верхней позиции время загрузки увеличивается».

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

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

Источник

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

15 минут на чтение

Открываю сайт, скорость загрузки низкая. На второй секунде начинаю испытывать нетерпение, на четвертой — злиться, на пятой — закрываю и ухожу к конкурентам. И это не только я, но и типичный интернет-пользователь в 2021 году: по данным Unbounce, почти 27% уходят после 3 секунд, еще 32,3% уйдут через 6 секунд.

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

Что такое скорость загрузки сайта

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

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

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

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

Скорость загрузки сайта и ранжирование

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

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

Вот эти три показателя:

Простой, но мощный конструктор лендингов

Создайте мобильный лендинг, интернет-магазин или мультиссылку для Instagram и продвигайте ее через чат-боты в мессенджерах, email и SMS — все это на одной платформе!

Скорость загрузки и конверсия

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

Google и Deloitte провели исследование, в котором увеличили скорость загрузки мобильных сайтов в разных сферах на 0,1 секунды. На скриншоте ниже показано, как изменилась при этом конверсия на разных стадиях воронки продаж в сфере розничной торговли. Количество оплаченных заказов при этом суммарно увеличилось на 5,2%.

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

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

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

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

Lighthouse

Инструмент от Chrome, который проверяет скорость загрузки сайта на базе показателей Core Web Vitals. Lighthouse запускается из панели разработчика во всех браузерах на базе движка Chromium — Chrome, Opera, Edge и «Яндекс.Браузер». Вам нужно открыть страницу для проверки, открыть панель инструментов разработчика и перейти на вкладку Lighthouse, она может быть либо отдельным пунктом, либо на вкладке Audits.

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

Google PageSpeed Insights

Бесплатный инструмент от Google на базе того же Lighthouse. Отличие лишь в формате — PageSpeed Insights запускается на отдельной странице, а не через панель инструментов разработчика. Проверяет параметры из Core Web Vitals и дает рекомендации по исправлению. Результат можно посмотреть отдельно для десктопной и мобильной версии страницы.

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

Pingdom Tools

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

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

GTmetrix.com

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

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

Uptrends.com

Приятный интерфейс, анализ скорости ведется с помощью Lighthouse. Российских и украинских серверов для проверки нет, есть Азия, Европа, Америка и Австралия.

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

Web Page Test

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

Dotcom-Monitor

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

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

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

Зависимость скорости сайта от хостинга

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

Как узнать время ответа сервера. Показатель может называться либо TTFB (time to first bite), либо «время ответа сервера», либо «ожидание сервера».

Какое время ответа считать хорошим? Google ранее заявлял, что время ответа сервера не должно превышать 0,2 секунды — такая рекомендация появлялась в результатах проверки PageSpeed Insights. В новой версии инструмента этой нормы нет.

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

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

Скорость загрузки динамических и статических сайтов

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

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

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

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

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

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

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

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

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

Влияние картинок на скорость загрузки сайта

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

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

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

Гиф-анимацию лучше перевести в формат WebM. Этот формат специально разработан для HTML5, его поддерживают браузеры Chrome, Mozilla, Opera, Edge и «Яндекс.Браузер».

Настроить отложенную загрузку, она же lazy load. Эта технология будет подгружать картинки и видео постепенно, когда будет их очередь появиться на экране. Сайт просто будет грузиться сверху вниз.

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

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

Влияние стилей на скорость загрузки сайта

Как и JavaScript скрипты, CSS стили могут временно блокировать обработку и отрисовку страницы, замедляя общий процесс загрузки. Чтобы этого избежать, нужно выделить «критическую» часть CSS — стили, которые необходимы для корректного отображения той части сайта, которую пользователь увидит первой. Далее нужно правильно подключить все стили к документу.

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

Все стили, которые отвечают за отрисовку стартового экрана, входят в критический CSS

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

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

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

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

Скрипты и скорость загрузки сайта

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

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

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

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

Сторонние скрипты и скорость сайта

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

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

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

Добиться эффекта независимой загрузки можно с помощью атрибутов async и defer:

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

Оптимизация шрифтов для скорости сайта

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

Выбрать современный, сжатый формат шрифта — WOFF или WOFF2. Google предлагает такую схему:

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

При подключении веб-шрифтов не забывайте указывать безопасный шрифт после выбранного. Пока браузер загружает ваш шрифт, текст будет отображен безопасным, и если его не указать, текст просто не будет виден какое-то время. Безопасные шрифты — это те, которые отображаются в любом браузере, на любом устройстве и в любом почтовом клиенте: Times New Roman, Arial, Verdana и другие. Полный список и инструкция по использованию есть в статье, приведенной ниже.

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

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

Сжатие кода и скорость загрузки сайта

Все готовые файлы для сайта нужно обработать:

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

Вот какие сервисы и инструменты можно использовать:

Скорость загрузки сайта: что стоит запомнить

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

Скорость загрузки сайта зависит от нескольких факторов:

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

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

Источник