Поради щодо створення швидко завантажуваних HTML-сторінок - Дізнайтеся про MDN веб-розробки
Перейти до розділу
Ці поради базуються на загальних знаннях та експериментах.
Оптимізована веб-сторінка не тільки забезпечує більш адаптивний веб-сайт для ваших відвідувачів, але також зменшує навантаження на ваші веб-сервери та підключення до Інтернету. Це може мати вирішальне значення для великих сайтів або сайтів, що мають різкий трафік через незвичні обставини, такі як останні новини.
Оптимізація продуктивності завантаження сторінок стосується не лише вмісту, який переглядатимуть вузькосмуговий комутований або мобільний пристрій. Це так само важливо для широкосмугового контенту і може призвести до значних поліпшень навіть для ваших відвідувачів із найшвидшими зв’язками.
Зменшіть вагу сторінки
Вага сторінки на сьогоднішній день є найважливішим фактором ефективності завантаження сторінки.
Зменшення ваги сторінки за рахунок усунення непотрібних пробілів та коментарів, відомих як мінімізація, та переміщенням вбудованого сценарію та CSS у зовнішні файли, може покращити продуктивність завантаження з мінімальною необхідністю інших змін у структурі сторінки.
Такі інструменти, як HTML Tidy, можуть автоматично вилучати пробіли та зайві порожні рядки з дійсного джерела HTML. Інші інструменти можуть "стискати" JavaScript шляхом переформатування джерела або затуманення джерела та заміни довгих ідентифікаторів на коротші версії.
Мінімізуйте кількість файлів
Зменшення кількості файлів, на які посилається веб-сторінка, зменшує кількість HTTP-з'єднань, необхідних для завантаження сторінки, тим самим скорочуючи час надсилання цих запитів та отримання їх відповідей.
Залежно від налаштувань кешу браузера, він може надіслати запит із заголовком If-Modified-Since для кожного файлу, на який посилається, запитуючи, чи файл було змінено з часу останнього завантаження. Занадто багато часу, витраченого на запит останнього зміненого часу файлів, на які посилаються, може затримати початкове відображення веб-сторінки, оскільки браузер повинен перевірити час модифікації кожного з цих файлів, перш ніж відображати сторінку.
Якщо ви багато використовуєте фонові зображення у своєму CSS, ви можете зменшити кількість необхідних пошуків HTTP, об'єднавши зображення в одне, відоме як спрайт зображення. Потім ви просто застосовуєте одне і те ж зображення кожного разу, коли вам це потрібно для фону, і відповідно налаштовуєте координати x/y. Цей прийом найкраще працює з елементами, які матимуть обмежені розміри, і не буде працювати при кожному використанні фонового зображення. Однак менша кількість запитів HTTP та кешування окремих зображень може допомогти зменшити час завантаження сторінки.
Використовуйте мережу доставки вмісту (CDN)
Для цілей цієї статті CDN є засобом зменшення фізичної відстані між вашим сервером та вашим відвідувачем. Зі збільшенням відстані між початком сервера та відвідувачем час завантаження збільшується. Припустимо, що сервер вашого веб-сайту знаходиться у Сполучених Штатах і відвідувач із Індії; час завантаження сторінки буде набагато вищим для відвідувача з Індії порівняно з відвідувачем із США.
CDN - це географічно розподілена мережа серверів, які працюють разом, щоб скоротити відстань між користувачем та вашим веб-сайтом. CDN зберігають кешовані версії вашого веб-сайту та обслуговують їх відвідувачам через мережевий вузол, найближчий до користувача, зменшуючи тим самим затримку.
Скоротіть пошук доменів
Оскільки кожен окремий домен витрачає час на пошук у DNS, час завантаження сторінки зростатиме разом із кількістю окремих доменів, що з’являються у посиланнях (CSS) та JavaScript та src (-ах) зображень.
Це не завжди може бути практично; однак завжди слід подбати про те, щоб використовувати лише мінімально необхідну кількість різних доменів на своїх сторінках.
Кеш повторно використаний вміст
Переконайтеся, що будь-який вміст, який може бути кешований, кешований та з відповідним часом закінчення.
Зокрема, зверніть увагу на заголовок Last-Modified. Це дозволяє ефективно кешувати сторінки; за допомогою цього заголовка інформація передається користувацькому агенту про файл, який він хоче завантажити, наприклад, коли він востаннє був змінений. Більшість веб-серверів автоматично додають заголовок останньої модифікації до статичних сторінок (наприклад, .html, .css) на основі дати останньої зміни, збереженої у файловій системі. З динамічними сторінками (наприклад .php, .aspx) цього, звичайно, зробити не можна, і заголовок не надсилається.