Поради щодо створення швидко завантажуваних HTML-сторінок

Перейти до розділу

Ці поради базуються на загальних знаннях та експериментах.

Оптимізована веб-сторінка не тільки забезпечує більш адаптивний веб-сайт для ваших відвідувачів, але також зменшує навантаження на ваші веб-сервери та підключення до Інтернету. Це може мати вирішальне значення для великих сайтів або сайтів, що мають різкий трафік через незвичні обставини, такі як останні новини.

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

Зменшіть вагу сторінки

Вага сторінки на сьогоднішній день є найважливішим фактором ефективності завантаження сторінки.

Зменшення ваги сторінки за рахунок усунення непотрібних пробілів та коментарів, відомих як мінімізація, та переміщенням вбудованого сценарію та 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) цього, звичайно, зробити не можна, і заголовок не надсилається.

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

Оптимально впорядкувати компоненти сторінки

Спочатку завантажте вміст сторінки, а також будь-який CSS або JavaScript, які можуть знадобитися для її початкового відображення, щоб користувач отримав найшвидший видимий відгук під час завантаження сторінки. Цей вміст, як правило, є текстовим, і тому він може отримати вигоду від стиснення тексту під час передачі, забезпечуючи тим самим ще більш швидку відповідь користувачеві.

Будь-які динамічні функції, які вимагають завершення завантаження сторінки перед використанням, слід спочатку вимкнути, а потім активувати лише після завантаження сторінки. Це призведе до завантаження JavaScript після вмісту сторінки, що покращить загальний вигляд завантаження сторінки.

Зменште кількість вбудованих сценаріїв

Вбудовані сценарії можуть бути дорогими для завантаження сторінки, оскільки синтаксичний аналізатор повинен припустити, що вбудований скрипт може змінити структуру сторінки під час аналізу. Зменшення використання вбудованих сценаріїв загалом та зменшення використання document.write () для виведення вмісту, зокрема, може покращити загальне завантаження сторінки. Використовуйте сучасні методи AJAX для маніпулювання вмістом сторінки для сучасних браузерів, а не старіші підходи, засновані на document.write () .

Використовуйте сучасний CSS та дійсну розмітку

Використання сучасних CSS зменшує кількість розмітки, може зменшити потребу в (розпірних) зображеннях з точки зору макета і дуже часто може замінити зображення стилізованого тексту - що "коштує" набагато дорожче, ніж еквівалентний текст-і-CSS.

Використання дійсної розмітки має й інші переваги. По-перше, браузерам не буде потрібно виконувати виправлення помилок при синтаксичному аналізі HTML (це окрім філософського питання, чи дозволяти варіацію формату введення користувачем, а потім програмно "виправляти" або нормалізувати його; чи, натомість, застосовувати суворий формат введення без допусків).

Більше того, діюча розмітка дозволяє безкоштовно використовувати інші інструменти, які можуть попередньо обробити ваші веб-сторінки. Наприклад, HTML Tidy може видалити пробіли та необов’язкові кінцеві теги; однак він відмовиться запускати сторінку з серйозними помилками розмітки.

Частка вашого вмісту

Таблиці для макетів є застарілим методом, який більше не слід використовувати. Натомість слід використовувати макети, що використовують поплавці, позиціонування, flexbox або сітки.

Таблиці все ще вважаються допустимою розміткою, але їх слід використовувати для відображення табличних даних. Щоб браузер швидше відтворив вашу сторінку, вам слід уникати вкладання таблиць.

Замість глибоко вкладених таблиць, як у:

використовувати невкладені таблиці або div, як у

Зменште та стисніть активи SVG

SVG, що виробляється більшістю програм для малювання, часто містить непотрібні метадані, які можна видалити. Налаштуйте свої сервери, застосуйте стиснення gzip для ресурсів SVG.

Зменште та стисніть свої зображення

Великі зображення призводять до завантаження вашої сторінки більше часу. Подумайте про стиснення ваших зображень перед додаванням їх на свою сторінку, використовуючи функції стиснення, вбудовані в інструменти для обробки зображень, такі як Photoshop, або використовуючи спеціалізований інструмент, такий як Compress Jpeg або Tiny PNG,.

Вкажіть розміри для зображень та таблиць

Якщо браузер зможе негайно визначити висоту та/або ширину ваших зображень і таблиць, він зможе відобразити веб-сторінку без необхідності переформатування вмісту. Це не тільки пришвидшує відображення сторінки, але запобігає неприємним змінам у макеті сторінки, коли сторінка завершується завантаженням. З цієї причини для зображень, коли це можливо, слід вказувати висоту та ширину.

У таблицях слід використовувати селектор CSS: комбінація властивостей:

і повинен вказувати ширину стовпців за допомогою елементів і.

Використовуйте ліниве завантаження для зображень

За замовчуванням зображення завантажуються охоче; тобто зображення отримується і відображається, як тільки воно обробляється в HTML. Всі охоче завантажені зображення відображаються до того, як буде надіслана подія завантаження документа. Перехід на ліниве завантаження зображень говорить браузеру затримати завантаження зображень, поки вони не знадобляться для створення візуального вікна перегляду.

Щоб позначити зображення для ледачого завантаження, вкажіть його атрибут завантаження зі значенням ледачий. З цим набором зображення буде завантажуватися лише тоді, коли це потрібно.

Зверніть увагу, що завантажені ліниві зображення можуть бути недоступними під час запуску навантаження. Ви можете визначити, чи завантажується дане зображення, перевіривши, чи відповідає значення його логічної властивості повноти істинним .

Вибирайте вимоги до агента з розумом

Щоб досягти найбільших удосконалень у дизайні сторінок, переконайтеся, що для проектів вказані обґрунтовані вимоги до агента користувача. Не вимагайте, щоб ваш вміст здавався піксельним ідеальним у всіх браузерах, особливо не в браузерах нижчої версії.

В ідеалі ваші основні мінімальні вимоги повинні базуватися на врахуванні сучасних браузерів, що підтримують відповідні стандарти. Це може включати останні версії Firefox, Internet Explorer, Google Chrome, Opera та Safari.

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

За можливості використовуйте асинхронізацію та відстрочку

Зробіть сценарії JavaScript такими, щоб вони були сумісні як з атрибутами async, так і з defer, і використовуйте async, коли це можливо, особливо якщо у вас є кілька тегів сценарію.

Завдяки цьому сторінка може зупинити рендерінг, поки JavaScript все ще завантажується. В іншому випадку браузер не відображатиме нічого, що знаходиться після тегів сценарію, які не мають цих атрибутів.

Примітка. Незважаючи на те, що ці атрибути дуже допомагають при першому завантаженні сторінки, ви повинні використовувати їх, але не припускати, що вони будуть працювати у всіх браузерах. Якщо ви вже дотримуєтесь усіх найкращих практик JavaScript, вам не потрібно змінювати свій код.