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

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

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

1. Больше 11 секунд - ужасная скорость, бейте тревогу;
2. 7-10 секунд - плохо;
3. 4-6 секунд - терпимо, но есть куда стремиться;
4. 2-3 секунды - очень даже хорошо;
5. 1 секунда - превосходно.

Исследования Strangeloop показали, что страницы популярных интернет-магазинов загружаются примерно 10 секунд. Многие скажут: «А зачем увеличивать скорость своего сайта, если топовые тоже медленно грузятся?». Ответ прост:

1. ровно две секунды - именно такое время будет находиться на сайте обычный терпеливый интернет-пользователь, пока на мониторе или сенсоре появится какая-либо информация;
2. 57 процентов посетителей просто покидают страницы, если загрузка длится дольше трех секунд;
3. сайт, загрузка которого длится одну секунду, имеет на 22 процента больше посетителей, чем сайт с загрузкой в три секунды;
4. 75 процентов покупателей предпочитают уходить на другие сайты, если ваш тормозит из-за перегруженного трафика (они готовы делать это до тех пор, пока не найдут сайт, который будет удовлетворять их по скорости).

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

• WebPageTest;
• Pingdom;
• Google PageSpeed insights.

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

Чем быстрее скорость, тем больше конверсия

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

1. известная компания Shopzilla ускорила скорость своего интернет-ресурса до 5 секунд, тем самым повысила конверсию на 15 процентов;
2. Aberdeen Group провела исследования, которые показали, что задержка в одну секунду сокращает количество переходов примерно на 11 процентов, а еще увеличивает конверсию на 7 процентов;
3. 90 процентов пользователей ждут, что сайты через телефон загрузятся так же, как и на компьютере, то есть быстро. Ожидаемый результат, конечно, они не получают и покидают сайт. А владельцы теряют из-за этого большие аудитории.

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

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

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

Как же уменьшить размер страницы? Ответ прост! Первым делом нужно воспользоваться сжатием данных в специальном протоколе «HTTP». Это значительно уменьшит размер загруженных текстовых ресурсов. Обычно для этого используют такие программы, как zip и другие. Можно и ничего не делать, а просто попросить провайдера подключить функцию автоматического сжатия (разумеется, за это придется заплатить). Обязательно оцените эффект, так как может оказаться, что проблема не в этом (есть специальные сайты, которые определяют процент эффекта сжатия). Если все было сделано верно, то появится примерно вот такая картинка:

2. Уменьшите размер графики. На самом деле, часто проблемы с загрузкой сайта возникают из-за рисунков. Обычно они составляют 70-80 % от размера всей страницы. Именно поэтому важно делать тщательную оптимизацию фотографий. Есть ряд рекомендаций, которые помогут в этом:

• избегайте такого формата, как PNG. Фотографии лучше всего публиковать в формате JPEG, который помогает хорошо сжимать рисунки, при этом качество совсем не изменяется. К примеру, фото в формате PNG весит 1 мегабайт, а в формате JPEG оно будет весить 140-200 килобайт;
• если уменьшите качество фотографии на 20-25 процентов, то от оригинала она практически ничем не будет отличаться, но вот размер поведет себя иначе, он будет стремиться к нулю;
• не стоит злоупотреблять форматом PNG из-за прозрачности фото. Конечно, это очень красиво, поспорить сложно, но не всегда практично;
• фотографии обязательно следует очищать от цифрового мусора. Скачанное фото всегда проходит кучу редакторов и фотошопов, это не нужно читателям сайта. Используйте такие сайты, как Smush и другие;
• занимайтесь массивными процедурами. Что это такое? Массивные работы - объединение нескольких фотографий в одну. Например, пять фото весят по 200 килобайт, если их разместить по отдельности, то страница прибавит свой вес на один мегабайт. А вот есть объединить все пять в одну, то страница увеличит свой размер только на 200 килобайт. Есть разница? Конечно, очень большая! Вроде простой, но хитрый способ, до которого нужно еще додуматься. Однако стоит знать, что данный метод предназначен для фотографий, которые идут по порядку, иначе это будет выглядеть не совсем понятно аудитории сайта.

Помните: изменяя размер фотографии, всегда старайтесь учитывать эстетику сайта и его привлекательность. Все же поисковые системы (Гугл и Яндекс) ценят визуально красивые ресурсы.

