Скорость загрузки Обсуждение проекта


Содержание

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

Дата публикации: 2020-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

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

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

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

Далее рассмотрим что делать и принцип действия.

Как ускорить загрузку сайта быстро и просто?

На большинстве сайтов используется код JavasScript. По умолчанию робот использует последовательную загрузку скриптов.

На практике наиболее распространенные сценарии применения скриптов следующие:

  • Подключение систем аналитики, таких как Google Analytics и/или Yandex Метрика;
  • Использование скриптов JavaScript при решении задач по user interface или user experience.

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

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

Критическим путем рендеринга (Critical Rendering Path) называется последовательность шагов, необходимых для первого отображения страницы.

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

  • Код JavaScript должен быть вынесен во внешний файл;
  • К тегу script должен быть добавлен атрибут defer.

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

До вывода страницы на экран проходит 6 этапов критического пути рендеринга:

  1. Построение DOM-дерева;
  2. Построение CSSOM-дерева;
  3. Запуск JavaScript;
  4. Создание Render-дерева;
  5. Генерация расположения;
  6. Визуализация.

Под термином DOM (Document Object Model) подразумевается объектная модель страницы.

Структура DOM выстраивается из узлов, так называемых нодов (от nodes).

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

Под термином CSSOM (CSS Object Model) подразумевается объектная модель стилей страницы сайта.

Не имеет значения то, как стили были заданы: объявлены явно или наследуются.

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

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

Render-дерево представляет собой объединение из DOM и CSSOM, и включает только видимые элементы. Например, исключаются элементы, которые были скрыты с использованием display none.

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

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

Модели DOM и CSSOM связаны с JavaScript.

JavaScript является блокирующим ресурсом для роботов, то есть JavaScript блокирует разбор HTML-документа.


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

Но блокировки робота можно избежать!

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

Есть 2 важных директивы:

  • async;
  • defer.

При не использовании директив код выглядит так:

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

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

Первое, и основное, с чего действительно нужно начать ускорение сайта — это проверка его скорости и диаграмма его загрузки (например, для главной страницы). И первое, и второе можно получить при помощи расширений браузера для веб-разработчика, либо через сервисы Айри.рф илиWebPageTest. Вы вводите адрес вашего сайта — и через пару минут у вас красивая картинка наподобие этой — диаграмма загрузки сайта.

На диаграмме загрузки показаны характеристики загрузки всех объектов страницы сайта с указанием промежутков времени, за которые выполнялись определенные этапы этой загрузки — например, установление IP-адреса (DNS Lookup) или соединение с сервером.

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

5 главных вопросов по скорости сайта

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

  1. Время загрузки первого объекта — HTML-документа
  2. Время начала отображения страницы
  3. Количество объектов и данных, которые загружаются между началом и окончанием отображения страницы
  4. Время полного отображения страницы
  5. Загрузка объектов после отображения страницы

Время загрузки HTML-документа

Проблемы с загрузкой самой страницы являются самыми критичными для удовлетворения пользовательским ожиданиям. Именно поэтому очень часто под ускорением сайта понимают ускорение сервера — чтобы он быстро отвечал. На установление IP-адреса сервера сайта уходит 50-300 мс, еще 20-100 мс обычно уходит на установление соединения с сервером. Даже если сервер идеально настроек, все равно пользователь не будет ждать слишком долго, и остается, максимум, 500 мс на то, чтобы отдать содержимое страницы. Из них еще 50-100 уйдут на получение данных по сети (да, скорость сигнала по проводам конечна, и быстрее скорости света передавать еще не научились).

Остается все ничего: 200-350 мс ожидания ответа от сервера (генерация страницы на стороне сервера). И если мы предполагаем худшее, то время ответа сервера никогда не должно превышать 200 мс для большинства запросов. Первое, на что нужно обратить внимание при анализе скорости сайта — как быстро пользователи получат HTML-страницу, сколько времени у них занимает этот процесс. Если больше 800 мс, то нужно исправлять ситуацию в этом месте — на стороне производительности или месторасположения сервера.

Время начала отображения страницы

Первое влияет на второе. Но сразу после оптимизации времени ответа сервера и максимального сокращения задержек на получение текста страницы, вопрос с ожиданием первоначального отображения страницы (стадия «белого экрана» в браузере) нужно решать. Хорошо, если возможно сократить эту стадию до 1-1,5 секунд (т.е. почти сразу после получение текста страницы ее можно отобразить в браузере со всеми стилями).

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

Количество данных до полной загрузки

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

Здесь можно начать с оптимизации изображений (используя любые пакетные или облачные решения) без потери качества, объединение небольших изображений в одну карту (спрайты), объединение и минимизация скриптов сайта (JavaScript-библиотек). Именно на этом этапе лучше всего работает CDN для сайта: объектов много, данных много, и сайт уже начал отображаться. Можно пожертвовать 50-100 мс на определение ближайшего адреса сервера, с которого загружаются статические файлы (например, изображения), но после этого очень быстро, экономя секунды на запросе и получении файлов, с него все загрузить.

