Статичні сайти налаштування та оптимізація
Головним критерієм відмінної роботи сайту з погляду користувача є, звичайно, швидкість завантаження компонентів. Якщо сайт із тих чи інших причин завантажується надто довго, це неминуче призводить до втрати відвідувачів, яким набридає чекати. Щоб зробити сайт швидким і зручним, потрібно зробити певну роботу з його оптимізації.
Нижче ми дамо низку рекомендацій, за допомогою яких можна збільшити швидкість роботи статичного сайту, розміщеного в нашому сховищі.
Порада 1. Використовуйте можливості CDN
Про підключення до нашого хмарного сховища CDN від компанії Akamai ми вже писали. CDN зберігає весь статичний контент (зображення, текстові файли, JS, CSS і так далі) на серверах, що кешують, розкиданих по всьому світу (див. карту тут).
При зверненні до веб-сторінки або її ресурсів запит буде оброблено географічно найближчим до клієнта сервером, що кешує. Використання CDN допомагає збільшити швидкість завантаження сайту як для стаціонарних, так і для мобільних пристроїв.
За промовчанням всі дані кешуються в CDN на 24 години. Нещодавно до сховища було додано нову функцію, за допомогою якої можна очистити кеш CDN у будь-який момент:
Порада 2. Не забувайте про налаштування кешування
Будь-яка веб-сторінка включає багато різних елементів: зображення, скрипти, файли стилів і так далі. Користувач, який відвідує сторінку вперше, отримує всі ці елементи, виконавши низку запитів HTTP. Щоб уникнути повторного завантаження великої кількості файлів, використовується кешування.
В основі моделі кешування, що використовується в протоколі HTTP, лежать так звані валідатори - спеціальні заголовки, які використовуються клієнтом для того, щобпереконатися, що документ, що кешується, все ще актуальний. Завдяки валідаторам клієнт може перевіряти стан документа, не передаючи на сервер кешовану копію. У свою чергу, сервер передає у відповіді документ тільки в тому випадку, якщо отриманий валідатор свідчить про наявність у кеші клієнта застарілої копії.
Валідатори поділяються на сильні та слабкі. Сильні валідатори з'явилися у HTTP/1.1. Вони називаються так тому, що вони змінюються щоразу, коли змінюється файл. До них належать звані ETags (entity tags). ETag є ідентифікатором вмісту документа; він змінюється, якщо у документі зміниться хоча б один біт. Як ідентифікатор може використовуватися, наприклад, MD5-сума вмісту документа. Коли клієнт запитує з сервера документ, значення ETag передається у відповіді, наприклад:
При повторному запиті цього документа збережене значення валідатора передається вже в заголовку If-None-Match:
Якщо документ не було змінено, то у відповіді сервер поверне лише заголовки та код 304 Not Modified. Інакше сервер поверне код 200 та передасть нову версію документа, а також нове значення ETag для неї.
У нашому сховищі та ETag генерується відразу після завантаження файлу. Він є MD5-хеш вмісту. Якщо контент змінюється, змінюється і ETag.
Слабкими називаються валідатори, які не обов'язково змінюються при кожній зміні файлу.
Прикладом слабкого валідатора може бути заголовок Last-Modified. Значення цього заголовка – дата останньої зміни файлу. У нашому сховищі воно встановлюється автоматично. Якщо вказати при запиті в заголовку If-Modified-Since не раніше дату, тієї, яка в даний момент міститься в заголовку Last-Modified, товідповіддю також буде 304 Not Modified.
Сильні валідатори можуть використовуватись у будь-якому контексті. Слабкі валідатори використовуються в контексті, який не залежить від точного вмісту файлу.
Наприклад, валідатори обох типів можуть бути використані в GET-запитах з умовою (If Modified Since або If None Match). Однак при завантаженні файлів частинами можуть використовуватися тільки сильні валідатори - інакше клієнт отримає файл у неконсистентному вигляді.
Порада 3. Зверніть увагу на заголовок Cache-Control
Для встановлення терміну зберігання в кеші браузера копії файлу, оригінал якого знаходиться в сховищі, використовується заголовок Cache-Control з директивою max-age. Завдяки цьому заголовку можна досить сильно збільшити швидкість завантаження сайту – якщо файл закешований, то браузер миттєво відображатиме контент із кешу, не роблячи жодного запиту до сайту. Час зберігання файлу в кеші вказується в секундах:
У наведеному прикладі воно становить 7200 секунд (2 години). Зазвичай у такий спосіб кешуються CSS, JS та графічні файли. Їх бажано кешувати назавжди, а при зміні вмісту змінювати посилання на них у HTML. У RFC 2616 для таких файлів рекомендується вказувати час кешування, що не перевищує 1 рік:
Якщо потрібно, щоб певний файл не кешувався, а завжди віддавався «свіжим», для заголовка Cache-Control встановлюється таке значення:
Воно вказує, що елемент взагалі не повинен кешуватися і що клієнт повинен вимагати його при кожному зверненні до сховища (час завантаження файлу в цьому випадку збільшиться, тому що доведеться завантажити тіло файлу).
Ще один спосіб, за допомогою якого можна завжди отримувати файл у актуальній версії, полягає у додаванні до імені файлуконтрольної суми вмісту.
Отримати контрольну суму можна як за допомогою стандартних утиліт md5sum або sha1sum, так і за допомогою спеціальних утиліт.
Для HTML-сторінок краще встановлювати для заголовка Сache-Control значення no-cache. Якщо потрібно щось терміново змінити на сторінці, а у клієнта ця сторінка вже закешована (сучасні браузери роблять це за замовчуванням), клієнт може взагалі не побачити внесених змін.
Це особливо важливо при використанні CDN: СDN Akamai за замовчуванням кешує файли без відповідних заголовків на 24 години. Можна, звичайно, очистити кеш (див. вище), але доведеться ще чекати щонайменше 15 хвилин після надсилання відповідного запиту. Встановлення значення no-cache допоможе уникнути можливих проблем — сторінка завжди буде завантажуватися в актуальному вигляді. Браузери в цьому випадку будуть використовувати заголовки If-None-Match (або If-Modified-Since), і сторінка, яка не була змінена, не завантажуватиметься зайвий раз.
У деяких випадках час кешування HTML-сторінок краще вказувати, виходячи з частоти змін. Наприклад, якщо сторінка з новинами на сайті оновлюється щогодини, то для max-age можна встановити значення 3600 (1 година).
Значення заголовка Cache-Control (як і інших HTTP-заголовків) у нашому сховищі можна встановити через веб-інтерфейс:
Через веб-інтерфейс встановлюються значення заголовків лише для контейнера загалом. Значення заголовків для окремих файлів можна встановити лише через API або за допомогою сторонніх клієнтів.
Замість Cache-Control можна використовувати заголовок Expires. У його значенні вказується дата у форматі RFC 1123 date format, після настання якої файл перестає бути актуальним (наприклад: Tue, 31 Jan 201215:02:53 GMT). До настання цієї дати браузер не робитиме запитів до сайту, а отримуватиме файл із кешу. Після цієї дати файл буде завантажено знову.
Порада 4. Використовуйте стиснення gzip
За допомогою стиснення можна суттєво прискорити завантаження сайту. Починаючи з HTTP/1.1, клієнти повідомляють про підтримувані методи стиснення в заголовку Accept-Encoding:
У відповіді сервера інформація про метод стиснення, що використовується, передається в заголовку Content-Encoding:
Одним із найпопулярніших і найчастіше використовуваних сьогодні методів є, звичайно ж, gzip. З його допомогою можна значно скоротити час завантаження. Gzip особливо ефективно працює із текстовими файлами: HTML, CSS, JS. Завдяки стиску розмір текстових файлів (і, відповідно, обсяг переданого трафіку) зменшується в середньому в 5-10 разів. Це дозволяє значно збільшити швидкість завантаження сторінки, що є особливо актуальним для мобільних клієнтів з повільним з'єднанням.
Для графічних файлів використовувати gzip немає сенсу: стиск не допомагає значно знизити їх розмір, а часто навіть збільшує його.
В Akamai CDN gzip використовується для більшості текстових файлів за промовчанням.
Порада 5. Мініфікуйте JS та CSS
Під мініфікацією розуміється видалення зайвих/необов'язкових символів із файлу з метою зменшення його розміру та скорочення часу завантаження. Завдяки цьому розмір файлів зменшується в середньому у 1,5-3 рази. Сьогодні широкого поширення набуває практика мініфікації як JS і CSS, а й інших типів файлів (HTML, графічних файлів тощо.).
За допомогою мініфікації можна не тільки прибирати незначні прогалини та перенесення рядків (в CSS та JS вони опціональні), але й виконувати складніші операції. Наприклад, у JS функцію виду:
Порада 6.Використовуйте конкатенацію
Сучасні браузери роблять у середньому 6 паралельних запитів на домен. Якщо сайт містить багато файлів невеликого розміру, час його завантаження може затягнутися, особливо це помітно при повільному або нестабільному з'єднанні.
Тут може допомогти конкатенація - об'єднання кількох файлів одного типу (наприклад, JS або CSS) в один. Вона дозволяє зменшити кількість запитів і збільшити швидкість завантаження сторінок.
Конкатенація також може використовуватися для прискорення завантаження зображень. Вона може здійснюватися двома способами: за допомогою впровадження даних в URL та за допомогою спрайтів.
Використання даних здійснюється за допомогою особливого виду URL - data: URI. URI (Universal Resource Identifator) може використовуватися як в атрибуті src тега img, так і URL фонового зображення в CSS.
Для конвертації зображень у data:URI є онлайн-інструменти (див., наприклад, тут і тут).
Спрайт називається колекція зображень, об'єднана в одну картинку. Для формування веб-сайтів вживаються різні програмні інструменти. За допомогою CSS можна звертатися до необхідної ділянки великого зображення та поміщати його у потрібне місце на сайті.
Спрайти допомагають збільшити швидкість завантаження, але слід зазначити, що робота з ними часто буває пов'язана з труднощами. Щоб внести навіть невелику зміну в спрайт, потрібно вносити супутні зміни до CSS.
У сучасних інструментах для збирання проектів на JS (Brunch, Grunt, Gulp та інших). процедури мініфікації та конкатенації можна автоматизувати. Щоб за допомогою однієї команди виконувати всі необхідні операції з файлами (включаючи підсумковий деплой на сервер), достатньо створити невеликий файл конфігурації, що описуєпорядок та властивості складання.
Для охочих дізнатися більше
Особливості розробки та налаштування статичних сайтів – тема велика, і в наступних публікаціях ми її обов'язково продовжимо. Для тих, хто хоче вивчити цю тему глибше як у теорії, так і на практиці, наводимо кілька корисних посилань: