➡️ Знайти сервер
Коли браузер шукає сервер, перше що він робить це шукає його у себе. Якщо ви вже відвідували цей сайт - проблем не буде, відповідь буде майже миттєва. Якщо ж в кеші адреса не знайдеться, браузер піде на DNS сервер. Якщо і там нічого не буде - запит піде далі до наступного DNS серверу, аж поки не дійде до кореневих серверів. Як ви розумієте - на це потрібен час
Рішення: розмістити DNS записи на спеціалізованих серверах. Наприклад заплатити Cloudflare які обіцяють відповідь на DNS запит за 11ms замість 60-150ms. І так є ті хто платять за ці 50ms різниці.
➡️ Встановити з ним зв'язок
Після того як ми знайшли адресу бажаного серверу - настав час "знайомитись". Ця процедура називається handshake і передбачає певну кількість запитів-відповідей. Проблема тут полягає в тому, що якщо сервер живе десь у Болівії, а ви у Києві, то на це може піти значно більше часу, ніж ви очікували через банальну фізику процесів.
Рішення - перенесення серверів поближче до користувачів, з чим нам допоможе або локальний хостінг, або CDN.
➡️ Запитати в нього ресурс і почати отримувати відповідь
Тут найбільшою проблемою є завантаженість (ну і також відстань). Якщо ваш сервер виконує певну роботу (CPU limit), або відправляє велику кількість відповідей (Network limit), або написаний через вухо бобра і синхронно логує запити до відправки даних - потрібно розвантажувати сервер.
Рішення - масштабування, кешування або знову таки CDN. Все аби розвантажити вас сервер. Тут, до-речі, економія може йти на 500+ ms на кожен ресурс, що досить суттєво
➡️ Обробити ресурс
Кожен ресурс має свою "ціну" за обробку. Для когось ця ціна маленька (наприклад HTML), а для когось досить велика - як раз наш улюблений JS. Саме тому, бюджетні мобільні телефони дуже довго відмальовують сайти з великою кількістю JavaScript. Вони його швидко отримують, а "прожувати" їх слабенький CPU не може.
Ще одна проблема полягає в тому, що не всі ресурси можна парсити під час завантаження. HTML, наприклад, можна, а от JS ми змушені чекати до самого кінця (вгадайте чому)
Рішення - зменшувати обсяг ресурсів. Викидати зайві ліби, "трясти дерева", зменшувати розмір зображень і таке інше.
➡️ "Виконати" ресурс
Якщо ви покладете на початку документу код накшталт
while(true){}, то всі ваші попередні оптимізації виявляться просто непотрібними - потік виконання буде заблокований і контент ви не побачити ніколи. Це саме стосується і інших ресурсів. Тому єдине рішення тут - писати адекватний код і використовувати ресурси розумно.
Отже ми з вами розібрали спрощену теорію завантаження окремого ресурсу. Але є маленький нюанс - в реальному житті м майже ніколи не завантажуємо лише один ресурс