Ускорение загрузки сайта: от браузера до сервера

Россия+7 (495) 960-65-87
Шрифт:
0 12998

Статья написана в рамках статейного конкурса Serpstat и SEOnews.

Условия конкурса

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

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

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

  1. Где находится сервер (или сервера) с которых загружается контент? Здесь подразумеваем географическое расстояние между сервером и клиентом.
  2. Какой контент передает сайт? HTML-код, изображения, CSS, JavaScript и прочее. Это так называемый Front-end сайта.
  3. Как идет передача контента страницы? Существует ряд распространенных методов ускорения передачи контента в сети Интернет, их мы также непременно рассмотрим.
  4. Каким способом этот контент генерируется? Время статичных сайтов, работающих на одних лишь HTML и CSS практически ушло. На современном сайте используется гораздо больше технологий - это, по крайней мере, базы данных и серверные языки программирования, такие как PHP и ASP. Эту область сайта называют Back-end’ом.

Рассмотрим вкратце, как можно улучшить производительность по каждому из этих процессов.

Удаленность сервера от клиента

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

Географическая удаленность

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

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

DNS

DNS - технология сопоставления доменного имени и IP-адреса сервера. Когда браузер обращается к доменному имени сайта, запрос проходит череду DNS-серверов, каждый из которых отвечает за свою зону (например, географическую или доменную). Последний из цепочки DNS-серверов возвращает IP-адрес сервера, после чего начинается загрузка страницы. Конечно же, на это требуется определенное время.

Стоит заметить, что DNS-запросы идут по каждому домену. То есть, если на странице открываются изображения или скрипты с других доменов, по каждому из них отправляются запросы к DNS-серверам. Однако, для клиента это незаметно, так как процесс происходит параллельно загрузке основного контента страницы.

К счастью, описанные выше «детские» проблемы Интернета сейчас стоят не так остро, как раньше. Если DNS-сервера работают нормально, процесс обращения и подключения к серверам редко занимает более 1-2% времени полной загрузки страницы.

Контент страницы

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

Изображения

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

  • Изображение имеет очень большой размер (в пикселях). На странице оно масштабируется при помощи CSS-стилей, но файл все равно загружается браузером полностью.
  • Нерационально используется формат изображения. Например, объем изображения в формате PNG-24 в несколько раз больше, чем в JPEG.
  • Разрешение изображения значительно больше, чем требуется. Большинство современных мониторов одинаково отображают изображения разрешением выше 96 dpi (120 dpi на передовых моделях). На сайты же порой попадают файлы разрешения 300 dpi - макеты для печати и более, например, необработанные фото с цифрой камеры.

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

Узнать объем уже размещенных изображений не сложно. Если их количество невелико, и вы знаете где они расположены, достаточно подключиться к серверу по FTP и посмотреть статистику файлов. Если же изображений много, и все они находятся в разных папках, используйте программное обеспечение. При помощи бесплатной Xenu Link Sleuth можно просканировать сайт и собрать статистику с адресами, форматами и объемом изображений. Отобрать «тяжелые» изображения легко при помощи отчета Xenu, а скачать «оптом» можно, к примеру, утилитой wget.

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

Конечно, не все файлы сайта загружаются последовательно, иначе все страницы открывались бы невероятно долго. Широко распространенный сейчас стандарт передачи данных HTTP1.1 (оригинал спецификации, для особо любопытных) позволяет загружать параллельно несколько файлов с одного домена. Но на современных сайтах количество файлов очень велико, и возможностей этого стандарта уже недостаточно.

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

Стили и программный код

В коде страниц, конечно, встречаются не только изображения, загрузка других файлов идет по тем же правилам. Для файлов CSS-стилей и скриптов (например, JavaScript) проблема та же - объем файлов и их количество.

Но в отличии от изображений, здесь на результат влияет грамотность и желание разработчиков. При желании и объем, и количество файлов можно минимизировать на этапе создания сайта, хотя на практике это делается редко.

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

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

На помощь приходит технология по оптимизации размера и количества файлов JavaScript и CSS, получившая обобщенное название “Minify” (минификация). По этому названию вы сможете найти множество онлайн-сервисов, способных автоматически сжимать и объединять js- и css-файлы для обеспечения наилучшей производительности.

К сожалению, разработчики подобных сервисов не несут ответственности за результаты их работы. Так что не забудьте сделать резервную копию всех изменяемых файлов перед экспериментами!

Оптимизация передачи контента

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

Компрессия текстовых данных

Широко распространенный метод, регламентированный в стандарте HTTP1.1, и поддерживаемый фактически всеми серверами и клиентами. Как правило, используется алгоритм сжатия Gzip, являющийся стандартными для всех Unix-систем.

Браузер обращается к серверу со списком поддерживаемых технологий сжатия (запросом Accept-Encoding), сервер возвращает заголовок Content-Encoding: gzip, что означает что контент страницы будет передан в сжатом gzip архиве. Сам метод сжатия близок с стандартным Zip-архивам.

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

Gzip-сжатие широко распространено и по умолчанию работает на большинстве сайтов. Проверить, отдает ли ваш сайт контент в сжатом таким образом виде можно практически любым из инструментов, проверяющих ответ сервера, например, «Проверка ответа сервера» в Яндекс.Вебмастере. Если сжатие включено, в отчете вы увидите вышеупомянутый Content-Encoding: gzip.

Если все же компрессия не работает, в большинстве случаев вы сможете самостоятельно активировать ее при помощи файла .htaccess. Для этого нужно добавить в него инструкции AddOutputFilterByType DEFLATE с типами данных, которые нужно сжимать. Например, для HTML, CSS и JavaScript инструкции будут выглядеть следующим образом:

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE application/javascript

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

Браузерное кэширование

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

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

Главные из них:

Expires – содержит дату и время (по Гринвичу), до достижения которой контент можно считать контент актуальным. Например, Expires: Fri, 13 Oct 2017 13:59:58 GMT означает что браузер может использовать кэш страницы, не запрашивая ее у сервера, до пятницы 13-го октября 2017 года.

Cache-Control – позволяет задавать время актуальности кэша в секундах, относительно времени запроса, а также ограничивать кэширование, например, на публичных proxy-серверах или непосредственно в браузерах. Также кэширование можно и вовсе запретить.

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

Last-Modified – хранит время последнего изменения страницы. Клиент сохранит дату и при следующем посещении добавит запрос If-Modified-Since, содержащий сохраненное значение. Если страница с этого времени не изменилась, сервер возвращает ответ 304 Not Modified, то есть страница не изменилась, и ее еще можно загружать из кэша.

Etag можно считать гораздо более удобным, чем предыдущий вариант. Данный заголовок проводит валидацию кэша не по времени, а на основе произвольного алгоритма. При каждом обращении сервер должен генерировать Etag на основе заданного ему алгоритма, от которого и зависит правильность обработки.
Например, на странице интернет-магазина размещено 10 товаров, алгоритм может объединить артикулы этих товаров в единую строку, рассчитывать ее хэш-сумму и выводить эти данные в Etag. Таким образом, пока на странице находятся именно эти 10 товаров, заголовок всегда будет иметь одно и то же содержимое и страница будет загружаться из кэша.
Недостатком Etag, вернее, алгоритма его генерации, можно считать вероятность коллизии – ситуации, когда на основе разного контента получается одинаковая строка. Устойчивость к коллизиям нужно предусмотреть на стадии проектирования алгоритма генерации значений.

Проверки актуальности кэша можно упрощенно описать так:

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

При отсутствии всех заголовков, страница не будет кэшироваться вовсе.

Возможностей настройки отдачи описанных выше заголовков три:

  1. Генерировать на стадии создания страницы при помощи php или другого серверного языка программирования.
  2. Настроить отдачу сервером при помощи файла .htaccess.
  3. Скорректировать данные непосредственно на сервере.

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

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

HTML-кэш на жестком диске

Еще одним вариантом является размещение на жестком диске HTML-кэша динамических страниц. При первом обращении к странице, сервер генерирует ее, включая все запросы к базе данных, исполнение php-кода и другие действия на сервере. Копия страницы сохраняется на жестком диске и выдается клиентам при последующих обращениях (от любого посетителя).

Помимо кэширования страниц целиком подобные алгоритмы могут работать с отдельными SQL-запросами, сохраняя их результаты на диск. Кроме того, технология memcached позволяет сохранять кэш в оперативной памяти сервера, что позволяет генерировать страницы максимально оперативно. Однако из-за слишком объемного кэша оперативной памяти может стать недостаточно для нормального функционирования сайта, так что использование и само внедрение memcached следует доверить профессионалам.

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

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