Время полной загрузки

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

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

Жизнь после загрузки

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

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

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

Чтобы с головой окунуться в мир скорости, нам нужно понять некоторые технические детали. Предположим, что 1 изображение у вас на странице занимает 200 Кб (это кажется совсем чуть-чуть, ведь у нас на компьютере и на сервере десятки и сотни гигабайт свободного места). Но у обычного пользователя (со скоростью 20 Мбит/с) оно загрузится за 100 мс (0,1 секунды). Тоже вроде немного. Однако, у мобильного пользователя (на скорости 2 Мбит/с) — уже за 1 секунду. Если у вас на странице 10 таких изображений, то мобильному пользователю они «будут стоить» 10 секунд ожидания.

Но это ерунда, скажите вы. Возможно, у вас на страницах сайта нет такого большого объема изображений. Или у вас нет мобильных пользователей. Хорошо. Но кроме скорости передачи информации (которая ограничена скоростью света) есть еще и проблема расстояния для передачи информации. Независимо от скорости передачи информации, для того чтобы получить 1 объект, уходит 2 «времени расстояния» (технические специалисты называют это ping, пинг). Браузер должен сообщить на сервер, какой файл ему нужен, а сервер должен этот файл выдать. Процесс запроса файла как раз и требует 2 «времени расстояния».


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

Проблема размера

Средний размер страницы сайта — 2-3 Мб. Это означает, что даже при идеальном решении «проблемы расстояния» данные все равно будут «доходить» до пользователей, в лучшем случае, 2-3 секунды. И ваш сайт едва-едва уложится в нормативные 4 секунды ожидания. Про мобильных пользователей в таком случае можно забыть.

Самое правильное решение данной проблемы — оптимизация размера. Для текстовых файлов отлично подходит сжатие (достаточно просто проверить, что оно включено у вас на хостинге), для уменьшения размера графики подход сложнее, но ряд пакетных решений — например, Image Catalyst — позволит при загрузке обновлений на сайт (как дизайна, так и контента) не думать про экономию лишних байтов: оптимизация будет произведена лучшим способом. Если на страницах сайта выводится большое количество изображений (100 и более), то необходимо использовать плагины отложенной загрузки изображений (LazyLoad или unveil).

Также стоит отметить проблемы с размером шрифтов, используемых на сайте. Учтите, что каждый отдельный шрифт обычно «весит» как 10 картинок. И удаление неиспользуемых символов из шрифта позволяет уменьшить размер в 5-10 раз.

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

Указанными двумя проблемами скорость сайта не ограничивается, но среди множества других причин медленной работы сайта стоит выделить виджеты. Или блоки кода, загружаемые со сторонних ресурсов (кнопки социальных сетей, голосования, комментирование, статистика, аналитика, рейтинги, персонализация и т.д.). Каждый такой блок добавляет DNS-запрос к своему домену и «время ожидания» к своему серверу. Также часто такие блоки добавляют задержки в браузере для отрисовки (рендеринга) части страницы, которая находится после этих блоков. И естественно, вносят задержки из-за загрузки дополнительных объемов данных, иногда 40-50% от общего размера страницы.

Из-за создаваемых задержек, каждый сторонний виджет «съедает» 2-3% конверсии сайта. И если такой виджет не приносит денег (не увеличивает конверсию сайта), то его нужно срочно удалять из кода страниц.

Организационные и технические решения

Google Page Speed Insights предлагает неплохой подход, генерируя инструкцию к применению на основании анализа сайта. Для исправления наиболее «тяжелых» проблем скорости загрузки сайта этого более чем достаточно (если вы можете просто передать разработчикам ссылку на сервис и задачу довести оценку до 90). Полная организационная последовательность действий описана ниже.

Грамотное управление скоростью сайта предполагает, что по каждой проблеме скорости у вас есть решение, оптимизирующее издержки на его внедрение и получаемый эффект. Для проблемы расстояния хорошим решением может стать перенос серверов максимально близко к пользователю (для российской аудитории — в Россию, для европейской — в Европу) и (или) использование CDN — сети кэширующих серверов — для выдачи статических файлов. Также грамотно будет использовать любое кэширующее и проксирующее решение, сокращающее сетевое расстояние. Например,Айри.рф.

Здесь нужно понимать, что сетевое расстояние от Москвы до Владивостока составляет 110-130 мс, а от Москвы до США или Канады — 120-150 мс. Поэтому создать быстрый сайт на мировую аудиторию — это очень сложная техническая задача. И она может выходить за рамки вашего бюджета. Но сделать быстрым сайт для одной отдельно взятой страны более чем реально.

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

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

