Как ускорить загрузку сайта
Скорость загрузки сайта – расстояние, поделенное на время, за которое браузер обрабатывает веб-документ и делает его доступным пользователю. Это языком физики.
Если документ или веб-страница будут долго загружаться – клиент уйдет, так и не посетив страницу нашего ресурса. Именно по этой причине поисковики стараются показывать в выдаче сайты с быстрой загрузкой страниц. Они поднимают в поиске быстрые сайты и пессимизируют медленные, то есть опускают их на дно.
Поисковые системы давно дали понять, что скорость загрузки страниц (СЗС) сайта является очень важным показателем при продвижении сайта.
Один и тот же сайт, в зависимости от того, как он был сделан разработчиками, может показывать разную СЗС. Этот показатель мы можем определить с помощью различных сервисов и повлиять на него самостоятельно, либо прибегнув к помощи программистов.
к содержанию ↑
10 лучших бесплатных онлайн-инструментов для проверки скорости загрузки страниц сайта
- PageSpeed Insights от Google.
Показывает значение от 0 до 100 как для компьютеров, так и для мобильных устройств. Тут же указывает на слабые места сайта и дает рекомендации по оптимизации скорости.
Дает оценку по скорости, показывает количество обращений к серверу и среднее время загрузки. В сводной таблице подробно отображет данные по каждому запросу к серверу (стили, скрипты, изображения и др). Легко оценить, что именно на сайте замедляет загрузку.
Загружаете два сайта для сравнения (себя и конкурента), визуально наблюдаете, кто загружается быстрее (удобно демонстрировать клиентам). В конце загрузки отображается информация, какой сайт выиграл и во сколько раз быстрее он загрузился.
Загружает страницу два раза, сравнивает количество обращений – выявляет, насколько хорошо организовано кеширование, показывает подробную статистику по каждому из тестов. Сохраняет скриншоты, как сайт выглядит на каждой секунде загрузки. Также в удобной форме демонстрирует, какая группа запросов заняла больше всего времени. Сервер находится в Далласе (США).
Еще один полезный инструмент для теста скорости сайта. Отображает много сводной информации, также хранит историю, чтобы можно было сравнить, насколько улучшилась или ухудшилась скорость загрузки. Подгружает рекомендации Yahoo и Google для оптимизации скорости, сортируя их по приоритету. Тестовый сервер находится в Ванкувере (Канада).
Сервис тестирует, насколько сайт выдерживает нагрузку (легкий DDOS). Эмулируется несколько десятков пользователей и более сотни активных соединений. Так как тест длится несколько минут, то в это время нагрузки можно использовать и другие инструменты для оценки скорости загрузки страниц в час пик. По окончанию теста можно посмотреть график, как меняется скорость загрузки от количества активных пользователей.
Анализирует загрузку сайта с разных участков Земли — серверы в США, Европе и Азии. Отображает сводную статистику по каждому тесту.
Посылает запросы к анализируемой страницы с разных датацентров (около 30 серверов) и определяет скорость для каждого из них. Подсвечивает лучшие, худшие и средние показатели по времени и скорости.
Массовая проверка скорости сайта. Можно задавать до 10 адресов – сравнивая таким образом время загрузки и размер документа для каждого из ресурсов.
Отчет по загрузке страницы и всех дополнительных скриптов/стилей/изображений. Простой и часто необходимый инструмент.
Некоторые сервисы (например, PageSpeed Insights) в подробностях показывают нам рекомендации по исправлению ошибок для увеличения СЗС нашего веб-ресурса.
к содержанию ↑
Ускоряем загрузку сайта
- Для начала нужно уменьшить вес изображений на сайте.
Прежде чем выложить картинку, можно, например, прогнать ее через функцию в фотошопе – сохранить для web. Так же, можно использовать следующие программы: Paint.NET, Ulead PhotoImpact, ACDSee System и другие.
Суть здесь в том, что самый большой объем имеют файлы с расширением .bmp, .tif и .png – их нужно перевести в формат .jpg или .jpeg с помощью программ, указанных выше, используя функцию «сохранить как» и выбрав нужные нам расширения. «Тяжелые» форматы имеют лучшее качество, но оно неотличимо от .jpg глазом человека.
Еще один способ уменьшить вес большой фотографии – изменить разрешение. На выходе мы получаем облегченное фото без потери качества изображения.
- Максимально упростить код JavaScript и CSS.
Минимизация (упрощение) кода – это удаление всех лишних или не существующих символов с целью уменьшения объема файла и ускорения его загрузки. В таком коде удаляются все комментарии и незначащие пробелы, переносы строк, символы табуляции.
Соответственно, чем меньше получаемый на выходе объем файла, тем меньше времени понадобится браузеру на его загрузку. Для этого существуют специальные сервисы: Refresh-SF, JSCompress и т.д.
- Использовать кэш браузера.
Когда посетитель впервые заходит на сайт, браузер выполняет загрузку всех javascript, css и медиафайлов. Однако, если правильно выставить http-заголовок, мы сделаем компоненты страницы кэшируемыми. Таким образом, когда пользователь вновь зайдет на сайт или перейдет на следующую страницу нашего ресурса, в кэше его браузера уже будут находиться некоторые нужные файлы и браузеру больше не понадобится загружать их снова.
Для более подробного изучения этого способа необходимо читать статьи именно в этой тематике.
- Включить GZIP-сжатие.
Для этого необходимо использовать файл .htaccess, который находится в корне нашего сайта. Это сжатие позволяет быстрее отправлять файлы с сервера к браузеру. Переданные таким образом данные меньше первоначальных в 4-5 раз, что существенно ускоряет загрузку страницы.
Начиная с версии протокола HTTP/1.1, веб-клиенты указывают, какие типы сжатия они поддерживают, устанавливая заголовок Accept-Encoding в HTTP-запросе.
- Accept-Encoding: gzip, deflate
Если веб-сервер видит такой заголовок в запросе, он может применить сжатие ответа одним из методов, перечисленных клиентом. При выдаче ответа посредством заголовка Content-Encoding сервер уведомляет клиента о том, каким методом сжимался ответ.
- Content-Encoding: gzip
Переданные таким образом данные меньше первоначальных примерно в 5 раз, и это существенно ускоряет их доставку. Однако здесь есть один недостаток: увеличивается нагрузка на веб-сервер. Но вопрос с сервером всегда можно решить. Так что не будем обращать на это внимание.
- Помещать CSS файлы в начале страницы, а javascript в конце.
Помещая подключение к css файлам в хедере страницы, мы получаем постепенную загрузку — сначала заголовок, потом лого наверху, навигация и т.д. – а это в свою очередь служит отличным индикатором загрузки страницы для пользователя и улучшает общее впечатление от сайта.
Если размещать CSS файлы внизу страницы, то это не позволяет многим браузерам рендерить страницу постепенно. Это объясняется тем, что браузер «не хочет» перерисовывать элементы, у которых после загрузки страницы может измениться стиль. Так что все свои CSS файлы всегда подключайте в верхней части страницы в секции HEAD.
Помещая javascript-файлы вниз страницы, мы позволяем браузеру загрузить страницу с контентом в первую очередь, а уже потом начать загрузку javascript-файлов. Если же Ваш сайт идет в ногу со временем и содержит все возможные интерактивные «примочки», то этих javascript-файлов может быть несколько и весить они могут несколько сотен килобайт, поэтому перед загрузкой страницы заставлять пользователя ждать пока загрузятся все Ваши javascipt-файлы губительно.
Кроме того, внешние .js-файлы блокируют параллельную загрузку. Спецификация HTTP/1.1 советует, чтобы браузеры параллельно загружали не более 2-х компонентов веб-страницы с одного хоста. Таким образом, если картинки для вашего сайта располагаются на разных хостах, вы получите более 2-х параллельных загрузок. А когда загружается скрипт, браузер не будет начинать никаких других загрузок, даже с других хостов.
P.s.: Данная статья рассчитана на людей, желающих самостоятельно заниматься продвижением интернет-ресурсов. В ней мы рассмотрели главные рекомендации по уменьшению времени загрузки сайта. Некоторые из них Вы можете выполнить самостоятельно, некоторые только с помощью программистов. Для более подробного изучения информации, упомянутой в статье, необходимо с головой погружаться в тематику или предоставить эту работу акулам отрасли.