Как ускорить загрузку сайта
Перейти к содержимому

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

  • автор:

Как ускорить загрузку сайта: ТОП-10 способов

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

10 методов, как улучшить скорость загрузки сайта в 2023 году

  1. Уменьшение количества HTTP-запросов.
  2. Минификация файлов CSS и JS.
  3. Использование кэширования.
  4. Оптимизация размера и веса изображений.
  5. Настройка Gzip-сжатия.
  6. Оптимизация серверного кода.
  7. Отложенная загрузка изображений.
  8. Сокращение количества редиректов.
  9. Уменьшение влияния стороннего кода.
  10. Использование CDN.

Так как ускорить работу сайта можно разными способами (в зависимости от причины ее замедления), для начала необходимо определить, в чем заключается проблема. Существует много бесплатных сервисов, позволяющих сделать проверку скорости и понять, почему проект долго грузится: Google PageSpeed Insight, GTMetrix, WebPageTest и др. Мы собрали рекомендации, которые помогут исправить самые распространенные недочеты и оптимизировать ресурс в общем.

№1. Уменьшение количества HTTP-запросов

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

  • встроить инлайн-картинки в таблицы стилей;
  • объединить CSS и JavaScript-файлы;
  • комбинировать несколько SVG-картинок в один файл (CSS-спрайт);
  • сбалансировать нагрузку, разместив части страницы на разных серверах.

№2. Минификация файлов CSS и JS

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

Заниматься минификацией вручную вовсе не обязательно. Для этого существуют готовые инструменты. Например, упростить CSS можно с помощью CSSmin, CSSnano или Pretty Diff. А улучшить JS помогут UglifyJS или Microsoft Ajax Minifier. Есть и универсальные сервисы, которые могут ускорить сайт посредством минификации: Google Closure Compiler, Online Javascript Compression Tool, Minify и др.

№3. Использование кэширования

Очевидно: если сохранить копии файлов на устройстве пользователя, браузер не будет вновь обращаться к серверу, чтобы их загрузить. Он просто достанет их из кэша. Функция браузерного кэширования значительно повышает скорость отображения интернет-страниц — конечно, если они статичны. Таким образом уменьшается и количество HTTP-запросов. Вы можете настроить кэширование самостоятельно через .htaccess или путем добавления в HTML-код заголовков Expires или Cache-Control. Если сайт работает на CMS, воспользуйтесь специальными кэширующими плагинами. К примеру, для WordPress подойдут W3 Total Cache, Zen Cach и пр. Время хранения кэша тоже указывается вами.

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

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

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

  • сжатие файла, т. е. уменьшение его веса, без потери качества;
  • конвертация в более легкий формат (JPEG для фото, PNG для схем и невекторных логотипов, SVG для векторных, WebP для разной веб-графики);
  • уменьшение количества пикселей по каждой из сторон.

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

№5. Настройка Gzip-сжатия

Ясно, что файлы с меньшим весом передаются и загружаются быстрее. Это касается не только графики, но и любых других данных. Утилита gzip позволяет настроить сжатие информации на стороне сервера. Суть ее работы заключается в архивировании контента перед отправкой и его распаковке после получения браузером. Таким образом она способна снизить объем страниц до 50–70% и заметно ускорить загрузку сайта. Подключить технологию можно разными методами: отредактировать .htaccess, установить gzip-плагин, включить функцию в панели cPanel (если вы ей пользуетесь). Проекты, подключенные к CloudFlare, применяют gzip-сжатие по умолчанию, поскольку это действительно положительно влияет на скорость работы.

№6. Оптимизация серверного кода

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

№7. Отложенная загрузка изображений

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

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

№8. Сокращение количества редиректов

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

№9. Уменьшение влияния стороннего кода

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

№10. Использование CDN

Content Delivery Networks (CDN) или сети доставки контента — это географически распределенные системы серверов, чьей целью является ускоренное предоставление данных пользователям. Любой сайт может подключиться к CDN и оптимизировать скорость загрузки. Это возможно благодаря тому, что CDN-серверы хранят у себя копии веб-ресурсов и их файлов, и могут отправить их вашим клиентам вместо вашего сервера. Доставка ускоряется еще и за счет более близкого к клиенту расположения узлов. Среди известных сетей — CloudFlare, Amazon CloudFront, Google Cloud CDN, Microsoft Azure CDN и др.

