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

ТОП-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) – в конце страницы, перед закрывающим тегом

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

Время чтения: 9 минут Нет времени читать? Нет времени?

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

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

• 1 секунда – великолепно.
• 2-3 секунды – очень хорошо.
• 4-7 секунд – нормально, но есть куда расти.
• 8-10 секунд – плохо.
• 11 секунд и более – ужасно, начинайте бить тревогу, т.к. огромные деньги утекают прямо из-под вашего носа.

Согласно исследованию Strangeloop, в ходе которого была протестирована скорость загрузки 2000 топовых интернет-магазинов, в среднем скорость загрузки коммерческих сайтов составляет 10 секунд. Возможно, вы спросите: «С какой стати мы должны улучшать скорость загрузки своего сайта, если даже топовые интернет-магазины грузятся так долго?» А вот и ответ:

• 57% посетителей покидают страницу, которая грузится более 3-х секунд.
• В те моменты, когда сайт тормозит из-за большого количества трафика, более 75% онлайн-покупателей предпочитают уйти на сайт конкурента.
• 2 секунды – столько примерно будет ждать терпеливый пользователь до тех пор, пока на экране появится информация. Добавление такого элемента, как «прогресс-бар» может продлить время его ожидания до 38 секунд.
• Сайт, который грузится 3 секунды, имеет на 22% меньше просмотров, на 50% больше отказов и на 22% меньше конверсии, чем сайт, который грузится 1 секунду. Сайт, который грузится 5 секунд, имеет еще более плохие показатели – на 35% меньше просмотров, на 105% больше отказов и на 38% меньше конверсии.
• 8% людей считают, что главной причиной их ухода с сайта является медленная загрузка страниц.

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

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

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

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

• Исследование Aberdeen Group показало, что в результате задержки в 1 секунду уменьшается количество просмотров (на 11%), процент удовлетворенности аудитории (на 16%), а также коэффициент конверсии (на 7%).
• Компания Shopzilla увеличила скорость сайта на 5 секунд и тем самым повысила конверсию на 12%
• Сократив время загрузки своих посадочных страниц, компании Mozilla удалось увеличить количество загрузок на 15,4%, что привело к 60 млн дополнительных загрузок.
• 85% мобильных юзеров ожидают, что сайты будут грузиться так же быстро, как и на компьютере. Не получая такого же результата, они покидают сайт.

Источники: gomez.com, aberdeen.com, en.oreilly.com, blog.mozilla.com

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

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

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

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

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

Чтобы уменьшить размер страниц, в первую очередь воспользуйтесь сжатием данных в протоколе HTTP. Это уменьшает размер текстовых ресурсов, включающих элементы HTML, CSS и JavaScript, на 50% и более. Для сжатия данных протокола HTTP используются технологии zip, gzip и другие.

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

2. Снизьте «вес» графики

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

• Публикуйте фотографии в формате JPEG, избегайте формата PNG. Формат JPEG позволяет сильно сжимать изображения без потери качества. Например, в день представления Windows 8 компания Microsoft опубликовала на главной странице сайта фото в формате PNG, «вес» которого составил 1 МБ. Фото аналогичного качества в формате JPEG имеет размер приблизительно 140 КБ.
• Не злоупотребляйте использованием формата PNG для обеспечения прозрачности графики. Эффект прозрачности — это очень красиво, но не всегда функционально.
• Корректно выбирайте уровень качества картинок в формате JPEG. Уменьшив качество фото на 25-50%, вы практически не заметите разницы по сравнению с исходным изображением. При этом «вес» иллюстрации значительно уменьшится.
• Очищайте графические файлы от цифрового мусора. Различные редакторы фото, которыми наверняка пользуется ваш дизайнер, оставляют в файле много различных данных, например, комментарии, рабочие версии изображения, неиспользуемые палитры и т.п. Этот цифровой мусор не нужен вашим читателям. Чтобы очистить файл, воспользуйтесь сервисами Pngcrush, или Smush.it.

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

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

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

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

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

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

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

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

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

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

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

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

Если сервер вашего хостинг-провайдера находится во Владивостоке, посетителям из Санкт-Петербурга придется набраться терпения, ожидая загрузки страницы. Эта проблема особенно актуальна для сайтов с «тяжелым» контентом, которые посещают пользователи, физически удаленные от сервера на большие расстояния. Чтобы решить эту проблему, воспользуйтесь сетями доставки контента (CDN), например, Amazon CloudFront или Akamai.

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

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

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

