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

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

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

Быстрая загрузка сайта

Что влияет на скорость загрузки сайта? Для конечного пользователя 80% времени отклика связаны с HTTP-запросами. Значит, нужно их минимизировать:

— сделать дизайн страницы простым: небольшое количество изображений и текст;

— объединить все CSS в одну таблицу стилей.

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

Используйте CSS-спрайты

Большое количество изображений на странице сайта замедляет ее скорость, потому как браузер запрашивает каждое изображение по очереди и затрачивается дополнительное время на подключение к серверу. А спрайты объединяют все фоновые изображения на странице в одно изображение. Соответствующий сегмент изображения будет отображаться благодаря фоновому изображению в CSS и свойствам фона.  CSS спрайты уменьшают задержки, связанные с количеством запросов сервера и общее количество байтов, загружаемых страницей.
Подробно о том, что такое спрайты, можно прочесть здесь http://habrahabr.ru/post/159027/.

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

Compass, Lemonade, SpriteMe, Fireworks CS6, Spritepad, Sprite Cow, Glue, CSS Sprites.

Включите сжатие на сервере

Сжатие ресурсов с помощью GZIP существенно снижает размер страницы. Алгоритм сжатия GZIP используется такими популярными http-серверами, как Apache, Nginx и IIS. С его помощью эти сервера делают сжатие на HTML, CSS и JavaScript автоматически.

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

Здесь вы можете посмотреть рекомендации Google по сжатию https://developers.google.com/speed/docs/insights/EnableCompression.

Удалите лишние плагины

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

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

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

Используйте кеширующие плагины

Отличное решение предыдущего вопроса — это плагины для кеширования. Их использование даст вам прирост производительности. Но таких плагинов огромное количество и выделить какой-то один довольно сложно, тем более, что при выборе нужно учитывать особенности работы каждого сайта в отдельности.  К примеру, вот несколько плагинов для WP: W3 Total Cache, WP Super Cache, Hyper Cache; для Joomla есть JotCache; для e-commerce есть свои кеширующие расширения.

Распространяйте статический контент с помощью CDN

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

CDN — это набор серверов, которые существуют в разных местах в мире. CDN делает две вещи:

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

— сокращает размер файлов — CDNs доставляет контента без Cookies.

Например, у поставщика CDN услуг есть серверы в Харькове, Москве, Гонконге и Нью-Йорке. Когда пользователь заходит на ваш сайт, срабатывает ближайший к нем сервер.

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

Кеширование браузера с использованием expires заголовков

Каждый раз, как кто-то посещает ваш сайт, его браузер будет сохранять тонну файлов (таблиц стилей, скриптов и изображений). Это позволяет уменьшить число запросов и ускорить загрузку в следующий раз. Эти файлы имеют срок действия. По умолчанию, срок может быть установлен на 24 часа, то есть он будет обновляться каждый день. Рекомендуется ставить максимум на годичный срок, а минимум — на неделю. Например, 1 неделю для js и css и 1 год для изображений.

Есть две вещи, которые нужно учесть, в использовании expire:

— для статических компонентов сайта установите политику Never expire (но учтите, что если захочется что-то изменить, например изображение, придется менять и его название, и все ссылки на него с сайта). Эти компоненты кэшируются, избегая трудоемких и ненужных HTTP запросов. Заголовки expire должны использоваться для изображений, Flash, скриптов и стилей.

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

Подробные рекомендации по кешированию заголовков дает Google https://developers.google.com/speed/docs/insights/LeverageBrowserCaching.

Используйте HTTP keep-alive response заголовки

HTTP запросы просты: они берут и отправляют один файл, а после закрываются. Это просто, но не очень быстро.

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

Тестируйте производительность сайта

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

Как проверить скорость загрузки сайта? Используйте Page Speed Insights — инструмент от Google для веб-разработчиков. Введите URL, нажмите кнопку и получите отчет о скорости страницы и предложения по улучшению. Предложения по производительности разбиваются на категории с высоким, средним, низким приоритетом.

Pingdom – сервис для проверки скорости. Его результаты соответствуют реальному опыту пользователей, потому что тест проводится с разными веб-браузерами.

YSlow анализирует сайт на основе правил для повышения производительности https://developer.yahoo.com/performance/rules.html, дает общую информацию о компонентах страницы, показывает статистику и обзор того, что нужно сделать, чтобы улучшить производительность страницы.

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

XMtWLroM_Us

И еще раз о том, зачем это нужно делать:

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

— скорость загрузки страниц сайта – это фактор ранжирования в поисковых системах.

 

Пусть ваш сайт будет быстрее Чака Норриса (только ему не говорите),

Контент-маркетолог HOSTiQ.com.ua Мария Власенко

Понравилась статья? Оставь свой голос!
1 оценка, среднее: 5,00 из 51 оценка, среднее: 5,00 из 51 оценка, среднее: 5,00 из 51 оценка, среднее: 5,00 из 51 оценка, среднее: 5,00 из 5 (1 оценок, среднее: 5,00 из 5, вы уже поставили оценку)
Загрузка...
  • ара

    http://smart-start.com.ua — сайт, который я советую всем кто интернируется веб дизайном и хочет сам зарабатывать деньги на своем сайте

  • Sergey Drago

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

    • Если речь идёт о полной загрузке страницы, то цифры такие:
      1 секунда — отлично, 2-3 секунды — хорошо, 4-7 секунд — нормально, но есть повод задуматься об увеличении скорости. 8 секунд и более — это очень низкая скорость загрузки сайта, и это нужно срочно исправлять.