Правильные решения в продвижении сайтов в интернете!
г. Москва, м. Сокольники, ул. Маленковская, д. 32, стр. 3
Режим работы: с 10:00 до 19:00, пн.- пт. (сб./вс. - выходной)
+7 (499) 391-17-76
8 (800) 707-05-97
e-mail: biz@o-es.ru

10 способов ускорить ваш сайт и улучшить конверсию на 7 %

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

 

Думаете, скорость вашего сайта не имеет значения?

Подумайте еще раз.

Задержка в 1 секунду во время загрузки страницы дает:

  • на 11 % меньше просмотров страниц;
  • снижение удовлетворенности клиентов на 16 %;
  • 7 % потерь в конверсиях (источник: Aberdeen Group).

Amazon считает, что это соответствует действительности, компания сообщила о повышении доходов на 1 % за каждые 100 миллисекунд, на которые их сайт становился быстрее.

Того же мнения придерживается Walmart, который обнаружил увеличение конверсий на 2 % за каждую 1 секунду ускорения сайта.

 

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

10 вещей, которые вы можете сделать, чтобы ускорить свой сайт

1. Минимизируйте HTTP запросы

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

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

  • Оптимизируйте количество элементов на странице.
  • По возможности используйте CSS вместо изображений.
  • Объедините несколько таблиц стилей в одну.
  • Сократите сценарии и поместите их в нижней части страницы.

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

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

2. Сократите время ответа сервера

Ваша цель – сделать время отклика сервера менее 200 мс (миллисекунд). И если вы последуете советам из этой статьи, у вас будут все шансы этого добиться.

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

Профессиональный совет: воспользуйтесь этими ресурсами:

  • Yslow – для оценки скорости вашего сайта и получения советов о том, как повысить производительность.
  • PageSpeed Tools от Google – чтобы узнать больше об эффективности работы и автоматизации процесса.

3. Используйте сжатие

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

Сжатие уменьшает пропускную способность ваших страниц, тем самым уменьшая HTTP-ответ. Вы можете использовать сжатие с помощью инструмента Gzip.

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

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

Профессиональный совет: настройте свой сервер для включения сжатия:

  • Apache: использование mod_deflate
  • Nginx: использование HttpGzipModule
  • IIS: настройка сжатия HTTP

4. Включите кэширование браузера

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

Вот как объясняет это Tenni Theurer на примере Yahoo.

В первый раз, когда кто-то приходит на ваш сайт, им приходится до начала работы со страницей загружать HTML-документ, таблицы стилей, файлы javascript и изображения. Таких элементов может быть до 30, и их загрузка может занять до 2,4 секунды.

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

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

В тесте Theurer это было всего три компонента и 0,9 секунды на загрузку, что позволило снизить время загрузки на 2 секунды.

Время подгрузки недостающих элементов при повторном посещении сайта
Рис. 3. Время подгрузки недостающих элементов при повторном посещении сайта

Согласно Theurer 40–60 % ежедневных посетителей вашего сайта приходят с пустым кэшем, поэтому очень важно, чтобы вы сделали свою страницу быстрозагружаемой именно для этих пользователей. Но вам также нужно включить кэширование, чтобы сэкономить время последующих посещений.

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

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

5. Минимизируйте ресурсы

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

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

Вот рекомендации Google для минимизирования кода:

  • Чтобы минимизировать HTML, вы можете использовать PageSpeed Insights Chrome Extension для создания оптимизированной версии вашего HTML-кода. Запустите анализ вашей HTML-страницы и перейдите к пункту «Минимизировать HTML». Нажмите «Просмотреть оптимизированный контент», чтобы получить оптимизированный HTML-код.
  • Чтобы минимизировать CSS, вы можете попробовать YUI Compressor и js.
  • Чтобы минимизировать JavaScript, попробуйте Closure Compiler, JSMin или YUI Compressor. Вы можете создать процесс сборки, который использует эти инструменты, чтобы минимизировать и переименовать файлы разработки и сохранить их в производственный каталог.

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

При работе с изображениями вам нужно сосредоточиться на трех вещах: размере, формате и атрибуте src.

Размер изображения

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

  • обрезать изображения до нужного размера. Например, если ваша страница имеет ширину 570 пикселей, измените размер рисунка до данных показателей. Не просто загрузите изображение шириной 2 000 пикселей и установите размер в параметрах (width = «570»). Это замедляет время загрузки страницы и ухудшит пользовательский интерфейс.
  • уменьшить глубину цвета до минимально приемлемого уровня.
  • удалить комментарии к изображениям.

Формат изображения

  • JPEG – лучший вариант.
  • PNG также хорош, хотя старые браузеры могут не полностью его поддерживать.
  • GIF следует использовать только для небольшой или простой графики (менее 10 × 10 пикселей или цветовой палитры 3 или менее цветов) и для анимированных изображений.
  • Не используйте форматы BMP или TIFF.

Атрибут src

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

HTML-код для изображения включает в себя следующее:


<img src="">

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

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

Чтобы быстро загружать изображения, вы можете добавить на свой сайт плагин WP Smush.it.

7. Оптимизация доставки CSS

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

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

</pre>
<!—Your styles –>

<link rel=”stylesheet” type=”text/css” media=”all” href=http://yourURL/style.css />
<pre>

Inline CSS вложен в HTML вашей страницы и выглядит следующим образом:

Типичный вид кода
Рис. 4. Типичный вид кода

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

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

Избегайте включать CSS в HTML-код, такие как divs или заголовки (например, встроенный CSS, изображенный выше). Вы получите более чистый код, если поместите все CSS в свою внешнюю таблицу стилей.

8. Сделайте приоритетной видимую без прокрутки часть сайта

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

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

9. Уменьшите количество плагинов, которые вы используете на своем сайте

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

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

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

10. Уменьшите количество перенаправлений

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

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

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

  • используйте перенаправление НTTP для отправки пользователей с мобильными непосредственно на подходящий для мобильный URL без промежуточных переадресаций;
  • включите разметку <link rel=”alternate”> markup на своих страницах, чтобы идентифицировать эквивалентный мобильный URL-адрес, чтобы Googlebot мог найти ваши мобильные страницы.

Итого

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

Если вам сложно, то кое-что может вам помочь. Вот несколько ресурсов, которые я могу порекомендовать:

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

Оригинал статьи

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

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

Нажимая на кнопку «Отправить комментарий», вы соглашаетесь с Условиями использования