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


Оглавление (нажмите, чтобы открыть):

20 способов ускорить загрузку сайта в 2020 году

Почему это важно

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

Снижение скорости загрузки страницы на 1 секунду влечет за собой:

  • уменьшение числа просмотров на 11%;
  • снижение показателя удовлетворенности пользователя на 16%;
  • уменьшение конверсии до 6%.

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

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

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

  • 47% пользователей ожидают, что страница откроется меньше чем за 2 секунды;
  • 40% пользователей закрывают сайт, если он загружается дольше 3 секунд;
  • 79% покупателей, которые остались недовольными удобством сайта, скорее всего, не будут покупать через него в дальнейшем;
  • 44% интернет-покупателей расскажут своим знакомым о сайтах, которые их не удовлетворили.

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

Терпение пользователей мобильного интернета

Увеличение скорости загрузки сайта как способ увеличить конверсию

Время загрузки сайта влияет на конверсию. Рассмотрим на примере сети Walmart.

Зависимость показателя конверсии от времени загрузки страницы

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

По итогам Walmart выявило, что уменьшение времени загрузки страницы на секунду способствует повышению конверсии до 2%.

Влияние оптимизации загрузки сайта на органический трафик

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

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

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

Обобщая вышесказанное делаем вывод, что ускорение сайта приводит к:

  1. росту конверсии;
  2. снижению показателя отказов (процентное соотношение количества посетителей, покинувших сайт прямо со страницы входа или просмотревших не более одной страницы сайта);
  3. подъему в поисковых системах.

20 способов как ускорить загрузку сайта

1. Сократить число HTTP запросов

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

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

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

Рассмотрим процесс на примере браузера Google Chrome.

Первым шагом мы заходим на анализируемую страницу, правой кнопкой кликаем по любой пустой области страницы и выбираем в контекстном меню пункт “Просмотреть код”. В нижней части экрана откроется панель Chrome DevTools. Переходим во вкладку Network и перезагружаем страницу. Мы видим список всех запросов, статусы их ответов и время загрузки файлов.

2. Объединить и минифицировать CSS и JS-файлы

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

Самый простой способ сократить количество запросов — объединить и минифицировать (сжать) HTML, CSS и JavaScript файлы. Правильнее всего поставить эту задачу разработчикам. Если нет такой возможности, можно попробовать сделать это самостоятельно.

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

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

3. Реализовать асинхронную загрузку CSS и JS

Все мы привыкли загружать CSS файл в HTML посредством вставки тега

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

Реализовать асинхронную загрузкуу CSS и JS часто под силу только профессиональным разработчикам. Отметим лишь то, что смотреть нужно либо в сторону использования значения preload атрибута rel в совокупности с атрибутом onload, либо подгружать стили js-скриптом.

4. Настроить отложенную загрузку javascript-кода

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

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

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

Ускорение загрузки сайта: от браузера до сервера

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

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

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

  1. Где находится сервер (или сервера) с которых загружается контент? Здесь подразумеваем географическое расстояние между сервером и клиентом.
  2. Какой контент передает сайт? HTML-код, изображения, CSS, JavaScript и прочее. Это так называемый Front-end сайта.
  3. Как идет передача контента страницы? Существует ряд распространенных методов ускорения передачи контента в сети Интернет, их мы также непременно рассмотрим.
  4. Каким способом этот контент генерируется? Время статичных сайтов, работающих на одних лишь HTML и CSS практически ушло. На современном сайте используется гораздо больше технологий — это, по крайней мере, базы данных и серверные языки программирования, такие как PHP и ASP. Эту область сайта называют Back-end’ом.

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

Удаленность сервера от клиента

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

Географическая удаленность

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

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

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

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

К счастью, описанные выше «детские» проблемы Интернета сейчас стоят не так остро, как раньше. Если DNS-сервера работают нормально, процесс обращения и подключения к серверам редко занимает более 1-2% времени полной загрузки страницы.

Контент страницы

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

Изображения

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

  • Изображение имеет очень большой размер (в пикселях). На странице оно масштабируется при помощи CSS-стилей, но файл все равно загружается браузером полностью.
  • Нерационально используется формат изображения. Например, объем изображения в формате PNG-24 в несколько раз больше, чем в JPEG.
  • Разрешение изображения значительно больше, чем требуется. Большинство современных мониторов одинаково отображают изображения разрешением выше 96 dpi (120 dpi на передовых моделях). На сайты же порой попадают файлы разрешения 300 dpi — макеты для печати и более, например, необработанные фото с цифрой камеры.

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

Узнать объем уже размещенных изображений не сложно. Если их количество невелико, и вы знаете где они расположены, достаточно подключиться к серверу по FTP и посмотреть статистику файлов. Если же изображений много, и все они находятся в разных папках, используйте программное обеспечение. При помощи бесплатной Xenu Link Sleuth можно просканировать сайт и собрать статистику с адресами, форматами и объемом изображений. Отобрать «тяжелые» изображения легко при помощи отчета Xenu, а скачать «оптом» можно, к примеру, утилитой wget.

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

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

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

Стили и программный код

В коде страниц, конечно, встречаются не только изображения, загрузка других файлов идет по тем же правилам. Для файлов CSS-стилей и скриптов (например, JavaScript) проблема та же — объем файлов и их количество.

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

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

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

На помощь приходит технология по оптимизации размера и количества файлов JavaScript и CSS, получившая обобщенное название “Minify” (минификация). По этому названию вы сможете найти множество онлайн-сервисов, способных автоматически сжимать и объединять js- и css-файлы для обеспечения наилучшей производительности.

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

Оптимизация передачи контента

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

Компрессия текстовых данных

Широко распространенный метод, регламентированный в стандарте HTTP1.1, и поддерживаемый фактически всеми серверами и клиентами. Как правило, используется алгоритм сжатия Gzip, являющийся стандартными для всех Unix-систем.

Браузер обращается к серверу со списком поддерживаемых технологий сжатия (запросом Accept-Encoding), сервер возвращает заголовок Content-Encoding: gzip, что означает что контент страницы будет передан в сжатом gzip архиве. Сам метод сжатия близок с стандартным Zip-архивам.

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

Gzip-сжатие широко распространено и по умолчанию работает на большинстве сайтов. Проверить, отдает ли ваш сайт контент в сжатом таким образом виде можно практически любым из инструментов, проверяющих ответ сервера, например, «Проверка ответа сервера» в Яндекс.Вебмастере. Если сжатие включено, в отчете вы увидите вышеупомянутый Content-Encoding: gzip.

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

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/css


AddOutputFilterByType DEFLATE application/javascript

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

Браузерное кэширование

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

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

Expires – содержит дату и время (по Гринвичу), до достижения которой контент можно считать контент актуальным. Например, Expires: Fri, 13 Oct 2020 13:59:58 GMT означает что браузер может использовать кэш страницы, не запрашивая ее у сервера, до пятницы 13-го октября 2020 года.

