Оптимізуємо час завантаження сторінки
На даний момент серед веб-розробників існує поширена помилка, що швидкість завантаження веб-сайту в клієнтському браузері повністю визначається часом генерації html-сторінки на сервері. Своєю доповіддю я хочу спробувати внести ясність в це питання і розповісти трохи про те, як можна в рази прискорити завантаження сторінок ваших сайтів.
Як видно з таблиці, час завантаження html, в основному, становить лише малу частину від загального часу завантаження / ініціалізації сторінки у кінцевого користувача. Давайте розглянемо докладніше, з чого ж цей час складається. Це мережеві затримки (очікування відповіді від DNS, час на встановлення з'єднання з сервером), це час, що йде на завантаження ресурсів (картинок, анімації) і завантаження файлів стилів і скриптів (CSS і JavaSscript).
Як можна зменшити кожну цю складову? Всі методи оптимізації веб-сайтів розбиваються на кілька основних груп, основний же їх завданням є зменшення часу передачі запиту, часу передачі відповіді і числа запитів для середньостатистичного клієнта (очевидно, що збільшення ширини каналу, на якому стоїть сервер, навряд чи зможе кардинально вирішити проблему ). Далі ми розглянемо методи стиснення даних і розподілені системи, які зменшують час передачі відповіді, і методи кешування і злиття файлів, які зменшують кількість запитів.
Єдиним дієвим методом по зменшенню розміру запиту (даних, що передаються з боку клієнта) буде зменшення розміру заголовка cookiе. Як видно з таблиці, він може займати значну частину всього запиту. Кілька простих правил дозволять оптимізувати цю частину клієнтської інформації, наприклад: прибрати непотрібні cookie, не робити їх розмір більше необхідного, виставляти тільки на необхідних сторінках і стежити за терміном дії.
Як можна зменшити розмір відповіді? Тут простір дій набагато більше. Найбільш відомим методів є minify (виняток всього непотрібного з коду, докладніше в доповіді «Оптимізація HTML, CSS, JS на часто показуються сторінках Яндекса»). По можливості варто також використовувати AJAX-запити замість стандартних, а в них JSON замість XML.
Іншим широко відомим методом є gzip- / deflate-стиснення на стороні сервера (можливо, варто кешувати результати, щоб не перевантажувати процесор непотрібними обчисленнями). У цьому випадку головне забезпечити підтримку «старих» браузерів (щоб клієнти без підтримки gzipа змогли нормально зайти на ваш сайт). Як видно з таблиці, використання gzip-стиснення дозволяє істотно скоротити розмір відповіді від сервера.
Розглянемо більш докладно стиснення CSS-файлів. Використання спеціальних алгоритмів, скорочуються вихідний код (CSS Tidy) укупі з архівуванням результату може істотно скоротити розмір файлу. Також в якості можливих методів оптимізації розміру файлу можна запропонувати скорочення шляху до фонових зображень і зменшення довжини використовуваних класів і ідентифікаторів. Підготовлений CSS-файл можна один раз стиснути і потім віддавати завжди користувачеві одну і ту ж стислу версію.
Для мінімізації повторних запитів з клієнтської машини на сервер використовуються різні прийоми і методи кешування. Найбільш простим, мабуть, буде використання фонових картинок (CSS-властивість background-image) замість звичайних (тег ). Це дозволяє повідомити браузеру про те, що більшість елементів на сторінці використовуються в оформлювальних цілях і для відображення їх досить завантажити тільки один раз (залежить, природно, від налаштувань браузера). Далі варто згадати про набір заголовків Expires / Cache-Control, які призначені ля управління кешом клієнта на стороні сервера. У цьому випадку варто кешувати все рідко змінювані ресурси (навіть якщо вони на ваш погляд не так часто запитуються). Ще одним методом управління кешування на стороні сервера є включення у відповідь заголовка ETag, який повідомляє клієнту унікальний ідентифікатор файлу, що дозволяє серверу відповідати кодом 304 (Not Modified, не змінився) на повторний запит клієнта і файл повторно не віддавати. Нарешті, на тлі всіх описаних технік вимальовується проблема версійності: коли потрібно примусово віддавати клієнту новішу версію закеширувалася файлу. І вона стандартно вирішується шляхом додавання в кінець імені файлу в місці звернення до нього унікальної рядка запиту (file? V.3.11.45).
В якості висновку можна навести відомий критерій гарною доступності сайту, коли він повністю завантажується за 10 секунд на модемі (загальний розмір усіх файлів не повинен бути більше 36 Кб). Також можна навести офіційні дані по головній сторінці yahoo.com, яка була оптимізована відповідно до описаних вище правил. В результаті час завантаження зменшилася з 2,4 секунд до 0,9 секунд (в 2,7 рази). Схожа статистика є і для деяких інших ресурсів (внутрішніх розробок високонавантажених проектів).
Дякуємо за увагу. Буду раз відповісти на ваші запитання.