Давайте ускорим ваш сайт с помощью этих простых шагов

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

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

3 секунды - это все, что нужно посетителям, чтобы покинуть веб-страницу

Исследование Akamai показало, что

  • 47% людей ожидают, что веб-страница загрузится за две секунды или меньше.
  • 40% покидают веб-страницу, если загрузка занимает более трех секунд.
  • 52% онлайн-покупателей считают, что быстрая загрузка страниц важна для их лояльности к сайту.

Еще в 2010 году Google объявил, что скорость веб-сайта начнет влиять на поисковый рейтинг.

Средняя скорость загрузки веб-страницы

Согласно отчету Radware, средняя скорость загрузки веб-сайтов в этом году увеличилась на 22%. Теперь для загрузки требуется 7,72 секунды - это далеко от двухсекундного лимита для обычного пользователя.

Как загрузить вашу веб-страницу быстрее

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

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

1 - Включить сжатие Gzip

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

Что такое сжатие Gzip?

Gzip находит все повторяющиеся строки и заменяет их указателями на первый экземпляр этой строки. Это может быть невероятно эффективным для уменьшения размера файла, особенно с кодом, поскольку код невероятно повторяется. Представьте, сколько экземпляров ‹div есть в файле HTML или {в файле CSS. В некоторых случаях это может уменьшить размер файла до 85%. Маленькие файлы означают более быструю загрузку.

Чтобы включить сжатие Gzip в Appache и IIS, ниже приведены примеры настроек, которые вы можете использовать.

Apache

Windows IIS

После того, как вы реализовали сжатие Gzip, вы можете проверить, правильно ли оно работает. Если ваш сервер не Apache или Windows, проект HTML5 Boilerplate предлагает конфигурации серверов для всех популярных серверов.

2 - Минимизация ресурсов и минимальное количество HTTP-запросов

Важность уменьшения количества HTTP-запросов

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

В этой статье мы сосредоточимся только на javascript, css и HTML. Обычно на веб-сайте есть несколько файлов javascript и таблиц стилей. Чтобы повысить скорость веб-сайта за счет уменьшения количества HTTP-запросов, нам нужно объединить все файлы javascript в один файл. То же самое и с файлами css.

Как минифицированные ресурсы повышают производительность веб-сайта

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

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

Похоже, здесь много работы, есть ли способ лучше?

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

Единый инструмент для уменьшения и объединения файлов Javascript и CSS

Я использую Minify на всех наших сайтах. Это библиотека php, которая объединяет и минимизирует файлы javascript и css во время выполнения. Чтобы использовать библиотеку

  • Скачать и поместите папку min в корень вашего сайта.
  • Отредактируйте min / groupConfig.php и перечислите все ваши файлы javascript и css, как показано ниже

Библиотека minify объединит файлы, проверит и уменьшит. Он также устанавливает соответствующие типы mime и заголовки срока действия для кэширования браузера (мы поговорим о кешировании браузера более подробно в следующей статье) во время выполнения.

Теперь вместо включения всех отдельных файлов javascript и css на свою страницу html вы должны включить только один файл javascript и один файл css, как показано ниже

<link href=”/min/?g=css” rel=”stylesheet”> 
<script src=”/min/?g=js” type=”text/javascript”></script>

Этот пример предназначен для настраиваемого веб-сайта PHP, если вы используете WordPress или другие системы CMS, существует ряд других инструментов, которые предоставляют вам те же функции, например BWP Minify, W3 Total Cache и т. Д.

Уменьшить HTML-файл

Теперь, когда мы реализовали сжатие Gzip и минимизированный / комбинированный javascript и таблицы стилей, нам нужно минимизировать сам файл HTML. Первое, что загружается в браузере, - это нестандартный HTML-файл, и никакие другие ресурсы не загружаются, пока HTML-разметка не будет полностью загружена. Минимизированный HTML-код не загружается быстрее, так как его размер меньше, есть свидетельства того, что веб-браузер может анализировать их быстрее, так как нет комментариев и пробелов.

Чтобы применить минимизацию HTML, можно использовать следующий код. Я бы посоветовал создать файл min.php и включить его в ваш запускаемый php-файл или заголовочный php-файл.

Если вы реализуете сжатие и минификацию Gzip, вы увидите большую разницу в скорости вашего веб-сайта, вы можете измерить эту разницу с помощью таких инструментов, как GTmetrix, PageSpeed ​​Tools от Google и PingDom.

Что следующее?

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

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

Удачной оптимизации!