Заключение

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

Похожие статьи

Увеличение конверсии сайта: ТОП-10 способов

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

Самостоятельное SEO-продвижение сайта: инструкция для новичков

Поисковая оптимизация (Search Engines Optimization, SEO) — это процесс улучшения сайта таким образом, чтобы он соответствовал требованиям и критериям качества поисковых систем (ПС). Представительство ресурса в поиске играет важную роль для его продвижения, поскольку именно выдачи Яндекса и Google являются главными источниками органического трафика в рунете. В базах поисковиков хранятся сотни миллионов веб-сайтов, и чтобы попасть на первые страницы результатов ранжирования, оптимизаторы настраивают и продвигают свои проекты самостоятельно. Если этого не делать, сами алгоритмы SE (Search Engine) не поднимут сайт на верхние позиции. В статье говорим о том, как настроить SEO самому за 10 шагов.

Как адаптировать сайт под мобильные: ТОП-10 способов

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

Нажмите дважды, чтобы увеличить

Как ускорить загрузку сайта? Топ-10 способов, актуальных в 2021 году

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

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

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

Как выявить проблемы со скоростью на сайте?

Среди недавних обновлений алгоритмов Google — Core Web Vitals. По показателям LCP (Largest Contentful Paint) и FID (First Input Delay) поисковик оценивает эффективность сайта. LCP говорит о времени отрисовки страницы на экране, а FID — насколько быстро браузер реагирует на взаимодействие посетителя с элементами интерфейса.

Один из способов узнать Core Web Vitals страниц — сервис для веб-мастеров Google Search Console. Статистика находится в разделе «Основные интернет-показатели» и доступна после подтверждения прав на сайт.

Как ускорить загрузку сайта? Топ-10 способов, актуальных в 2021 году

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

Как ускорить загрузку сайта? Топ-10 способов, актуальных в 2021 году

Еще один вариант, подходящий для комплексного анализа скорости страниц, — аудит сайта с помощью платформы для SEO-специалистов. Например, в отчете сервиса SE Ranking можно увидеть Core Web Vitals любого ресурса, данные по объему HTML-кода, размерам изображений, файлам CSS и JS и другие показатели, влияющие на время отображения контента.

Как ускорить загрузку сайта? Топ-10 способов, актуальных в 2021 году

Как ускорить загрузку сайта? Топ-10 способов, актуальных в 2021 году

Как ускорить загрузку сайтов? ТОП-10 способов

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

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

1. Поводите минификацию файлов CSS и JS

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

Для минификации CSS можно использовать такие инструменты, как Pretty Diff или CSSmin. Для кода JavaScript будут полезны компрессоры UglifyJS и Microsoft Ajax Minifier. Для оптимизации разных видов файлов CSS, JS и HTML подойдет программа Google Closure Compiler.

2. Уменьшайте количество HTTP-запросов

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

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

  • объединение элементов CSS и JS в отдельные файлы;
  • балансировка нагрузки путем распределения компонентов страниц между серверами;
  • встраивание inline-картинок в таблицы файлы CSS;
  • объединение графических элементов формата SVG в один файл.

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

Еще один вариант, направленный на увеличение скорости загрузки сайта, — частичное перемещение данных на отдельный поддомен и указание пути к ним в корневом файле config.php, размещенном на хостинге.

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

4. Размещайте элементы CSS в начале страницы

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

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

5. Помещайте элементы JS в конец страницы

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

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

6. Используйте кэш браузера

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

Оптимизация загрузки страницы подразумевает настройку HTTP-заголовков кэширования. Рассмотрим две схемы, как ускорить загрузку интернет страниц:

  1. HTTP-ответ Expires, когда при первичном запросе сервер отдает значение — дату, до которой данные будут храниться в кэше.
  2. HTTP-ответ Cache-Control, когда период кэширования определен в директиве max-age.

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

7. Используйте CDN для загрузки JS-контента

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

