какая должна быть скорость загрузки страницы
Какая должна быть скорость загрузки сайта?
Дата публикации: 2016-07-21
От автора: всем привет. Как по вашему, какая должна быть скорость загрузки сайта, чтобы поисковые системы не понижали его ранг в выдаче? Давайте порассуждаем на эту тему.
Упасть можно, подняться – едва ли
Почему в самом начале статьи я использовал такой странный заголовок? Дело в том, что в нем содержится наиболее правильное утверждение относительно того, как быстрота загрузки влияет на ранжирование. Оно заключается в том, что при очень плохой скорости действительно поисковая система может ухудшить ваши позиции. С другой стороны, если ваш ресурс будет летать, он едва ли получит существенное преимущество по сравнению с ресурсами, где резвость находится на среднем уровне.
Почему так? Достаточно логичным является утверждение, что у поисковой системы есть какая-то шкала, по которой она может оценить скорость загрузки и определить, хорошая она или плохая. Соответственно, если реакция у сайта очень быстрая, то он получает преимущество над медленным проектом, но почти не получает преимущества над средним. Потому что в данном случае разница между “хорошо” и “средне” может быть ничтожной.
Скорость и процент отказов
Вот самое важное, на что может повлиять скорость, так это на процент отказов. А уж этот параметр так или иначе влияет на ранжирование. И тут опять проиграют страницы с очень медленной скоростью открытия. Все потому, что люди не любят все медленное.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Тут не нужно ничего доказывать, потому что это уже давно сделано другими. Например, один американский блоггер ускорил свой блог на 2 секунды и конверсия на страницах его сайта увеличилась в 2 раза. Можно представить себе, как до улучшения скорости сотни нетерпеливых американцев закрывали его блог раньше, чем он открывался. Соответственно, процент отказов был намного выше.
Это на самом деле очень печально, потому что в таком случае неважно, насколько крут ваш контент – многие просто не дождутся его отображения и закроют сайт. Чтобы такого не происходило, нужно придерживаться хотя бы базовых советов по оптимизации скорости. Давайте мы их рассмотрим.
Насколько быстрым должен быть ваш ресурс?
Я сразу отвечу вам на вопрос, каким должно быть время загрузки страниц. Оно должна быть хотя бы на среднем уровне. Это где-то 60-80 баллов по Google Insights. Этот сервис, хотя и является самым популярным, все же дает поверхностную картину. Если перевести в секунды, то это примерно 2-5 секунд.
Анализ скорости загрузки сайта я рекомендую проводить зарубежным сервисом. В частности, pingdom. Вот я проанализировал один сайт в нем:
Тут нас особенно должны интересовать 4 показателя. Во-первых, это load time или время загрузки страницы. Естественно, чем оно меньше, тем лучше. В нашем случае результат 2.59 секунды, что быстрее 61% проверенных сайтов. Какой можно сделать вывод? Прыть сайта находится на оптимальном уровне и в целом в улучшении не нуждается.
Ниже вы можете также видеть показатели page size (размер страницы) и requests (кол-во запросов, необходимых для формирования). На количество запросов нужно обратить особое внимание, потому что чем их больше, тем дольше загружается страничка.
Что ж, по скорости этот подопытный показал средний результат. Я бы даже сказал, что средне-высокий. Это означает, что при желании вы можете что-то еще оптимизировать, но острой нужды в этом нет, потому что и так все нормально.
Вот если бы размер страницы был более 700 килобайт, а время загрузки более 5 секунд, то это был бы уже не такой хороший показатель.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Как улучшить скоростные показатели?
Допустим, вы не программист и не верстальщик, но даже вы должны знать, как улучшать быстроту web-сайтов. Хотя бы базовые принципы. Первый и самый очевидный – обновляться. Может быть вас удивит, но свежие версии плагинов и самого движка позитивно сказываются не только на безопасности, но и на скорости, хоть это улучшение и незначительно.
Что еще вы можете делать без посторонней помощи, так это сжимать изображения. Например, через онлайн-сервис или программу вроде фотошопа, где есть функция “Сохранить для Web”. Уже это простое действие (сжатие картинок), способно уменьшить вес страницы на 100-300 килобайт, потому что основную часть веса занимают именно изображения.
Также очень сильно на скорость влияет установленный шаблон и кол-во активных плагинов. Например, вот результаты одного сайта:
Неплохо, да? Это уже высокий показатель скорости и если у вас что-то похожее, то можно вообще не заморачиваться больше. Но благодаря чему такая скорость именно у этого сайта?
У него установлен очень легкий шаблон. Для wordpress есть много шаблонов. Одни работают прекрасно, а в других подключается 23 библиотеки, 15 шрифтов и еще много чего. А еще по 40 картинок на страницу. Но в этом случае поставлена крайне простая тема с минимальным функционалом. Вторая причина, по которой у сайта отличная скорость – всего 4 установленных плагина.
Интересно, что никаких специальных работ по повышению скорости не проводилось. Получается, что при желании ее можно улучшить еще больше!
Как видите, за счет одного шаблона и ограничения установленных плагинов зачастую можно очень хорошо улучшить скорость. Хотя в случае с плагинами большее значение имеет не их количество, а реальные ресурсы, которую нужны расширению. Например, есть большие тяжелые плагины. 1 такой может забирать больше ресурсов, чем 5-10 небольших.
Что ж, пожалуй это основное, что может сделать новичок для улучшения скорости. Еще вы можете поставить на wordpress одну из систем кэширования (например, Hyper Cache или Super Cache) после чего настроить ее. В интернете достаточно инструкций по настройке таких известных плагинов.
Что делать?
Основная идея, которую я хотел донести до вас сегодня, заключается в том, что если у вас хотя бы средняя скорость загрузки (2-4 секунды), то нет нужды пытаться ее улучшить, потому что на продвижение сайта это никак не повлияет.
В то же время, если есть реальные проблемы и скорость ниже среднего, вот тут уже нужно действовать и пытаться что-то оптимизировать, потому что слишком медленные сайты не нравятся людям. А то, что не нравится им, со временем может понижаться и в поисковой выдаче, потому что реакция людей и позиция в поиске так или иначе связаны между собой.
Вспомните слова выше о том, что американский блоггер поднял заработки своего сайта в 2 раза, просто повысив скорость загрузки на 2 секунды. Так что можно много чего говорить, но вот она, реальная практическая польза от быстрой загрузки.
Так вот, у нас на блоге достаточно много полезной информации на тему оптимизации. В целом, для базовой оптимизации ее вам хватит. Ну а если что, у нас есть полноценный видеокурс на тему максимальной оптимизации сайтов, чтобы они загружались максимально быстро, и у вас никогда не было проблем со скоростью. Там, конечно, разобрано гораздо больше фишек.
Поэтому выбирайте сами, что вам нужно: базовая или продвинутая оптимизация, потом берите наши материалы и изучайте. Ну а самые простые рекомендации я дал в этой статье. Прощаюсь с вами и желаю скорости!
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Скорость загрузки сайта
Скорость загрузки страниц сайта важна как для пользователей, так и для поисковиков. Увеличив ее, можно повысить коэффициент конверсий и доверия, получить преимущества в ранжировании веб-ресурса. «Быстрые» сайты всегда обгоняют своих конкурентов.
Скорость загрузки страницы – важность вопроса и показатели нормы
Какой должна быть скорость загрузки страницы в секундах? Чем она выше, тем лучше. Усредненный стандарт составляет две-три секунды: в течение этого срока должна полностью загрузиться основная часть контента.
Проверка скорости загрузки страниц сайта должна проводиться регулярно. Так как именно от этого показателя зависит СЕО веб-ресурса. Посетители просто закрывают страницы, загружающиеся долгое время, а поисковики игнорируют их. Высокоскоростные интернет-проекты удобнее для пользователей и имеют увеличенную конверсию.
Важно! Поисковики, неважно, Яндекс это или Гугл, заботясь о качестве поисковой выдачи, с неохотой показывают медленные сайты, располагая их ниже скоростных конкурентов.
Если вам все еще кажется, что скорость загрузки веб страниц не имеет большого значения, так как в любом случае измеряется секундами, ознакомьтесь с данными исследований. Согласно многочисленным практическим испытаниям и опросам, вероятность ухода пользователей с сайта зависит от скорости загрузки страниц следующим образом:
Количество потерянных посетителей у медленных сайтов всегда велико.
Важно! Представители Amazon определили, что снижение скорости загрузки страниц на 100 мс.приводит к падению уровня продаж интернет-магазинов на 1%.
Что оказывает влияние на скорость загрузки?
За загрузку страниц сайтов отвечают:
Стороны обмениваются информацией, в ходе чего проблемы, приводящие к снижению скорости загрузки страниц, могут возникнуть как у первой, так и у второй.
Основные факторы, «тормозящие» сайты:
Выполнять анализ скорости загрузки страницы следует регулярно. Так как показатели скорости нестабильны.
Как проверить скорость загрузки страниц?
Измерить скорость загрузки страницы можно бесплатно при помощи таких сервисов, как:
Инструменты определяют один, несколько или все из следующих показателей:
Неважно, какой инструмент вы решите использовать, чтобы узнать скорость загрузки страницы сайта. Для получения достоверных и подробных данных, придерживайтесь наших рекомендаций:
Если скорость загрузки страницы недостаточно высока, увеличьте ее.
Как увеличить показатели?
Если проверка скорости загрузки страницы показала плачевные результаты, увеличить быстродействие сайта можно следующими способами:
Чтобыскорость загрузки страницы в секундахбыла достаточно высока, используйте на сайте один и тот же шрифт (по мере возможности). Выбирайте современные форматыотображения шрифтов woff2 иwoff, отказавшись от svg, eot, ttf (помимо прочего, могут отображаться браузерами некорректно).
У известных библиотек и плагинов всегда есть минимизированные варианты стилей и скриптов. Подключайте их, и вы заметите разницу: так, сжатая и обыкновенная версии jQueryскрипта весят 85 Кб и 265 Кб соответственно.
Важно! Сжатие файлов приводит к снижению их читаемости. Кроме того, изменять минимизированные файлы непросто, а работать с ними не слишком удобно. Так как они представляют собой единую сплошную строчку. По этой причине сжимать скрипты нужно при помощи плагинов, соответствующихCMS сайта.
Советы по оптимизации картинок и фото:
Узнайте текущую скорость загрузки страницы: тест можно провести в режиме онлайн совершенно бесплатно прямо сейчас. Даже несущественные на ваш взгляд задержки в отображении контента на сайте приводят к снижению процента конверсии и потере пользователей.
Какова нормальная-оптимальная скорость загрузки сайта?
У меня на сайте показывает 1 секунду в среднем. Смотрю по pr-cy.ru/speed_test
Если вдруг кто увидит этот вопрос и ответы в 2020-2021, то знай.
Твой сайт быстрый, если загружается от 0 до 3 секунд.
Вес страницы не должен превышать 1000 килобайт.
Количество HTTP-запросов от 50 до 100 на страницу.
Как это всё измерить. Главное, не замеряй в одном сервисе. Их сейчас много.
Вот тут я описал их все: https://vc.ru/services/72263-20-instrumentov-dlya-.
А вот какими я сам пользуюсь, чтобы точно понять куда копать:
Потом замеряю в https://www.webpagetest.org/, чтобы понять вес страницы и запросов сколько.
Ну и в конце смотрю на Google PageSpeed Insights.
Чаще всего на юзер экспириенс влияет не то, насколько быстро выполняются ваши скрипты (если, конечно, не присутствует откровенно неверное взаимодействие с базой данных), а тот факт, как грузится фронтэнд. Хорошо в этом вопросе разобрались ребята из Яху
В подавляющем большинстве ситуаций придерживание этих правил позволит не думать о том, что как грузится.
На среднее не смотрите. Среднее ни о чем не говорит. Смотреть нужно только на худшее время в данном случае. Ну или хотя бы на процентили.
Что за бред. Как Вы мерите время? Только не говорите, что это время ответа сайта на localhost-е.
По факту: соединение (послание и возврат запроса) по http в среднем занимают 2 секунды. Остальное время фактически занимает обработка запроса сервером. Прорисовкой на клиенте можно пренебречь, т.к. она по времени очень мала. Время обработки запроса на сервере зависит напрямую от нагрузки на сервер (линейная зависимость).
Нужно получить среднее время выполнения скриптов (например, с помощью трассировки) умножить на ожидаемую нагрузку запросов в секунду и прибавить 2 секунды. В итоге вы получите время ответа на запрос в реальных условиях. Если оно в пределах 4 секунд, то вполне приемлемо.
Как измерить скорость загрузки сайта и увеличить ее
Открываю сайт, скорость загрузки низкая. На второй секунде начинаю испытывать нетерпение, на четвертой — злиться, на пятой — закрываю и ухожу к конкурентам. И это не только я, но и типичный интернет-пользователь в 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 поможет сохранить и прогреть эти лиды до лояльных постоянных клиентов. Регистрируйтесь и пробуйте наши инструменты для рассылок и автоматизации маркетинга бесплатно!