Представьте, что ищете какой-либо товар. Например, шуруповёрт. Пытаетесь зайти на сайт, но он не открывается 1, 2, 3, 4 секунды, вот уже 5-я пошла… Будете ждать? Вряд ли, ведь можно зайти к конкуренту в выдаче, у которого сайт загрузится за полторы секунды. Это самый простой пример, почему нужно оптимизировать скорость загрузки сайта.

Какой должна быть скорость загрузки сайта в секундах

1–3 секунды. Отличный результат. При такой загрузке ресурс будет собирать новых пользователей из органической выдачи, а количество отказов станет минимальным.

4–7 секунд. Нормальный результат, но лучше добиться показателей, указанных выше.

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

Порядок загрузки сайта

В загрузке данных участвуют:

1. Пользователь со своим браузером.
2. Веб-сервер, на котором располагаются все данные сайта.

Очень часто проблема появляется на стороне сервера. Смотрите, как это работает. Пользователь нажимает на ссылку, и процесс начинается:

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

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

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

Итак, рассмотрим первичный список, где могут скрываться ошибки:

1. Сервер. Что это такое? По сути, тот же компьютер, только более мощный. У сервера, как и у ПК, может не хватать оперативной памяти, ядер или мощности процессора для обработки входящих данных. Как решается? Если есть проблемы с сервером, нужно просто сменить поставщика услуг, то есть ваш хостинг.
2. Тяжёлые файлы. Сюда входит всё: от JS и CSS до шрифтов и картинок. Всегда помните о размере файлов, размещаемых на сайте. Их небольшой размер — залог быстрой загрузки страниц.
3. Медленная CMS. Этот фактор актуален только в том случае, если вы используете малоизвестный движок. Если у вас сайт на WP, Joomla, Drupal, MoDX и так далее, можете не беспокоиться об их качестве, причина медленной загрузки скрывается в других факторах.

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

Инструмент для проверки

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

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

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

Google PageSpeed даст полезную информацию, пользуясь которой можно самостоятельно устранить недостатки. Вы можете:

1. Сжать изображения

• размер. Для обычных целей достаточно картинок размером до 1600 px, исключение — лупа в интернет-магазинах, там нужно более высокое качество;
• «вес» картинок. Любое изображение можно сжать без видимых потерь качества. Это делается с помощью «Фотошопа» или специальных онлайн-сервисов.

Оптимальные размеры для изображений:

• в каталог — до 7 КБ;
• для карточек товаров — до 18 КБ;
• для просмотра в увеличенном виде — 920 КБ.

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

2. Включить gzip-сжатие

Скорость передачи файлов обычно медленнее, нежели распаковка, поэтому с помощью gzip-сжатия можно ускорить работу сайта. Данные архивируются на сервере и передаются затем браузеру, который распаковывает их и показывает пользователю веб-страницу. Однако есть небольшое «но». Этот процесс может перегружать сервер, поэтому рекомендуется проверить скорость загрузки ресурса до и после включения gzip. Проверить, включено ли сжатие, можно всё тем же PageSpeed. Если gzip активно, программа напишет: «Внедрены приёмы оптимизации скорости загрузки сайта».

Как подключить сжатие?

Нужно добавить в конец файла .htaccess строки кода:

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

После этого ещё раз проверьте сжатие в PageSpeed.

3. Настроить кэширование

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

ExpiresActive On
ExpiresDefault “access plus 1 month”

ExpiresByType image/gif “access plus 2 months”
ExpiresByType image/jpeg “access plus 2 months”

Можно добавлять для кэширования любые расширения файлов.

4. Сжатие CSS и JS

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

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

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

Оставьте ваши контактные данные. Наш менеджер свяжется и проконсультирует вас.

Наш менеджер свяжется с Вами в ближайшее время

Источники:

http://1ps.ru/blog/sites/2018/uluchshaem-skorost-zagruzki-sajta/
http://texterra.ru/blog/kak-uvelichit-skorost-zagruzki-sayta.html
http://wezom.com.ua/blog/kak-uvelichit-skorost-zagruzki-sajta