У Google есть CDN — Google Libraries, применяемая для популярных библиотек JavaScript. Совместное использование JS-фреймворка jQuery с Google Libraries снижают нагрузку на сервер. Кроме того, при таком подходе браузер кэширует файлы со скриптами, не загружая их повторно.

8. Используйте архивирование gzip

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

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

Content-Encoding — это заголовок сжатия текстового контента. С его помощью сервер сжимает содержимое страницы и сообщает метод сжатия: Content-Encoding: gzip. Архивирование gzip настраивают в файле конфигурации. Для серверов типа Apache изменения нужно вносить в документ .htaccess, для Nginx — в nginx.conf.

9. Уменьшайте вес изображений

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

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

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

10. Уменьшайте размер изображений

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

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

Кроме размера исходной картинки можно устанавливать атрибуты width (ширина) и height (высота) на уровне HTML-страницы. В этом случае браузер получает информацию о формате изображений из тегов и воспроизводит их в указанном виде.

Важно то, что вес исходных файлов при этом подходе остается прежним, и лучшим решением будет редактирование файлов в оригинале с помощью графического редактора, как например Photoshop или простые более варианты из пакета стандартных программ операционной системы — Paint, Microsoft Pictures Office Manager и другие.

Выводы

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

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

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

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

Workspace.LIVE — мы в Телеграме

Новости в мире диджитал, ответы экспертов на злободневные темы, опросы, статьи и многое другое. Подписывайтесь: https://t.me/workspace

