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

  02.05.2018 в 12:22

  

  Back End

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

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

Поисковые системы давно дали понять, что скорость загрузки страниц (СЗС) сайта является очень важным показателем при продвижении сайта.

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

 

к содержанию ↑

10 лучших бесплатных онлайн-инструментов для проверки скорости загрузки страниц сайта

 

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

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

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

Загружает страницу два раза, сравнивает количество обращений – выявляет, насколько хорошо организовано кеширование, показывает подробную статистику по каждому из тестов. Сохраняет скриншоты, как сайт выглядит на каждой секунде загрузки. Также в удобной форме демонстрирует, какая группа запросов заняла больше всего времени. Сервер находится в Далласе (США).

Еще один полезный инструмент для теста скорости сайта. Отображает много сводной информации, также хранит историю, чтобы можно было сравнить, насколько улучшилась или ухудшилась скорость загрузки. Подгружает рекомендации Yahoo и Google для оптимизации скорости, сортируя их по приоритету. Тестовый сервер находится в Ванкувере (Канада).

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

Анализирует загрузку сайта с разных участков Земли — серверы в США, Европе и Азии. Отображает сводную статистику по каждому тесту.

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

Массовая проверка скорости сайта. Можно задавать до 10 адресов – сравнивая таким образом время загрузки и размер документа для каждого из ресурсов.

Отчет по загрузке страницы и всех дополнительных скриптов/стилей/изображений. Простой и часто необходимый инструмент.

Некоторые сервисы (например, PageSpeed Insights) в подробностях  показывают нам рекомендации по исправлению ошибок для увеличения СЗС нашего веб-ресурса.

 

к содержанию ↑

Ускоряем загрузку сайта

 

  1. Для начала нужно уменьшить вес изображений на сайте.


Прежде чем выложить картинку, можно, например, прогнать ее через функцию в фотошопе – сохранить для web. Так же, можно использовать следующие программы: Paint.NET, Ulead PhotoImpact, ACDSee System и другие.

Суть здесь в том, что самый большой объем имеют файлы с расширением .bmp, .tif и .png – их нужно перевести в формат .jpg или .jpeg с помощью программ, указанных выше, используя функцию «сохранить как» и выбрав нужные нам расширения. «Тяжелые» форматы имеют лучшее качество, но оно неотличимо от .jpg глазом человека.

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

  1. Максимально упростить код JavaScript и CSS.


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

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

  1. Использовать кэш браузера.


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

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

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


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

Начиная с версии протокола HTTP/1.1, веб-клиенты указывают, какие типы сжатия они поддерживают, устанавливая заголовок Accept-Encoding в HTTP-запросе.

  • Accept-Encoding: gzip, deflate

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

  • Content-Encoding: gzip

Переданные таким образом данные меньше первоначальных примерно в 5 раз, и это существенно ускоряет их доставку. Однако здесь есть один недостаток: увеличивается нагрузка на веб-сервер. Но вопрос с сервером всегда можно решить. Так что не будем обращать на это внимание.

  1. Помещать CSS файлы в начале страницы, а javascript в конце.


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

Если размещать CSS файлы внизу страницы, то это не позволяет многим браузерам рендерить страницу постепенно. Это объясняется тем, что браузер «не хочет» перерисовывать элементы, у которых после загрузки страницы может измениться стиль. Так что все свои CSS файлы всегда подключайте в верхней части страницы в секции HEAD.

Помещая javascript-файлы вниз страницы, мы позволяем браузеру загрузить страницу с контентом в первую очередь, а уже потом начать загрузку javascript-файлов. Если же Ваш сайт идет в ногу со временем и содержит все возможные интерактивные «примочки», то этих javascript-файлов может быть несколько и весить они могут несколько сотен килобайт, поэтому перед загрузкой страницы заставлять пользователя ждать пока загрузятся все Ваши javascipt-файлы губительно.

Кроме того, внешние .js-файлы блокируют параллельную загрузку. Спецификация HTTP/1.1 советует, чтобы браузеры параллельно загружали не более 2-х компонентов веб-страницы с одного хоста. Таким образом, если картинки для вашего сайта располагаются на разных хостах, вы получите более 2-х параллельных загрузок. А когда загружается скрипт, браузер не будет начинать никаких других загрузок, даже с других хостов.

 

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

Оставить комментарий

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>