Cache-Control – позволяет задавать время актуальности кэша в секундах, относительно времени запроса, а также ограничивать кэширование, например, на публичных proxy-серверах или непосредственно в браузерах. Также кэширование можно и вовсе запретить.

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

Last-Modified – хранит время последнего изменения страницы. Клиент сохранит дату и при следующем посещении добавит запрос If-Modified-Since, содержащий сохраненное значение. Если страница с этого времени не изменилась, сервер возвращает ответ 304 Not Modified, то есть страница не изменилась, и ее еще можно загружать из кэша.

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

Проверки актуальности кэша можно упрощенно описать так:

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

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

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

  1. Генерировать на стадии создания страницы при помощи php или другого серверного языка программирования.
  2. Настроить отдачу сервером при помощи файла .htaccess.
  3. Скорректировать данные непосредственно на сервере.

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

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

HTML-кэш на жестком диске

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

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

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

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

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

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

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

Рассмотрим природу и отличия свойств на примерах. Допустим, у нас есть два файла JavaScript, «1.js» и «2.js». Добавим для них атрибут async:

[script async src=»https://m.seonews.ru/analytics/uskorenie-zagruzki-sayta-ot-brauzera-do-servera/1.js»][/script]

[script async src=»https://m.seonews.ru/analytics/uskorenie-zagruzki-sayta-ot-brauzera-do-servera/2.js»][/script]

Этим мы скажем браузеру, что файлы могут быть загружены параллельно с остальным контентом страницы и в произвольном порядке. То есть, второй файл может быть обработан раньше первого. Такая конструкция не подойдет если «2.js» использует результаты работы «1.js». Именно в этом случае вместо async используется атрибут defer – он указывает браузеру, что файлы могут быть обработаны параллельно остальному контенту страницы, но должны быть загружены в той последовательности, в которой размещены в исходном коде.

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

Параллельная загрузка статичных файлов и CDN-технология

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

Наиболее прямолинейный способ улучшить ситуацию – перенести часть контента на другой домен. В теории современные браузеры способны параллельно обрабатывать до 5-6 файлов с хоста. То есть, в качестве экстремального решения можно расположить каждые 5 файлов на отдельном домене. На практике, конечно, так поступают редко. Чаще всего, как самые «тяжеловесные» составляющие, переносят изображения и видео – к примеру, создают поддомен (для site.ru он может иметь название img.site.ru или любое другое), с него и происходит загрузка файлов.

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

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

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

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

HTTP/2

HTTP/2 – новый протокол передачи данных, представленный общественности в 2014, и утвержденный 2015 году. По сравнению с HTTP1.1 для нас он имеет одно заметное преимущество – он не создает отдельно соединение для загрузки каждого файла, а загружает все их параллельно, одним потоком. Благодаря этому, нет необходимости в создании CSS-спрайтов, минификации JavaScript и переносе изображений на другие домены.

Кроме того, обмен заголовками здесь происходит в сжатом виде, а сервер, поддерживающий HTTP/2, может отправлять данные, которые еще не были запрошены клиентом, например, изображения из тела страницы еще до того, как полностью обработаны CSS-стили и JavaScript из раздела head. Вместе эти методы способны значительно ускорить загрузку Front-end составляющей страницы.

Проверить, поддерживает ли сайт HTTP/2 можно при помощи сервиса от KeyCDN. Если же вы хотите проверить поддержку протокола вашим браузером и наглядно оценить ускорение загрузки контентом, воспользуйтесь demo от Akami.

Но у HTTP/2 есть также и недостатки:

  • На данный момент поддержка осуществляется только поверх TLS. Это означает, что вы не сможете использовать преимущества протокола, если на сайте не установлен SSL-сертификат, и страницы не загружаются через HTTPS.
  • Внедрение подразумевает серьезные изменения на сервере. К сожалению, не все конфигурации поддерживают необходимые технологии, может понадобится обновление ОС и другого программного обеспечения сервера. Соответственно, на виртуальном хостинге подобные изменения сделать вряд ли удастся.
Мастер Йода рекомендует:  6 пунктов, которые помогут легко разобраться с regexp

На начало 2020 года около 12% сайтов по всему миру поддерживают HTTP/2 и, учитывая все преимущества, в ближайшие годы можно ожидать значительный рост этого показателя.

Как генерируется контент

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

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

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

Рассмотрим три важных момента, которые помогут увеличить скорость сервера.

Установленный сервер и его настройки

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

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

В наиболее распространенной сейчас архитектуре, Nginx + Apache, первый используется для сортировки запросов и передачи, второй — только тех из них, которые не способны обработать воркеры Nginx.

Если в конфигурации сервера все же нет Nginx, его следует непременно подключить.

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

Режим работы PHP

CGI – спецификация обработки прикладных программ сервером. Она определяет, как в программу передаются данные из HTTP-запроса, а также способ отдачи результата. Скрипты CGI могут быть написаны на любом языке, понятном серверу, например, распространенным PHP.

  • PHP в режиме CGI – является старым методом, установленным по умолчанию на многих серверах. Это наименее производительный режим, и, если ваш сервер работает именно так, обязательно нужно перейти к другому.
  • mod_php – модуль Apache, который позволяет ему обрабатывать PHP-код. Этот режим производительнее предыдущего, но он достаточно ресурсоемкий в плане оперативной памяти и в большинстве случаев уступает описанному далее режиму PHP-FPM.
  • PHP в режиме FastCGI (PHP-FPM) – более продвинутая архитектура, рассчитанная на высоконагруженные сайты. В этом режиме веб-сервер Apache не участвует в обработке PHP-кода и фактически полностью исчезает из процесса выполнения скриптов сайта. Мы устраняем посредника Apache между Nginx и PHP. PHP-FPM по умолчанию включен в дистрибутивы начиная с PHP 5.3.

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

PHP имеет огромное количество настроек, которые следует привести в соответствие с рекомендациями технической поддержки CMS сайта.

Базы данных

Львиную долю длинного ответа сервера, как правило, составляют именно запросы к базам данных. За редким исключением, на современных серверах используются реляционные БД SQL, а самой распространенной является система управления базами данных MySQL.

В работе базы данных можно выделить два важных параметра – скорость обработки запросов, количество и время блокировок (т.н. «локов»). Если происходит длительная блокировка, БД не может обрабатывать другие запросы, до завершения блокирующего, и может образоваться большая очередь.

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

1) Для таблицы неправильно выбрана система хранения данных (движок). Самые распространенные из них – MyISAM и InnoDB.
MyISAM хорошо обрабатывает запросы на выборку данных (SELECT) и подходит для таблиц, из которых осуществляются поиск, но не включаются новые записи. Попытка включить новые данные в такую таблицу наверняка вызовет долгую блокировку БД.
InnoDB гораздо лучше обрабатывает запросы на добавление данных, благодаря чему является стандартом для реализаций баз данных на сайтах. Тем не менее, если важен быстрый полнотекстовый поиск по таблице, стоит обратить внимание на MyISAM.

2) Отсутствие индексов. Индекс – специальная таблица, содержащая ссылки на отдельные важные элементы в таблице, для которой он создан. Индексная таблица специально упорядочена и оптимизирована, чтобы быстро проводить поиск. Условно, если представить таблицу БД как книгу, индексная таблица – ее алфавитный указатель.

