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

Обновлено: 05.07.2024

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

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

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

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

Чем быстрей загружается сайт, тем лучше конверсия

Чтобы убедиться в этом, изучите следующие результаты исследований:

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

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

Итак, что же можно сделать, чтобы ускорить загрузку сайта:

1. Уменьшите размер страниц сайта

Графика часто составляет 80% и более от общего размера страниц. Поэтому очень важно правильно оптимизировать публикуемые фотографии. Следующие рекомендации помогут вам уменьшить размер изображений на 50% и более:

3. Упростите код JavaScript и CSS

Чтобы упростить код элементов JavaScript и CSS, воспользуйтесь программными средствами или онлайн-сервисами, например, Online Javascript Compression Tool или Online JavaScript/CSS Compression.

4. Уменьшите число запросов браузера

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

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

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

Комбинируйте и сжимайте файлы CSS и JavaScript. Объединяя эти элементы, вы значительно уменьшаете количество запросов браузера. Этот метод подходит для статических страниц. Чтобы объединить файлы CSS и JavaScript, воспользуйтесь специальными сервисами и ПО, например, CakePHP.
Объединяйте небольшие фотографии в CSS-спрайты. Это особенно удобно для ресурсов, на которых есть много иконок, кнопок и других маленьких изображений. Специальные сервисы позволяют объединить их в один файл, который называется CSS-спрайт. Воспользуйтесь инструментом SpriteMe, чтобы проверить эффективность данной рекомендации на практике.

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

5. Сократите расстояние между сайтом и пользователями

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

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

Введение: как загружаются сайты

Первый шаг: понять, что тормозит

Бывший инженер Facebook и основатель стартапа Pave Джастин Митчел в треде на Quora так описывал начало работы по оптимизации загрузки сайта:

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

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

Существует несколько важных метрик быстродействия сайта. Одна из них — это время до первого байта (TTFB — time to first byte), которая показывает, как быстро браузер начинает получать данные от сервера после отправки запроса. Также важно замерять начало рендеринга страницы и время загрузки (load time).

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

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

Расширение ресурсов сервера

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

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

Кэширование

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

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

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

Сжатие изображений

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

Существует несколько инструментов для компрессии изображений, среди которых TinyPNG, Kraken.io и JPEGmini. Кроме того, имеет смысл попробовать включить конвертацию изображений в формат WebP. Он был разработан Google, и по данным компании такие изображения на 26% легче PNG-файлов и на 25-34% меньше JPEG-картинок.

Чтобы активировать конвертацию, можно добавить в файл .htaccess следующий код:

К сожалению, на данный момент формат WebP поддерживается далеко не всеми браузерами — пока среди них только Chrome и Opera.

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

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

Включить использование Gzip довольно просто — нужно просто добавить несколько строк кода в файл .htaccess. К примеру, при использовании веб-сервера Apache веб-мастерам доступен модуль mod_gzip, чтобы активировать Gzip в таком случае нужно внести в .htaccess такой код (подробнее — в туториале на SitePoint):

Оптимизация кода сайта

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

Также стоит избегать инлайн-CSS и JS-кода. В таком случае браузеры будут кэшировать эти внешние ресурсы, что позволит сэкономить время загрузки. Также JS и CSS следует минифицировать – сделать это можно с помощью инструментов вроде JSMIN, YUI Compressor и Packer.

Использование связки Nginx+Apache

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

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

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

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

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

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

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

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

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

Комбинировать нескольких изображений в один графический файл (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. Оптимизируйте графику и видео

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

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

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

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

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

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

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

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

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

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

Вывод

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

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

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

Исправьте ошибки пожалуйста. В самом начале статьи опечатка и по статье неплохо пройтись катком пару раз.

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

Немного предыстории, почему я их спросил, что происходит с их измеряльщиком.
При замере скорости нужно замедлять процессор и сеть. Иначе нельзя точно притвориться телефоном, то есть произвести эмуляцию, симуляцию, как хотите называйте. Гугл эмулирует устройство, потому что замедляет процессор в 4 раза и сеть до 3G fast. Поэтому и оценки показывает всегда такие страшные, потому что если вы возьмете любой андроид телефон от 6 до 10 тысяч рублей, то увидите эти показатели в секундах по скорости в реальности, а не только в ГуглПейджспид.

Пингдом не замедляет (не тротлит) ни проц ни соединение. И в хроме не открывает сайт даже! Представляете! Они просто дают цифру от головы. Не видел в этом сервисе оценки больше одной-полутора секунд. Всегда всё "по красоте" показывает. Но это не реальные цифры, От слова совсем.

Не пользуйтесь этим.

Перечисленные сервисы в графе "CDN" — не адаптированы для России. Если у вас аудитория сайта в России, то ни один из сервисов не подходит и только увеличит время загрузки, а не уменьшит его. Хотя, CloudFlare - хороший сервис. Но сервера в РФ только на платном тарифе дает. И то, не всем и не всегда.

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

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

Добрый день, спасибо за обратную связь, к сожалению не очень понял как Вы сделали вывод, что они не очень понял как работает инструмент, так как текст письма:
Yup we're aware, this is something that will happen when we replace the whole system for the page speed, as you've noted it is a bit outdated. While we can't say exactly when this will happen it's on the near term roadmap for Pingdom. The plan is to use Google Lighthouse to get more modern scoring tool.

Где говориться, что:
1. Система немного устарела (они знаю как она работает и знают свои недостатки)
2. Они не могут сказать когда будет апдейт (не сказано, что они заменят систему под Google PageSpeed Insights).
3. Они планируют использовать Lighthouse чтобы получить больше данных (где не говориться что они полностью перейдут на эту систему)

Если я что-то неправильно перевел или понял (так как у нас есть только ответ без вопроса), то поправьте меня.

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

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

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

Мегафон использует сеть G-core. Своей у них нет. Остальные опять же, без покрытия по РФ.

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

К сожалению про кеширование не понял.

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

Думаю в данном случае найти продукт, оптимизированный для рынка РФ не составляет труда.

да, к сожалению, у нас есть такая проблема и сейчас предпринимаем меры по ее решению :(

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

объединение элементов CSS и JS в отдельные файлы;

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

встраивание inline-картинок в таблицы файлы CSS;

объединение графических элементов формата SVG в один файл.

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

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

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

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

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

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

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

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

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

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

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

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

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;

уменьшение количества запросов серверу;

настройка кэшированных копий;

размещение таблиц стилей вверху страницы, а скриптов — внизу.

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

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