Вакансии

  • SMM-менеджер
    UnyBrands Удаленная работа 100 000 – 160 000
  • Специалист для настройки VDS-сервера
    WISPO Удаленная работа от 2 500
  • Administrative Support Manager
    F`ART Удаленная работа 70 000 – 150 000
  • Технический специалист по контекстной рекламе
    Склифосовский ПРО Удаленная работа 20 000 – 30 000
  • Специалист по контекстной рекламе
    Склифосовский ПРО Удаленная работа 50 000 – 90 000

Оптимизация скорости загрузки сайта: как проверить и увеличить

Оптимизация скорости загрузки сайта: как проверить и увеличить

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

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

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

  • Показатель отказов (bounce rate)
  • Глубина просмотра страниц
  • Длительность сессии

И несколько других. Подробнее об этом читайте в статье Поведенческие факторы на сайте.

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

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

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

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

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

Загрузка производится путем обмена данными между двух сторон — браузером (со стороны пользователя) и сервером (на нем хранятся все файлы). Замедление может происходить из-за:

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

Чтобы устранить эти проблемы необходимы методы оптимизации сайта.

Оптимизируйте маркетинг и увеличивайте продажи вместе с Calltouch

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

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

Индексация

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

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

Ранжирование

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

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

Конверсия

В 2019 году Коли Лафран (редактор Unbounce) опубликовал исследование о скорости загрузки страниц. Согласно опросам, проведенными его командой, были сделаны выводы:

  • около 70% пользователей признают, что скорость загрузки влияет на шанс их покупки;
  • 19% маркетологов не признают, что показатели сказываются на конверсии.

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

Маркетинг

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

Тест: всеядный маркетолог или диджитал-гурман?

Тест: всеядный маркетолог или диджитал-гурман?

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

Нормы загрузки сайта:

  • 1-3 секунды — хорошо;
  • 4-7 — нормально, но лучше оптимизировать;
  • 8-11 — очень плохо, пользователи покидают сайт.

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

Эффективный маркетинг с Calltouch

  • Анализируйте весь маркетинг и продажи в одном окне
  • Удобные дашборды и воронки от показов рекламы до ROI

Обзор сервисов для проверки скорости загрузки сайта

PageSpeed Insights

PageSpeed Insights

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

  • Данные наблюдений
  • Origin Summary
  • Имитация загрузки страницы
  • Оптимизация
  • Диагностика
  • Успешные аудиты

С помощью Lighthouse инструмент эмулирует 3G-сеть для загрузки сайта. В разделе имитации загрузки отмечаются следующие параметры:

  • Время загрузки первого контента
  • Индекс скорости загрузки
  • Время загрузки для взаимодействия
  • Время загрузки достаточной части контента
  • Время окончания работы ЦП
  • Приблизительное время задержки при вводе

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

Глубина вложенности критических запросов

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

Pingdom Tools

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

Pingdom Tools

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

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

Далее последует раздел Improve page performance, в котором будут даны чёткие рекомендации по улучшению содержимого страницы с точки зрения кода, необходимые для оптимизации скорости загрузки.

После тестирования Response code 200 — кода ответа страницы — располагается раздел с указанием веса элементов сайта по категориям:

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

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

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

WebPageTest

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

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

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

WebPageTest waterfall

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

WebPageTest test results

Другие инструменты

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

  • GTmetrix
  • Load Impact
  • PR-CY
  • Monitis Tools

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

Один из бывших сотрудников Facebook* (*продукт компании Meta, которая признана экстремистской организацией в России) и основатель Pave Д. Митчел описал начало оптимизационной деятельности: прежде чем начинать что-то ремонтировать, нужно понять, что сломалось.

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

Серверная оптимизация

Если причина плохой работы в сервере, то эффекта от клиентской оптимизации не будет.

Хостинг (серверные ресурсы)

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

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

СУБД (сервер базы данных)

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

Управление этим процессом происходит путем применения СУБД. Одна из наиболее эффективных и популярных — MySQL. Это ПО с открытым исходным кодом. Его разработала компания Oracle в 1995 году. Владельцу сайта стоит заняться оптимизацией таблиц MySQL: это поможет обойти ошибки в обработке данных и сильно ускорит отображение контента на сайте.

Влияние CMS и программного кода

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

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

Кэширование

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

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

Оптимизация TCP, TLS, HTTP/2

Регулировка TCP полезна для масштабных проектов и серверов со скоростью от 10G. Нужно понимать: сетевая подсистема постоянно обновляется с выпуском новых ядер Linux, поэтому нужно произвести обновление.

Корректировка TLS (HTTPS) помогает повысить безопасность и снизить время на подключение защищенного соединения. Рекомендации по настройке были выпущены компанией Mozilla.

HTTP — HTTP/2 нужен для ускорения работы ресурса. Протокол был придуман совсем недавно, но уже используется в 20% случаев. Однако полагаться только на HTTP — HTTP/2 не стоит, так как ускорение не слишком успешно.

Клиентская оптимизация

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

Оптимизация критического пути: CSS, JS

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

Самый простой метод — запустить аудит в браузере от Google (панель разработчика) и подключить Lighthouse (вычисляет состав и время загрузки с учетом слабого соединения).

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

Оптимизация веб-шрифтов

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

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

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

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

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

  • в PNG для прозрачных файлов с текстом;
  • в JPEG для фото и многосоставных картинок;
  • в SVG для вектора.

В качестве дополнения могут использоваться и новые форматы: WebP или др. Этот файл может охватывать области применения PNG и JPEG.

Кэширующие заголовки

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

Если портал работает с Nginx, то стоит добавить: add_header Cache-Control “max-age=31536000, immutable. Это позволяет браузеру кэшировать сайты на период до 12 месяцев. Для изменения такого ресурса можно корректировать URL-адрес. Например, к имени файла добавляется версия.

Сжатие данных

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

Уровень сжатия можно настроить — он должен быть почти максимальным. Также разрешается применять статистическое сжатие. Затем сервер будет искать меньшую на сервере версию и сразу выдает ее.

Также можно пользоваться более полезными системами сжатия: zopfli и brotli.

Использование CDN

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

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

Рассмотрим популярные CMS:

  • WordPress — в работе поможет расширение Autoptimize (также можно скачивать измененные элементы из PageSpeed Tool);
  • Opencart — рекомендуется уменьшить размеры статичных элементов (Nix-системы могут быть улучшены при помощи ModPagespeed);
  • Joomla — изображения должны быть оптимизированы под Web, тогда их объем снизится (нельзя загружать иллюстрации с большим разрешением для CSS и HTML);
  • 1C Битрикс — в панели управления имеется много настроек (пользователь может корректировать «Автокэширование» и др.).

Рекомендации по увеличению скорости загрузки

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

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

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

Маркетинг

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

Эффективные способы продвижения товара в интернете

Эффективные способы продвижения товара в интернете

Как закрепить результат

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

Поддержка ускорения

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

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

Чтобы постоянно публиковать «правильный контент» в системы управления требуется ввести оптимизирующие процедуры. Особенно это касается картинок.

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

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

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

Заключение

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

Сквозная аналитика Calltouch

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

10 советов о том, как увеличить скорость загрузки страницы

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

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

1. Уменьшите количество HTTP-запросов

80% загрузки страницы ориентировано на загрузку компонентов страницы: скриптов, фотографий, файлов CSS, flash. Спецификация HTTP/1.1 советует, чтобы браузеры параллельно загружали не более 2-х компонентов веб-страницы с одного хоста. Уменьшив количество этих компонентов мы уменьшаем количество HTTP-запросов к серверу и как результат увеличиваем скорость загрузки страницы.

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

На самом деле есть несколько способ.

  • Использование CSS-спрайтов. CSS-спрайт — это комбинированное изображение, которое содержит в себе несколько маленьких изображений, которые в нужный момент для нужного элемента страницы вырезаются используя свойства: background-image и background-position.
  • Использование Inline-картинок. Inline-картинки используют URL-схему data: для встраивания картинки в саму страницу. Это, однако, увеличит размер HTML-документа. Встраивая inline-картинки в ваши таблицы стилей вы добьетесь уменьшения запросов к серверу, а размер HTML останется прежним.
  • Объединение нескольких файлов в один. Если у Вас на страничке подключается больше одного css- или js-файла, то Вы можете объединить их в один. Это очень простой, но действенный способ уменьшения количества http-запросов на сервер. О том, как это делать на лету я писал в своей заметке здесь «Разгони свой сайт. Статическое сжатие css- и js- файлов на лету»

2. Помещайте CSS файлы в начале страницы

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

Если размещать CSS файлы внизу страницы, то это не позволяет многим браузерам рендерить страницу постепенно. Это объясняется тем, что браузер «не хочет» перерисовывать элементы, у которых после загрузки страницы может измениться стиль. Так что все свои CSS файлы всегда подключайте в верхней части страницы в секции HEAD.

3. Помещайте javascript в конец страницы

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

Кроме того, внешние .js-файлы блокируют параллельную загрузку. Спецификация HTTP/1.1 советует, чтобы браузеры параллельно загружали не более 2-х компонентов веб-страницы с одного хоста. Таким образом, если картинки для вашего сайта располагаются на разных хостах, вы получите более 2-х параллельных загрузок. А когда загружается скрипт, браузер не будет начинать никаких других загрузок, даже с других хостов.

4. Минимизируйте css и javascript

Минимизация файла — это удаление из кода всех несущественных символов с целью уменьшения объема файла и ускорения его загрузки. В минимизированном файле удаляются все комментарии и незначащие пробелы, переносы строк, символы табуляции. Здесь все просто. Чем меньше объем файла, тем меньше времени понадобится браузеру на его загрузку. А минимизировать Ваш код помогут вот эти 24 онлайн-сервиса для сжатия и оптимизации CSS кода
5. Используйте поддомены для параллельного скачивания

Как я уже говорил Выше, согласно спецификации HTTP/1.1 на браузеры накладываются ограничения на количество одновременно загружаемых компонентов сайта, а именно не более 2-х компонентов с одного хоста. Поэтому если на Вашем сайте много графики, то ее лучше вынести на отдельный поддомен или поддомены. Для Вас это будет один и тот же сервер, а для браузера — разные. Чем больше поддоменов Вы создадите, тем больше файлов браузер сможет одновременно загрузить и тем быстрее загрузится вся страница сайта. Вам остается лишь изменить адрес картинок на новый. Очень простой, но действенный способ.

6. Используйте кэш браузера

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

Поэтому выставляйте HTTP-заголовок Expires везде, где только это возможно, на несколько дней или даже месяцев вперед. Для того, чтобы веб-сервер Apache отдавал соответствующие рекомендациям HTTP-заголовки Expires, необходимо добавить в файл .htaccess, находящийся в корневой папке сайта, следующие строки:

 Header append Cache-Control "public"FileETag MTime SizeExpiresActive OnExpiresDefault "access plus 0 minutes"ExpiresByType image/ico "access plus 1 years"ExpiresByType text/css "access plus 1 years"ExpiresByType text/javascript "access plus 1 years"ExpiresByType image/gif "access plus 1 years"ExpiresByType image/jpg "access plus 1 years"ExpiresByType image/jpeg "access plus 1 years"ExpiresByType image/bmp "access plus 1 years"ExpiresByType image/png "access plus 1 years" 

Данный фрагмент файла конфигурации Веб-сервера Apache проверяет наличие модуля mod_expires и, если модуль mod_expires доступен, включает отдачу HTTP-заголовков Expires, которые устанавливают срок хранения перечисленных выше объектов в кэше браузеров и прокси-серверов равный одному году с момента первой загрузки. Установив такой срок жизни кэша браузера, может возникнуть сложность с обновлением файлов. Поэтому если Вы изменили содержимое css или javascript-файла и хотите, чтобы эти изменения обновились в кэше браузера, то необходимо изменить название самого файла. Обычно в название файла добавляют его версию, например так: styles.v1.css

7. Используйте CDN для загрузки популярных JavaScript библиотек

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

CDN (Content Delivery Network) — это множество веб-серверов, разнесенных географически для достижения максимальной скорости отдачи контента клиенту. Сервер, который непосредственно будет отдавать контент пользователю, выбирается на основании некоторых показателей. Например, выбирается сервер с наименьшим числом промежуточных хопов до него либо с наименьшим временем отклика. Кроме того браузер кэширует javascript-файлы, и если Вы посещали сайты на котором используется такой метод, то эта библиотека уже есть в кэше Вашего браузера, и он не будет загружать её снова.

Одним из таких CDN — является Google Libraries. Это CDN для популярных open-source JavaScript библиотек. Загрузка популярных javascript фреймверков с Google Libraries позволяет увеличить скорость загрузки страницы и снизит траффик на ваш сервер.

О том как загружать jQuery с репозитория Google я писал вот в этой заметке «Увеличиваем скорость загрузки страницы загружая jQuery с репозитория Google».

8. Оптимизируйте ваши изображения

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

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

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

Вот несколько онлайн сервисов для оптимизации изображений:

9. Не масштабируйте изображения

Не изменяйте размер изображения при помощи атрибутов width и height тега , либо при помощи CSS. Это тоже негативно влияет на скорость загрузки страницы. Если у Вас есть изображение размером 500x500px, а вставить на сайт Вы хотите изображение с размером 100x100px, то лучше изменить размер оригинальной картинки при помощи графического редактора Photoshop, или любого другого. Чем меньший вес картинки, тем меньше времени потребуется для её загрузки.

10. Используйте Gzip- сжатие

Как показали проведенные исследования, gzip-сжатие текстового файла «на лету» в 95–98% случаев позволяет сократить время на передачу файла браузеру. Если хранить архивированные копии файлов на сервере (в памяти proxy-сервера или просто на диске), то соединение в общем случае удается освободить в 3–4 раза быстрее.

Начиная с версии протокола HTTP/1.1, веб-клиенты указывают, какие типы сжатия они поддерживают, устанавливая заголовок Accept-Encoding в HTTP-запросе.

Accept-Encoding: gzip, deflate

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

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

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

 AddOutputFilterByType DEFLATE text/htmlAddOutputFilterByType DEFLATE application/javascriptAddOutputFilterByType DEFLATE text/javascriptAddOutputFilterByType DEFLATE text/css BrowserMatch ^Mozilla/4 gzip-only-text/htmlBrowserMatch ^Mozilla/4\.0[678] no-gzipBrowserMatch \bMSIE !no-gzip !gzip-only-text/html  

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

 AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascriptBrowserMatch ^Mozilla/4 gzip-only-text/htmlBrowserMatch ^Mozilla/4.0[678] no-gzipBrowserMatch bMSIE !no-gzip !gzip-only-text/html mod_gzip_on Yesmod_gzip_item_include file \.js$mod_gzip_item_include file \.css$  

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

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *