Osfonder's blog Just another wd weblog

23Апр/100

Разработка сайтов: Процесс загрузки страницы

Занимаясь оптимизацией работы сайта нужно хорошо представлять, что происходит после того, как посетитель, набрав адрес, нажал клавишу Enter.
Почему тема оптимизации загрузки сайта важна? Дело в том, что интернет сейчас и десять лет назад сильно отличаются. Сейчас люди ожидают, что загрузка должна происходить быстро. А многие, в том числе и поисковые роботы, слишком долго прождав требуемую страницу, просто закроют её (using site speed in web search ranking).

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

Итак, что происходит после того, как пользователь ввел http://osfonder.ru/blog/ и нажал Enter? Заканчивается это все тем, что вылезет список постов, но до этого...

Визуально процесс выглядит так:

У вас отключен JavaScript. Воспользуйтесь ссылкой ниже для просмотра ролика.



оригинал на сайте bbc

1. DNS

Любой сайт в сети физически располагается на каком-либо сервере. Это компьютер, который постоянно работает и подключен к сети. Каждый сервер имеет, как минимум, один IP адрес. Он позволяет сей сервер уникально идентифицировать. IP адрес — это четыре числа от 0 до 255 разделенных точкой.
И после того как был нажат enter, браузер(читай компьютер) пользователя должен каким-то образом определить к какому серверу(читай IP адресу) относиться адрес osfonder.ru.

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

2. Маршрутизация

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

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

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

Для примера, зайдите на cnn.com, а затем на lenta.ru и почувствуйте разницу. Если вы находитесь на территории РФ скорее всего лента.ру загрузиться быстрее. И дело в том, что в первом случае информация полетит по проводам в Атланту и из Атланты к вам(скорее всего через Москву и Санкт-Петербург), а во втором — ограничиться Москвой. В первом случае количество промежуточных роутеров порядка 50-ти, во втором меньше 10. Каждый из них создает незначительную задержку.

3. Передача данных

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

Еще чуть технической информации и дальше пояснение.
Браузеру(компьютеру) требуются какие-либо данные от сервера. Я ввожу http://lenta.ru нажимаю Enter, значит мне нужна главная страница новостей. Браузер устанавливает соединение пройдя вышеописанный процесс и говорит серверу: "мне нужна главная страница сайта lenta.ru",
а буквально передает серверу

GET / HTTP/1.1
Host: lenta.ru
+ еще немного информации о себе и почти всегда cookie данные

Это называется HTTP запрос.
Сервер говорит: "хорошо у меня есть такая страница"(200 OK + еще немного информации) и начинается передача данных. Т.е. html кода этой страницы. После передачи соединение закрывается.

Любой сайт использует внешние файлы. Проще говоря — это картинки, css-стили, js-скрипты. И для каждого из них выполняется процесс маршрутизации, устанавливается новое соединение и вышеописанная операция повторяется. Чувствуете?
Например, в админ-панели последней версии UMI-CMS загружается около 70-ти внешних файлов(без учета системных xml). Что, в принципе, можно оптимизировать.
Админ-панель подходящий случай, т.к. подразумевает частое использование, её оформление не меняется, а потому может и должна работать быстро. И скорость загрузки админки UMI, чуть не единственная претензия нашего отдела сопровождения к ней.
Но не стоит умолять важность скорости загрузки любых страниц и веб-приложений.

Заключение

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

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

Посты по теме

  1. 10 Золотых принципов успешных Веб-приложений
  2. Используйте CDN для ускорения своих сайтов
  3. Способы ускорения загрузки страницы часть 1
  4. Способы ускорения загрузки страницы часть 2
  5. Способы ускорения загрузки страницы часть 3
Комментарии (0) Пинги (0)

Пока нет комментариев.


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


Нет обратных ссылок на эту запись.