Асинхронная загрузка JavaScript

Подключение внешних файлов JavaScript уменьшает скорость полной загрузки страницы, так как на время их обработки приостанавливается загрузка другого контента страницы. Именно из-за этого такие сервисы как Google PageSpeed Insights рекомендуют переносить скрипты из лока страницы как можно ниже, вплоть до футера.

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

(Нет голосов)
Читайте нас в Telegram - digital_bar

Есть о чем рассказать? Тогда присылайте свои материалы Даше Калинской


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
    ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
    Рейтинг Известности 2018: старт народного голосования
    Михаил Р
    1
    комментарий
    0
    читателей
    Полный профиль
    Михаил Р - 1. Demis 2. кокс 3. Ашманов 4. Скобеев 5. Digital Strategy
    Тест: Кто как пробежал, или Итоги клиентского рейтинга SEOnews 2018
    Анна Макарова
    338
    комментариев
    0
    читателей
    Полный профиль
    Анна Макарова - Друзья, спасибо всем за участие! Мы определили победителей. Кто ими стал - вы найдете по ссылке: www.seonews.ru/events/darim-knigi-ot-mif-pobediteli-opredeleny/ Если вы стали одним из победителей, обязательно свяжитесь с нами по указанной в новости (по ссылке выше) почте. Всем хороших выходных! =)
    SEO глазами клиентов 2018
    Артур Якушев
    1
    комментарий
    0
    читателей
    Полный профиль
    Артур Якушев - >сейчас же сложно найти агентства, которые специализируются только на SEO Не так и сложно найти нас www.msk.lapkinlab.ru
    Рейтинг Известности 2018: второй этап народного голосования
    Константин Сокол
    3
    комментария
    0
    читателей
    Полный профиль
    Константин Сокол - Кто был ответственный за дизайн таблицы голосования? Копирайтер?
    Комплексный аудит интернет-магазина от «Ашманов и партнеры». Часть 1
    Александр Сова
    1
    комментарий
    0
    читателей
    Полный профиль
    Александр Сова - А вот и сеошники подъехали, покидать на вентилятор :D
    Кейс: вывод лендинга по изготовлению флагов на заказ в ТОП 1 по Санкт-Петербургу
    utka21
    4
    комментария
    0
    читателей
    Полный профиль
    utka21 - Кейс как кейс. Для некоторых станет вполне возможно полезным. ( Для конкурентов точно) . А вот с комментариями , что то пошло не так )
    Не очень удачный кейс продвижения сайта по услуге «Трезвый водитель» в Москве
    Кирилл Щербаков
    3
    комментария
    0
    читателей
    Полный профиль
    Кирилл Щербаков - "даже пришлось подключить отслеживание звонков с сайта" "Даже" - как будто это что-то нереальное
    Как использовать Python для LSI-копирайтинга
    Evgeny Montana
    6
    комментариев
    0
    читателей
    Полный профиль
    Evgeny Montana - спасибо)
    Стартовал сбор заявок на участие в рейтинге «Известность бренда SEO-компаний 2018»
    Артем Первухин
    1
    комментарий
    0
    читателей
    Полный профиль
    Артем Первухин - Make KINETICA Great Again!
    Эксперимент: как уникальность контента влияет на продвижение сайта
    Ilia Nazmutdinov
    2
    комментария
    0
    читателей
    Полный профиль
    Ilia Nazmutdinov - Кстати, ПФ не работают на нулевом трафике. Пока на сайт не льются тысячи показов по одним и тем же запросам влияние оказывает ток ссылочное\внешнее и внутреннее\ и внутренняя оптимизация.
    ТОП КОММЕНТАТОРОВ
    Комментариев
    910
    Комментариев
    834
    Комментариев
    554
    Комментариев
    540
    Комментариев
    483
    Комментариев
    373
    Комментариев
    338
    Комментариев
    262
    Комментариев
    241
    Комментариев
    171
    Комментариев
    156
    Комментариев
    137
    Комментариев
    121
    Комментариев
    98
    Комментариев
    97
    Комментариев
    97
    Комментариев
    96
    Комментариев
    80
    Комментариев
    67
    Комментариев
    61
    Комментариев
    60
    Комментариев
    59
    Комментариев
    57
    Комментариев
    55
    Комментариев
    54

    Отправьте отзыв!
    Отправьте отзыв!