3) Установлена стандартная СУБД MySQL. Если 10-15 лет назад стандартной сборки MySQL было достаточно даже для самых нагруженных сайтов, применяя стандартные решения сейчас, вы значительно теряете в производительности. Улучшить этот показатель может установка форков MariaDB или Percona Server. По сравнению с продукцией Oracle, эти решения более производительны и надежны, а Percona Server уже стал негласным стандартом для замещения стандартной MySQL.

4) Если после решения предыдущих 3-х задач, не удалось достигнуть повышения производительности, следует проверить настройки MySQL. Здесь, как и в предыдущих пунктах, я рекомендую обратиться к документации CMS. Но нужно иметь в виду, что главным образом, проблемы встречаются в следующих узких местах:

a) количество допустимых одновременных подключений (max_connections);

b) объем кэша запросов и его эффективность;

c) недостаток памяти на сервере (в процессе работы БД может занимать огромный объем физической памяти сервера);

d) большое количество временных таблиц, которые были созданы на жестком диске.

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

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

Вместо послесловия

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

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

2. Google AMP — ускоренные мобильные страницы, которые Google кэширует и отображает в некоторых собственных сервисах.

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

11 способов ускорить загрузку страницы, чтобы сохранить посетителей сайта

Креатив на вашем сайте прекрасен. Заголовок и ценностное предложение — очень мощные. Но посетители не дают конверсий. Почему?

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

Влияние скорости

Google проводил эксперимент и получил 20% снижение трафика из-за того, что страница с результатами поиска стала грузиться на 0,5 секунды дольше.


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

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

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

ТОП-100 лучших SEO-агентств России 2020

Кто лучше всех в России умеет продвигать сайты в поисковых системах – и к кому лучше обратиться за продвижением сайта своей компании?

Ответ – в свежем рейтинге SEO-компаний за 2020 год по версии RUWARD.

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

1. Почистите свой код

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

Javascript — это круто. Он позволяет вам добавить разные забавные штуки типа хвоста, тянущегося за курсором мыши по экрану (это сарказм!). Часто Javascript может быть совершенно излишним на посадочной странице. То же самое с Ajax и прочими визуальными штуковинами.

Помните про принцип KISS. Если вы сфокусируетесь на простоте, не нужно тратить силы на всякие дополнительные хитрости.

Но если вам позарез нужны ваши очень важные скрипты, то, по крайней мере, загрузите как можно скорее контент, который «выше сгиба» (above the fold), а потом уже все остальное. Это рекомендуемый Google метод.

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

2. Минимизируйте HTML и CSS

Если вы уверены в своих технических навыках, прочитайте эту статью и поступите, как там сказано.

Если вы сомневаетесь, просто откройте Google PageSpeed Insights, введите свой URL и отправьте результаты разработчику, которому вы доверяете.

3. Примените GZIP-сжатие

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

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

4. Минимизируйте редиректы

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

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

Screaming Frog поможет быстро определить все редиректы на вашем сайте. На примере ниже мы видим, что 14% страниц сайта Runnersworld.com содержат редиректы. Упс!

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

5. Перенесите скрипты

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

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

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

6. Ограничьте число плагинов WordPress (или другой CMS)

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

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

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

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

7. Купите нормальный хостинг

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

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

PCMag подготовил рейтинг хостингов с выделенными серверами.

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

8. Используйте подходящий размер картинок

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

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

9. Сжимайте картинки

Следующим шагом должно быть сжатие картинок. Про это часто забывают, а Radware сообщает, что 45% из топ-100 интернет-магазинов не используют сжатые изображения.

Но сжатие картинок может быть едва ли не самым простым действием, которое может дать быстрый результат в плане скорости загрузки. Существует множество бесплатных средств типа TinyJPG или Compressor.io, которые значительно уменьшат размеры файлов. Показанный ниже тест дал 73% сжатия. Умножьте это на все картинки на вашем сайте, и вы поймете огромный масштаб возможного ускорения.

10. Передавайте картинки через CDN

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

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

11. Внешний хостинг

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

Это может быть не так важно для картинок, а видео и аудио лучше всегда хостить на внешнем сервисе. Использование так называемого rich media растет бурными темпами. По прогнозам, 74% мирового интернет-трафика в 2020 году будет составлять видео.

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

Заключение

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

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

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

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

10 лучших способов ускорить загрузку сайта

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

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

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