3. Старайтесь упрощать коды CSS и JavaScript. Данный способ уменьшает вес страницы намного сильнее, чем zip. Разобраться вам помогут специальные онлайн-сервисы.
4. Уже всем понятно, что чем больше браузер посылает запросов, тем медленнее загружается страница. Чтобы ускорить ее загрузку, нужно создать такие условия, при которых браузер пользователя будет посылать меньше запросов. Этого легко добиться, если уменьшить число фотографий, видеозаписей и другого.

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

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

• Браузеру нужно разрешить автоматически кэшировать все данные. Лучше всего попросить своего провайдера включить функцию автоматического кэширования отдельных фотографий, так как нельзя заставлять посетителей часто вводить одни и те же данные, это раздражает и вызывает отвращение (особенно подходит в том случае, если ваш сайт содержит статистику).
• Создавайте правильные комбинации и сжимайте CSS. Данный способ предназначен больше для страниц со статистикой. Используйте специальное ПО, которое предлагает провайдер, а также сервисы, к примеру, CakePHP.
• Фотографии следует объединять в спрайты. Это подходит ресурсам, на страницах которых много иконок и других мелких картинок. Чтобы проверить эффект, воспользуйтесь SpriteMe.

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

5. Сокращайте расстояние между пользователем и сайтом. Как это понимать? Все очень легко и просто. К примеру, хостинг провайдера находится где-нибудь в Ульяновске, а пользователь - в Москве. Ему придется потерпеть достаточное количество времени, чтобы сайт загрузился. Данный вид проблемы актуален для всех ресурсов, которые наполнены  «тяжелым» контентом и которые посещают физически удаленные пользователи интернета. Вопрос решается быстро, только нужно тщательно в него вдуматься. Используйте сети, которые доставляют контент (например, Akamai). При использовании CDN вы как бы автоматом меняете URL всех фотографий.
6. Ускорить загрузку страниц сайта можно, используя систему Entity Tag. Она проверяет новые закэшированные файлы.

При отсылке файла сервер прикрепляет заголовок ETag и, конечно же, сам хеш. А вот на стороне пользователя используется заголовок If-None-Match, значение которого должно равняться хешу в самом файле кэш.

Если значения, которые приведены выше, равны, то сервер возвратит такой ответ: «HTTP/1.1 304 Not Modified». Но если значения разные, то сервер будет предлагать новую версию файла.

В это вникать не требуется, но суть такова: значения ETag и If-None-Match требуются для того, чтобы проверять кэшированные данные в браузерах пользователей, если файлы подвергать изменению, то они заменяются новыми. И становится ясно, что на все это тратится большое количество времени.

Так вот, суть состоит в изоляции этой проверки. Если мы отключим проверку, то значительно ускорим загрузку страниц сайта для пользователей. Но как это сделать?

Для отключения загрузки нужно соблюдать инструкцию:

• удаляем заголовок ETag. Благодаря данному действию, у посетителя будут применяться только такие команды, как Expires и Cache-Control;
• перезагружаем страницу - и все готово.

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

Вместе с ETag нужно будет удалить другой заголовок Last-Modified. Это позволит полностью избавиться от обновления кэша файлов.

Очень важно: ни в коем случае не удаляйте Last-Modified, если используются файлы HTML. Это приведет к прекращению работы страницы.

7. Всегда помещайте CSS-файлы в начало страницы. Благодаря этому страница будет загружаться по строгому порядку, то есть сначала заголовок, а потом уже сам текст. Если такие файлы помещать в конец, то браузер просто откажется рендерить страницу, что повлечет за собой беспорядочную загрузку информации (картинки в таких случаях часто не загружаются вовсе, что очень раздражает аудиторию).
8. JavaScript помещать следует противоположно предыдущему способу ускорения страницы. Таким образом, мы позволяем ресурсу сначала загрузить текст, а потом уже посторонние файлы. Если JavaScript-файлов большое количество, то весить они будут много сотен килобайт, поэтому заставлять ждать посетителя - губительный поступок для владельца сайта.
9. Последний способ - отказ от переадресаций. Не стоит писать статьи типа: «Если зайдете на сайт ССЫЛКА САЙТА, то получите очень ценную информацию». В таких случаях страница работает вдвое больше, что и увеличивает ее время - соответственно - вдвое. К примеру, с двух секунд до четырех, а статистика, которая указана в начале статьи, подробно говорит, какое количество посетителей потеряет в этом случае сайт.

Заключение

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