Последовательный подход к ускорению сайта способен творить чудеса. Но важно понимать реальные проблемы пользователей, и решать именно их. Для отслеживания ситуации со временем загрузки сайта у реальных пользователей подойдет любой счетчик или сервис, который собирает данную информацию (Google Analytics, Яндекс.Метрика, Openstat, Pingdom или Айри.рф).

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

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

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

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

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

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

Пользуйтесь CSS-спрайтами

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

Существует огромное количество инструментов, с помощью которых можно сделать спрайты:

  • CSS Sprites
  • Sprite Cow
  • Glue
  • Fireworks CS6
  • Lemonade
  • Compass
  • SpriteMe

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

Сделайте сжатие ресурсов вашего сайта.

Страница вашего сайта будет весить намного меньше, если использовать сжимающий алгоритм GZIP. За счет сервисов: Internet Information Services, Nginx и Apache HTTP Server, вы можете существенно сжать объем данных на страницах вашего сайта. Перед тем, как делать сжатие, советуем оптимизировать код вашего сайта. Код HTML и CSS должны быть согласованны. Ключевые значения HTML и CSS поставьте в правильном порядке, например пронумеруйте, а так же избавьтесь от лишнего пространства между строк.

Уберите лишние плагины.

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

Какие плагины стоит удалить?

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


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

Пользуйтесь кэширующими плагинами.

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

Используйте CDN.

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

Увеличить скорость загрузки сайта, за счет кэширования браузера с использованием expires заголовков.

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

  • Статические компоненты вашего сайта должны находиться под влиянием Never expire;
  • А для динамических больше подойдет Cache Control.

Пользуйтесь keep-alive response заголовками.

Запросы HTTP работают таким образом, что они сначала открывают файл кэша, после чего сразу же закрывают его. Это затрачивает некие ресурсы, поэтому рекомендуем пользоваться HTTP keep-alive response заголовками.

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

Проверяйте ваш сайт на производительность.

Заключающий шаг — это проверка производительности вашего сайта. Специальные сервисы, такие как: Page Speed Insights, YSlow, Pingdom, проверяют ваш сайт на производительность и дают оценку, а так же советы, которые помогут вам увеличить скорость загрузки веб-страниц.

Какова нормальная-оптимальная скорость загрузки сайта?

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

У меня на сайте показывает 1 секунду в среднем. Смотрю по pr-cy.ru/speed_test

  • Вопрос задан более трёх лет назад
  • 32124 просмотра

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

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

150 мс если память не изменяет примерно идет пакет из Европы в Америку. В пределах 100 мс на генерацию страницы считается нормальным во всяких Яндексах и Mail.ru. Итого 0.4 сек на запрос. Плюс после этого придется еще подгрузить CSS, картинки и JS. Делается это параллельно — итого 0.7 сек по идее ОК. Если больше, то нужно разбираться, во что упираетесь.

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

Если вдруг кто увидит этот вопрос и ответы в 2020-2020, то знай.

Твой сайт быстрый, если загружается от 0 до 3 секунд.
Вес страницы не должен превышать 1 мегабайта.
Количество HTTP запросов от 50 до 100 на страницу.

Как это всё измерить. Главное не замеряй в одном сервисе. Благо их сейчас как … много короче.
Вот тут я описал их все: https://vc.ru/services/72263-20-instrumentov-dlya-.

А вот какими я сам пользуюсь, чтобы точно понять куда копать:

Сначала нужен экспресс отчет: https://loading.express — тут будет выжимка быстро и коротко.

Потом замеряю в https://gtmetrix.com/, чтобы понять вес страницы и запросов сколько, ну и конечно скорость загрузки на неограниченной проверке.

Ну и в конце смотрю на Google PageSpeed Insights.

Что за бред. Как Вы мерите время? Только не говорите, что это время ответа сайта на localhost-е.

По факту: соединение (послание и возврат запроса) по http в среднем занимают 2 секунды. Остальное время фактически занимает обработка запроса сервером. Прорисовкой на клиенте можно пренебречь, т.к. она по времени очень мала. Время обработки запроса на сервере зависит напрямую от нагрузки на сервер (линейная зависимость).
Нужно получить среднее время выполнения скриптов (например, с помощью трассировки) умножить на ожидаемую нагрузку запросов в секунду и прибавить 2 секунды. В итоге вы получите время ответа на запрос в реальных условиях. Если оно в пределах 4 секунд, то вполне приемлемо.

Я написал, что на pr-cy.ru проверил — там 1 секунду показывает. А тут 2,8 с tools.pingdom.com/fpt/!

У хостеров спрашиваю — они говорят сайт нормально грузится — 2-3 секунды/.

Понравилась статья? Поделиться с друзьями:
Звёздный стиль - женский сайт