1. Оптимизируйте HTML-код и CSS-, JS-файлы

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

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

  • Удалить лишние символы, элементы разметки и теги исходного кода. Автоматизировать процесс поможет добавление небольшой вставки в начало и конец HTML-кода сайта.

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

  • Сгруппировать однотипные CSS-файлы и JS-файлы. Объединить элементы помогут бесплатные PHP-приложения, вроде JCH Optimize, Cloudflare или Minify, которые копируются в отдельную директорию и пропускают через себя все файлы сайта.
  • 2. Уберите лишние HTTP-запросы

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

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

    Сделать это можно несколькими способами:

    • Комбинировать нескольких изображений в один графический файл (CSS-спрайт);
    • Использовать встроенные изображения (Inline-картинки) в таблице стилей страницы;
    • Несколько CSS-файлов или скриптов на одной странице объединить в один файл;
    • Минимизировать число скриптов и плагинов.

    3. Расположите JavaScript и CSS в нужном порядке

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

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

    4. Уменьшите число внешних скриптов

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

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

    5. Задействуйте функцию flush

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

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

    6. Кэшируйте страницы

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

    Подключить кэширование можно путём добавления в HTML-код заголовка expires. Сайты на WordPress легко кэшируются с помощью установки плагинов с бесплатным или частично бесплатным функционалом, вроде W3 Total Cache, Cache Enabler или Zen Cach.


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

    7. Пользуйтесь CDN

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

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

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

    Популярные сети доставки контента (CDN)

    8. Оптимизируйте графику и видео

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

    Рекомендуемые форматы под разный веб-контент

    • SVG – для векторных логотипов и несложных элементов интерфейса;
    • PNG – для схем и не векторных логотипов;
    • JPG – для фото и изображений;
    • MPEG4 – для видео и анимации.

    Также для видео и анимации доступен еще относительно новый формат WEBM. В большинстве случаев он обеспечивает меньший размер видео при аналогичном качестве. Однако, формат имеет ограниченную поддержку браузерами (например, нет поддержки в браузере MacOS/iOS Safari). Поэтому рекомендуется приоритетным источником видео использовать файл в формате WEBM, а альтернативным – установить MPEG4. Также можно использовать только MPEG4, если совместно использование недопустимо или неудобно.

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

    Этапы оптимизации изображений

    Шаг 1 – Уменьшение размера изображения.

    Во многих популярных CMS, таких как WordPress или Joomla есть встроенные плагины для оптимизации изображений из оригинала. Но такой способ создаёт дополнительную нагрузку и может замедлить сайт. При каждой загрузке страницы браузер сперва обращается к исходнику, а только затем меняет размеры изображения «на лету».

    Избежать потерь скорости при загрузке изображений помогут встроенные в ОС графические редакторы, вроде Preview (Mac) или Microsoft Paint (Windows), а также онлайн-сервисы с похожим функционалом. Для работы с ними потребуются минимальные навыки работы с графикой.

    Шаг 2 – Сжатие файла перед загрузкой.

    Даже после оптимизации размеров изображения, его «вес» обычно ещё далёк от оптимального. Уменьшить размер без потери качества картинки помогают такие удобные и бесплатные сервисы, как ImageResize или TinyPNG. Большинство процессов здесь автоматизировано. Пользователю нужно только залить файлы и скачать уже ужатые до оптимального размера изображения.

    9. Примените Gzip-сжатие файлов

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

    Способы внедрения Gzip-сжатия

    • Добавить следующий фрагмент кода в конфигурационный файл веб-сервера «.htaccess».
    • Добавить следующий отрывок кода в начало HTML- или PHP-страницы. Он проверяет поддерживается ли gzip-сжатие файлов браузером. Если поддерживается – использует его.
    • Инсталлировать на сайт Gzip-плагин. Например, W3 Total Cache для сайтов на WordPress.

    10. Сменить хостинг

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

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

    Вывод

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

    Ищите надёжную площадку для размещения сайта? Веб-хостинг от Eternalhost – надёжный фундамент, который обеспечит быструю и бесперебойную работу интернет-ресурса!

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

    ТОП-12 вариантов, как улучшить скорость загрузки сайта самому

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

    Какую скорость загрузки считать нормой

    Чем быстрее, тем лучше. Но в среднем, 2-3 секунды для загрузки основной части контента страницы – это вполне нормально.

    От чего зависит скорость загрузки

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

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

    • Медленный сервер: может банально не хватать оперативной памяти или ядер в процессоре, как у обычного компьютера.
    • Медленный движок сайта (CMS): если код был написан неопытными программистами без учета его быстродействия.
    • Сервер далеко от пользователя: например, сервер с файлами сайта физически находится в Москве, а на сайт заходит пользователь из Владивостока.
    • Много файлов: для отображения страницы браузеру нужно загрузить много картинок, файлов, стилей, скриптов и шрифтов.
    • Тяжелые файлы: плюс эти файлы много весят.
    Мастер Йода рекомендует:  Как сделать реферальную ссылку и эффективно замаскировать

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

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

    Из множества онлайн-сервисов для проверки скорости сайта самый популярный, пожалуй, это инструмент Google PageSpeed. Работать с ним просто – указываем адрес сайта и жмем кнопку «Анализировать».

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

    • Через какое время браузер получает ответ от сервера и начинает отрисовывать контент страницы (FCP – First Contentful Paint).
    • Через какое время пользователь видит основной контент в браузере (DCL – DOM Content Loaded).
    • Насколько сайт оптимизирован в плане скорости загрузки.
    • Конкретные рекомендации по оптимизации. Нажимая на ссылки «Как исправить», видим адреса проблемных картинок и файлов, с которыми нужно что-то сделать (в основном, сжать).

    Желательно попасть в зеленую зону – и в блоке «Скорость сайта» (Page Speed), и в блоке «Оптимизация».

    Еще один хороший сервис для проверки скорости загрузки, правда, на английском – Pingdom. Отличительная черта – вот такие красивые графики (называются waterfall – водопад) показывают какие файлы, в каком порядке и сколько времени загружаются:

    А теперь к сути:

    Как ускорить сайт

    Шаг 1. Оптимизация картинок

    Неоптимизированные картинки – самая «тяжелая» часть сайта. Поэтому работа с картинками может дать значительный прирост к скорости.

    Размер картинок (ширина и высота)

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

    Вес картинок (килобайты)

    Изображения с фотоаппарата можно (и нужно) сжимать в объеме перед выкладкой на сайт. Делают это либо в Фотошопе (или другом редакторе изображений), либо через онлайн-сервисы, например, TinyPNG или Optimizilla.

    Превью к большим картинкам

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

    Например, Спортмастер использует картинки товаров в трех вариантах:

    Картинка для списка товаров (весит 7 Кб)

    Картинка для карточки товара (весит 18 Кб)

    Картинка для просмотра товара с «лупой» (весит 942 Кб)

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

    При проверке скорости сайта через Google PageSpeed вы получите готовый список картинок, которые следует оптимизировать:

    Шаг 2. Gzip-сжатие

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

    Как включить Gzip-сжатие:

    Если у вас есть доступ к файлу htaccess, добавьте в него такие строчки (в конец файла):

    Если у вас не Apache, а Nginx (кто знает, тот поймет), то вам понадобится файл конфигурации nginx.conf. Дописываем код в секцию http <. >и перезапускаем сервер:

    Если у вас нет доступа к htaccess или конфигурации сервера, напишите в техподдержку хостинга, что вам нужно включить gzip-сжатие.

    Если сжатие работает, то в результатах проверки PageSpeed вы увидите (в блоке «Внедренные приемы оптимизации»):

    Шаг 3. Кэширование на стороне браузера

    Когда браузер загружает сайт, то он сохраняет часть информации с него (файлы стилей, скриптов, картинки) в свою собственную память (кэш, cache). Тогда на других страницах этого сайта или при повторном заходе на текущую страницу браузер не будет запрашивать эту информацию заново с сервера (что долго), а подгрузит ее из собственной памяти (что быстрее). Поэтому в настройках браузера есть кнопки «Очистить кэш», и все мы знаем сочетание клавиш CTRL+F5 (обновить страницу с очисткой кэша).

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

    Через файл htaccess (кэшируем статические файлы на 10 дней):

    Для Nginx добавляем в конфигурацию:

    * \.(jpg|jpeg|gif|png|ico|css|js|txt)$ <
    root /var/www/user/data/www/site.ru;
    expires 10d;
    >
    .
    >

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

    Аналогично списку картинок, Google PageSpeed выдает список ресурсов, для которых кэширование не настроено, а можно было бы:

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

    Шаг 4. Минимизация css- и js-файлов


    Минимизация – это сокращение объема файла за счет удаления пробелов, пустых строк, комментариев, использования более коротких имен переменных и т.п. Браузеру все равно, с каким файлом работать – обычным или минимизированным, а весит такой файл меньше.

    Пример обычного кода:

    Популярные плагины и библиотеки (jQuery, Bootstrap и пр.) всегда имеют минимизированные версии своих скриптов и стилей – подключайте на сайт именно их. Например, обычная версия скрипта jQuery весит 265 Кб, а ее сжатый вариант – 85 Кб. Чувствуете разницу?

    Единственный минус минификации – теряется читабельность файла. Если понадобится внести изменения в сжатый файл – сделать это будет сложно, человеку работать с таким файлом неудобно (там одна сплошная строка). Поэтому для минификации своих скриптов обычно используются дополнительные плагины к CMS – они автоматически сжимают css- и js-файлы перед загрузкой на сайт. А верстальщик при этом может спокойно работать с обычными версиями файлов.

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

    Шаг 5. Порядок загрузки css- и js-файлов

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

    Чтобы браузер мог загружать файлы сайта оптимальным образом, рекомендуется все файлы стилей (css) и шрифтов подключать в начале кода страницы (в теге ), а все файлы скриптов (js) – в конце страницы, перед закрывающим тегом

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

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

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

    На загрузку изображений как правило уходит много времени. Чтобы оптимизировать изображения для сайта без потери качества используйте TinyPNG. Онлайн сервис оптимизирует форматы: JPG и PNG. Для векторных изображений лучше использовать SVG формат, при этом изображения загружается, не создавая дополнительные запросы.

    Используйте оригинальный размер изображений, миниатюры делайте отдельными файлами. Не маштабируйте изображения (serve scaled images) при помощи CSS, так как это приводи к полной загрузки файла.

    Редиректы

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

    Кэширование внешних js

    Как правило у большинства на сайтах стоят коды: Яндекс.Метрика и Google Analytics, метод также подходит для Google Tag Manager, чатов типа JivoSite и так далее. Для ускорения загрузки внешние js файлы нужно как то закешировать. Так как кеширование возможно только на стороне хостинга, пишем скрипт который будет копировать файлы на хостинг в фоновом режиме используя планировщик заданий Cron.

    Создаем на хостинге в корневой директории папку с названием js и устанавливаем атрибуты 755. В корневой директории создаем файл copyexjs.php в кодировке utf-8 и пишем скрипт. Внизу скрипта указываем URL адреса внешних js файлов, затем папку куда копировать, в нашем случае это папка js, и имя файла с расширением. В адресе Google Tag Manager меняем UA-XXXXXXXX-X на персональный идентификатор.

    Попробуйте запустить этот файл с адресной строки, по адресу ваш_сайт/js/copyexjs.php. При удачном копировании файлов, осталось только автоматизировать процесс. Для этого заходим на хостинг, ищем в панели планировщик заданий Cron и создаем задачу.

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

    Оптимизируйте JS и CSS

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

    Поддомены для параллельной загрузки

    По спецификации HTTP/1.1 браузеры могут одновременно загружать 2 компонента с одного домена. Если на сайте используется много графики, разместите графические файлы на отдельный поддомен. Если домен использует HTTPS, то сертификат необходим с поддержкой поддоменов.

    Настройка кеша и Gzip

    Для хостинга на Linux используют связку Nginx и Apache. На стороне сервера включите использование заголовков: mod_expires и mod_headers. Для этого обратитесь в службу поддержки хостинга или внесите изменения на сервере самостоятельно.

    Откройте файл конфигурации /etc/nginx/nginx.conf и добавьте в блок «server» для сайта строки:

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

    В файле .htaccess добавьте строки:

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

    Плавная загрузка изображений Lazy Load

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

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

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

    1. Используйте YSlow для отслеживания времени загрузки страниц

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

    Перед тем как мы начнём, вам необходимо установить YSlow, если вы уже конечно этого не сделали. YSlow — это расширение к Mozilla Firefox, которое вы сможете найти на этой странице:

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

    В нижней правой стороне вашего браузера, у вас находится специальная панель с иконкой (смотрите рисунок 1). Чуть поодаль данной панели, после загрузки страницы, рядом с ‘YSlow’ вы увидите число. Данное число – это время загрузки данной страницы в секундах в вашем браузере. Нам необходимо, чтобы данное число было как можно меньше.

    Самыми часто встречаемыми «тормозилами» являются следующие объекты или операции:

    • Слишком много HTTP запросов
    • Не сжатые файлы JavaScript
    • Отсутствие времени истечения заголовков для графических файлов

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

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

    Используем YSlow на полную

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

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

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

    Но люди, как правило, не используют CDN (что является довольно-таки дорогим удовольствием).

    Классификация типов ошибок

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

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

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

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

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

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

    Избегайте CSS выражений: я лично никогда не использовал CSS выражения (ещё их называют динамическими свойствами). Данные выражения являются собственной концепцией программирования для IE (такие как условные выражения) в CSS. Технология, которая используется в IE8, да и во всех остальных версиях больше поддерживаться не будет, так что в любом случае придётся завязывать с данным написанием CSS выражений. PHP больше подходит для подобных целей, к примеру, для того, чтобы загрузить разные CSS стили в зависимости от какого-то условия, такого как случайное число, время суток или браузер пользователя.

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

    Сокращайте время DNS поиска: когда пользователь набирает имя вашего сайта в строке браузера, то тут же начинается DNS поиск IP адреса, по которому находится ваш сайт. Чем больше ваш сайт содержит внешних источников, тем больше будет занимать время DNS поиск. Как правило, один такой поиск длится 60-100 миллисекунд.

    Минимизируйте JS: помимо сжатия посредством gzip, минимизация JavaScript файлов позволит вам облегчить скрипты, избавившись от ненужных пробелов, табов, и других специальных знаков, которые в совокупности увеличивают размеры файлов. Это же очевидно – чем меньше файлы, тем быстрее грузятся страницы. Для минимизирования JavaScript файлов можете использовать инструмент JSMIN.

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

    Избегайте дублирования загрузки скриптов: если ваш браузер загружает скрипт более одного раза, это значительно сказывается на загрузке страницы. Математика тут не сложная. Чем больше загрузок одних и тех же файлов, тем дольше загрузка страницы. Просмотрите ваши скрипты и убедитесь, что вы не вызываете jQuery 2 или 3 раза. То же самое относится и к скриптам JS.

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

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

    И наконец, перейдём к последней вкладке Stats tab. Тут вы найдёте информацию обо всех HTTP запросах, как для обычных файлов, так и для закэшированных. Значение Empty cache показывает, что данные файлы необходимо загрузить для отображения страницы. В свою очередь Primed Cache — это файлы, которые уже были закэшированы браузером пользователя. Это означает, что их скачивать не нужно.

    2. Используйте CSS спрайты для сокращения HTTP запросов

    CSS спрайты — это наверное самая значительная вещь, которую придумало человечество, после того как Тесла изобрёл электричество… Я действительно это сказал.. ой, я имел в виду Эдисона.

    Ну, может быть не совсем самая крутая, но тем не менее.

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

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

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

    YouTube использует этот файл довольно оригинально. Загружают они его как фон классу sprite. Когда возникает необходимость в выборе какого-то элемента, происходит выбор изначальной позиции при помощи CSS свойства background-position, а затем применение высоты и ширины.

    Давайте и мы попробуем что-то подобное. Поэкспериментируем на этом же самом изображении с сайта YouTube.

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

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

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

    3. Загружайте CSS файлы в начале, JavaScript в конце

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

    Стоит также отметить:

    1. Загружайте файлы CSS в разделе прямо перед началом тега body.
    2. Подключайте JavaScript перед самым закрытием тега body.

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

    Примечание: Если вы не хотите перемещать теги JavaScript, потому что боитесь, что падёт функциональность, то я рекомендую вам использовать свойство defer. Применяйте его следующим образом:

    Ускорить сайт с множеством картинок: руководство по отложенной загрузке изображений Материал редакции

    Перевод материала сооснователя сервиса для оптимизации изображений ImageKit Рахула Нанвани.

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

    Но изображения часто много весят, и это в первую очередь влияет на размер страницы. Согласно данным сайта HTTP Archive, средний вес страницы на компьютере составляет 1511 КБ. Изображения занимают почти 650 КБ, что примерно 45% от общего числа.

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


    Основные возможности — вкратце

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

    Что такое отложенная загрузка

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

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

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

    Инструменты

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

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

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

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

    Способы реализации

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

    Отложенную загрузку изображений можно разделить на два этапа.

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

    Чтобы загрузить изображение через отложенную загрузку, нужно поместить URL-адрес изображения в атрибут «src». Допустим, указываем URL-адрес изображения в атрибуте «data-src» тега «image». Теперь, когда «src» пуст, браузер не начинает загрузку изображения.

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

    Загрузка изображений с помощью событий JavaScript

    В этом методе используем отслеживание событий прокрутки (scroll), изменения размера (resize), смены ориентации (orientationChange) в браузере.

    Когда происходит одно из этих событий, находим все изображения на странице, которые ещё не загружены. Проверяем, какие из них теперь находятся в окне просмотра. Это можно определить с помощью свойств «offset top», «scroll top» и «window height».

    Если изображение вошло в окно просмотра, берём URL из атрибута «data-src» и помещаем его в атрибут «src». Это запускает загрузку изображения. Также удаляем класс «lazy», определяющий изображения, которые будут загружаться позже. После загрузки всех изображений удаляем инструменты для отслеживания событий.

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

    Первые три изображения в примере загружаются заранее. URL-адрес присутствует непосредственно в атрибуте «src» вместо атрибута «data-src». Это необходимо для хорошего пользовательского опыта. Поскольку эти изображения находятся в верхней части страницы, их следует сделать видимыми как можно скорее. Мы не должны ждать события или выполнения JavaScript, чтобы загрузить их.

    Загрузка изображений с помощью Intersection Observer API

    Intersection Observer API — относительно новый API в браузерах. Он определяет, когда элемент входит в окно просмотра, и начинает действовать. В предыдущем методе приходилось связывать события, учитывать производительность и подсчитывать время появления элемента в окне просмотра.

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

    Ниже — пример использования Intersection Observer API для отложенной загрузки изображений.

    Как только API обнаруживает, что элемент вошёл в окно просмотра, используя свойство «isIntersecting», выбираем URL из атрибута «data-src» и перемещаем его в атрибут «src», чтобы запустить отложенную загрузку. Как только это будет сделано, удаляем класс «lazy» из изображения, а также удаляем оттуда обсервер.

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

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

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

    Отложенная загрузка фоновых изображений CSS

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

    С фоновыми изображениями CSS не всё так просто. Чтобы загрузить фоновые изображения CSS, браузер должен создать дерево DOM (объектная модель документа), а также дерево CSSOM (объектная модель CSS), чтобы решить, применяется ли стиль CSS к узлу DOM в текущем документе.

    Если правило CSS, определяющее фоновое изображение, не применяется к элементу в документе, то браузер не загружает фоновое изображение. Если применяется — загружает.

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

    Здесь следует отметить, что код JavaScript для отложенной загрузки остаётся прежним. Мы используем Intersection Observer API, возвращаясь затем к отслеживанию событий. Хитрость заключается в CSS.

    Мастер Йода рекомендует:  CSS Псевдоклассы

    Элемент с идентификатором «bg-image» имеет заданное свойство «background-image» в CSS. Однако когда класс «lazy» добавляется к этому элементу, в CSS мы переопределяем свойство «background-image» и меняем его на значение «none».

    Так как по правилам комбинация «bg-image» с «.lazy» имеет более высокое предпочтение в CSS, чем просто «bg-image», браузер применяет свойство «background-image: none» к элементу изначально.

    Когда прокручиваем страницу вниз, the Intersection Observer (или отслеживание событий) определяет, что изображение находится в окне просмотра, и удаляет класс «lazy». Это изменяет применяемый сейчас CSS и применяет свойство «background-image» к элементу, начавшему загрузку фонового изображения.

    Улучшить пользовательский опыт

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

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

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

    1. Правильный дизайн плейсхолдеров

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

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

    Плейсхолдер доминирующего цвета

    Этот метод давно используется для результатов поиска изображений в Google и Pinterest.

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

    Размер изображения-плейсхолдера составляет всего 661 байт, по сравнению с исходным изображением, которое имеет размер 12 700 байт — в 19 раз меньше. И это обеспечивает более приятный опыт перехода от плейсхолдера к изображению.

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

    Плейсхолдер низкого качества (LQIP)

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

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

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

    Рабочий пример и код для использования техники LQIP — по ссылке.

    2. Добавление буферного времени

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

    Решение

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

    С помощью Intersection Observer API можно использовать параметр «`root`» вместе с параметром «rootMargin» (работает по стандартному принципу поля CSS), чтобы увеличить границы рамки.

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

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

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

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

    Если не заметили ранее, во всех примерах третье изображение (image3.jpg) всегда загружается сразу, даже если оно находится вне области просмотра. Это было сделано в соответствии с тем же принципом: выполнить загрузку немного заранее для лучшего пользовательского опыта.

    3. Как избежать смещения содержимого

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

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

    Как показано в этом материале Smashing Magazine, смещение контента и видео — довольно неприятный опыт для пользователя.

    Решение

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

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

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

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

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

    • Любое изображение, которое присутствует в окне просмотра или в начале страницы, не должно загружаться с помощью отложенной загрузки. Это касается любого изображения-заголовка, рекламных баннеров, логотипов. Пользователь должен видеть их, как только страница загрузится. Помните, что мобильные и десктопные устройства будут иметь разные размеры экрана и, следовательно, разное количество изображений, которые будут видны на экране изначально. Таким образом, необходимо учитывать тип устройства, чтобы решить, какие изображения загружать изначально, а какие нет.
    • Любое изображение, которое частично видно в окне просмотра, не должно загружаться с помощью отложенной загрузки. Это происходит по принципу, который обсуждался выше, — загружать чуть заранее. Любое изображение, находящееся, допустим, в 500 px от области просмотра, может быть загружено заранее.
    • Если страница не длинная, её можно пролистать за несколько движений. Или если за пределами окна просмотра меньше пяти изображений, то отложенную загрузку можно не использовать. Это не принесёт существенной выгоды пользователю с точки зрения производительности. Дополнительный JavaScript, который вы загружаете на страницу, чтобы включить отложенную загрузку, компенсирует выигрыш от отложенной загрузки такого небольшого количества изображений.

    Популярные JavaScript-библиотеки

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

    • yall.js (Yet Another Lazy Loader) — использует Intersection Observer API и возвращается к отложенной загрузке на основе событий. Поддерживает все основные типы элементов HTML, но не «background-image». Также работает на Internet Explorer 11 и старших версиях.
    • lazysizes — библиотека с обширной функциональностью. Поддерживает адаптивные изображения «srcset» и атрибут «sizes». Высокая эффективность даже без Intersection Observer API.
    • jQuery Lazy — простая, основанная на jQuery, библиотека отложенной загрузки.

    • WeltPixel Lazy Loading Enhanced — расширение для Magento 2 для отложенной загрузки изображений.
    • Magento Lazy Image Loader — расширение для Magento 1.x для отложенной загрузки изображений.
    • Shopify Lazy Image Plugin — расширение для Shopify для отложенной загрузки изображений. Платная.
    • WordPress A3 Lazy Load — плагин отложенной загрузки изображений для WordPress.

    Как проверить, всё ли работает

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

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

    Другой способ — запустить расширение Lighthouse от Google Chrome на странице после внесения изменений и найти предложения в разделе Offscreen images.

    Если не работает

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

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

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

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

    Ничего-то вы не понимаете. Сегодня нельзя просто так взять и сверстать страничку, как это делалось 15 лет назад — чтобы она просто тупо работала, быстро и надёжно. За это никто вам денег сегодня не заплатит. И на работу вас не возьмёт. А вот когда вы научитесь обклеивать эту несчастную страничку реактами, ангулярами, анимациями, шрифтами, параллаксами и отложенными загрузками, как ёлку мишурой, и превращать её в прогрессивное и реактивное веб-приложение, способное вызвать у пользователя вопрос «Да что там, опять майнер, что ли?» — вот тогда вы профессионал, тогда у вас есть з/п и вам есть что написать в резюме.

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

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

    Верстайте попроще, чтобы ваш продукт работал быстро, и на бОльшем числе дивайсов.

    Добавлю. Недавно в работу попал интернет-магазин дилерский русского света, их домен rs24.ru
    Посмотрите, как формируется контент страниц. Прилетает json, и на его основе рисуется страница категории, товара.

    Вопрос был — как у вас контент забирать? Ответ — через api. Вот только один запрос — один товар. По дефолту ограничение 30000 запросов в сутки.
    Конечно, могут поднять, но это полный маразм, по одной штучке дергать. А еще мне рассказали про другого дилера, который на основе запросов к их api формирует карточки товаров. Страница грузится полторы секунды, но это ж не беда 🙂 Слова их сотрудника.

    Будьте проще и заходите через парадный вход. У нас есть json, который прилетает на страницу, зачем нам их куцый api?

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

    10 способов ускорить Google Chrome

    Когда браузер Google Chrome впервые был представлен публике, это была легкая и шустрая программа, которая всех поразила скоростью работы и низкими системными требованиями. С тех пор прошло несколько лет, а Chrome незаметно дорос уже до 14-ой версии. Постепенно он обзаводился все новыми функциями, поддержкой всех новейших веб-технологий и превратился в настоящего монстра, установочные файлы которого весят более 80 Mб. Разумеется, за подобную универсальность необходимо платить, и Chrome стал уже не так быстр, как в молодости. Впрочем, «лишний жирок» можно легко убрать и ускорить работу вашего браузера с помощью нескольких простых способов.

    1. Следите за стартовой страницей

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

    2. Используйте минимум расширений.

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

    3. Используйте тему по умолчанию.

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

    4. Включите экспериментальные функции.

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

    • Переопределение списка программного рендеринга — позволяет использовать графическое ускорение даже на старых видеокартах;
    • Обработка всех страниц с помощью графического процессора — включает ускорение с помощью графического процессора на всех страницах, а не только на тех, что содержат соответствующие слои;
    • GPU Accelerated Canvas 2D — ускорение 2D графики с помощью графического процессора;
    • Предварительно обрабатывать из омнибокса — фоновая загрузка страниц при вводе адреса или поискового запроса.

    5. Оптимизируйте настройки

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

    6. Отключите подключаемые модули.

    Современные веб сервисы могут использовать в своей работе самые разные технологии, такие как Java, Flash, Silverlight. Поддержка этих стандартов реализована в браузере в виде подключаемых плагинов. Далеко не факт, что все они будут использоваться вами постоянно, а системные ресурсы они используют. Поэтому откройте Параметры, затем вкладку Расширенные, нажмите на кнопку Настройки содержания и найдите ссылку Отключить отдельные модули. Поэкспериментируйте с ее содержимым, оставив только то, что вам действительно нужно.

    7. Используйте запуск с параметрами.

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

    • -disable-dev-tools — отключает инструменты для разработчиков;
    • -disable-java — отключение Java, которая в настоящее время на сайтах используется редко;
    • -disable-logging — отключение ведения логов;
    • -disable-metrics-system — запретить сбор статистики использования браузера.

    8. Периодическая очистка кэша.

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

    9. Используйте сочетания горячих клавиш.

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

    10. Попробуйте предварительные сборки

    Браузер Chrome развивается просто огромными темпами, поэтому разработчики внедрили несколько каналов обновления: Stable (стабильный), Beta (бета), Developer (для разработчиков) и Canary (экспериментальный). Возможно, новые функции, которые вы найдете в предварительных версиях браузера, помогут вам еще более ускорить его работу.

    Скачать эти сборки браузера можно здесь.

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

    Внимание!

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

    Как ускорить сайт на WordPress в 17 раз. Пошаговая инструкция

    Представляю наиболее полную инструкцию с способами по ускорению работы сайта на WordPress. Благодаря описанным ниже способам я ускорил загрузку своего сайта с 24,40 секунд до 1,41 секунды. Увеличил скорость загрузки в 17,3 раза! Хороший результат. Чтобы узнать как — читайте полную статью.

    Замеры скорости работы сайта я проводил сервисом Pingdom Speed Test. Тестировал главную страницу сайта. Смотрите ниже показатели сайта «до» и «после» улучшений, и короткую и полную инструкцию по ускорению сайта.

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

    Перед оптимизацией После оптимизации
    Время загрузки 24.4 секунды 1.41 секунды
    Количество запросов 94 запроса 76 запросов
    Размер страницы 3.5 Мб 1.6 Мб

    Скриншот замера скорости ПЕРЕД оптимизацией блога:

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

    Короткое резюме по ускорению сайта на WordPress

    Основное влияние на скорость оказали такие факторы как смена хостинга с использованием SSD дисков, оптимизация изображений, включение плагина кеширования W3 Total Cache, оптимизация БД сайта, удаление старых ревизий, включение сжатия файлов на стороне сервера, включение кеша для статичных файлов на стороне браузера. Далее следует полная развернутая инструкция по ускорению сайта на WordPress.

    Полная инструкция как ускорить сайт на WordPress

    1. Качественный SSD хостинг, быстрый пинг

    Хостинг должен быть на SSD дисках. Желательно чтобы сервера хостинга располагались в вашей географической зоне, на которую ориентирован сайт. Если хостинг будет на SSD, но в США, а ваш блог ориентирован на Россию и страны СНГ, то толку от такого SSD будет мало. Так как будет идти долгий пинг для связи с сервером. Поэтому месторасположение дата центра хостинга также важно. Это важный параметр хостинга — быстрый пинг, отклик серверов. И чтобы хостер не делал оверселлинг услуг. Про тип хостинга — конечно лучше брать как VDS (виртуальный выделенный сервер) с необходимыми для вашего сайта параметрами, вместо обычного shared хостинга. Какую именно конфигурацию VDS выбрать — это зависит от нагрузки которую ваш сайт создает не сервер и от размера его суточной аудитории. Я бы советовал брать минимум 1Gb Ram, 1 ядро процессора и 10 Гб SSD. В начале у меня был VDS на обычных HDD дисках, затем я поменял его на SSD VDS хостинг.

    Хостинг «До»:

    VPS хостинг FreeHost.com.ua
    Размер диска: 30 Gb HDD
    Память: 2 Gb RAM
    Частота CPU: 2,2 Ghz
    Количество CPU: 1
    Расположение серверов: Киев, Украина
    Стоимость: 12,8 $/месяц

    Хостинг «После»:

    VDS хостинг от ihor.ru
    Размер диска: 20 Gb HDD
    Память: 1 Gb RAM
    Частота CPU: 2,4 Ghz
    Количество CPU: 1
    Расположение серверов: Москва, Россия
    Стоимость: 250 руб/месяц (примерно 5$/месяц)

    По скриншотам теста скорости загрузки сайта, видно что на старом хостинге время ответа сайта достигало 12,3 секунды. Что непомерно много. На новом хостинге от ihor.ru время ответа сайта составляло 1,2 секунды, что в разы быстрее, по сравнению со старым хостингом. На этот показатель повлияли SSD диски, и более лучший дата центр с лучшим и более быстрым каналом.

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

    2. Оптимизировать изображения

    Проверьте используете ли вы оптимизированные jpg файлы изображений. Которые занимают небольшой размер и при этом обладают хорошим качеством. В Photoshop сохранять такие изображения можно командой Save for Web (Ctrl + Shift + Alt + S), или через функцию export assets если вы используете Photoshop CC. Не стоит сохранят большие непрозрачные картинки в .png формате, он занимает слишком много места, и для этого лучше использовать jpeg формат. Формат png подходит для небольшой графики которая используется в оформлении сайта, в шаблоне, это могут быть изображения кнопок, буллеты, изображения с прозрачным фоном.

    Некоторые миниатюры к записям у меня были сохранены в .png формате, и размер изображения достигал 300 Кб. Пересохранив изображения в jpg формат, каждая миниатюра стала занимать 60-90 Кб в среднем. Таким образом вес некоторых изображений уменьшился в 3-4 раза, без потери качества.

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

    3. Настройка wp-config.php для ускорения работы сайта на wordpress

    Небольшой способ снизить загрузку на хостинг — отредактировать файл wp-config.php, который находится в коревой директории вашего сайта.

    Находим в файле wp-config.php строку:

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

    4. Настройка Robots.txt — запрет на индексацию ненужным сайтам.

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

    Например, помимо роботов от Yandex и Google на сайт также заходит поисковый робот от поисковика Yahoo. Таким кодом можно запретить Yahoo роботу просматривать сайт:

    Я прописал следующие запрещающие директивы:

    Вот пример моего файла robots.txt

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

    5. Настройка файла .htaccess для снижения нагрузки на сервер.

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

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

    Следующим кодом можно запретить загружать изображения нашего сайта на сторонних сайтах:

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

    Настройка №2. В файле .htaccess можно и следует указать кэширование для некоторых объектов сайта (изображений, css и js фалов) чтобы браузер кешировал их на своей стороне и не загружал их каждый раз. Для этого в .htaccess ниже первого кода добавляем следующий код:

    Настройка №3. Включим gzip сжатие страниц перед отправкой их пользователю. Вставим в .htaccess следующий код:

    Настройка №4. Ограничение спама в комментариях. Большинство спам комментариев отправляются автоматически. Этим кодом мы запретим напрямую отсылать комментарии минуя форму комментирования. Теперь спам боты не смогу отправлять комментарии.

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

    ВНИМАНИЕ. Не забудьте в примерах выше заменить адрес yourdomain.ru на адрес своего сайта.

    6. Оптимизация базы данных

    Важное значение в скорости работы сайта имеет База Данных. При сохранении постов по нескольку раз WordPress создает ревизии записи — состояния постов в разные моменты их редактирования. В результате со временем база данных содержит большое количество ненужных ревизий постов, и их необходимо очищать и оптимизировать. Сделать это можно с помощью плагина Optimize DB. Установить его можно из админки WordPress. Например запустив его на своем сайте я удалили более 1200 ревизий постов. Что значительно улучшило скорость работы БД.

    7. Оптимизация кода шаблона (темы)

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

    Настройка №1. Найти код, который отвечает за стили в файле header.php:

    Внимание. Не забудьте изменить yoursite.ru на ссылку своего сайта.

    Настройка №2. Изменить код пинбеков:

    Заменить с исправлением yoursite.ru на свою ссылку:

    Настройка №3. Изменение кода RSS ленты:

    Заменить с исправлением yoursite.ru на свою ссылку:

    Настройка №4. Довольно часто в подвале сайта (footer.php), разработчики тем оставляют совершенно ненужные запросы к Базе данных. Например:

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

    Некоторые маленькие советы, которые позволят ускорить загрузку сайта:

    1) Если ваш сайт не использует комментарии, не стоит их скрывать с помощью плагинов, это создает совершенно ненужную нагрузку. Так как вам комментарии совершенно не нужны, просто удалите следующий код из файла темы (single.php):

    2) Старайтесь не использовать внешние скрипты, такие как, комментарии от Вконтакте, различные виджеты социальных сетей. Да, это выглядит красиво и эффектно, но создает приличную нагрузку на сайт. Из примеров могу сказать что мой сайт значительно грузил код веб-визора от ЯндексМетрики, виджет Add.This. Кнопки соц сетей я поменял на отельный JS плагин.

    3) Почистите весь код вашего сайта от комментариев, данные комментарии вставляются с помощью тегов и /*код/. Оставьте только нужное, так как сайту приходится тратить лишние силы на их загрузку…

    4) Старайтесь размещать все скрипты в конце страницы перед закрвающим тегом

    Добавить комментарий