Список з 35 методик, об'єднаних в 7 груп. Оригінал статті - «Best Practices for Speeding Up Your Web Site».
1. Звести до мінімуму HTTP-запити
80% часу відгуку для кінцевого користувача витрачається на зовнішній інтерфейс (front-end). Більша частина цього часу пов'язана із завантаженням всіх компонентів веб-сторінки: зображень, таблиць стилів, скриптів, флеш-роликів і ін. Чим менше цих компонентів, тим менше потрібно HTTP-запитів для створення сторінки. Це ключовий момент для створення швидких сторінок.
Один з варіантів скоротити кількість компонентів веб-сторінки - це спростити її дизайн. Але чи можна створювати сторінки з різноманітним і багатим вмістом, і при цьому з невеликим часом відгуку? Ось кілька способів скоротити кількість HTTP-запитів, зберігши дизайн сторінки.
За допомогою об'єднання файлів можна скоротити кількість HTTP-запитів, об'єднавши всі скрипти в один і все таблиці стилів - в один файл стилів. Об'єднання файлів стає більш складним завданням, коли скрипти і таблиці стилів відрізняються від сторінки до сторінки, але, включивши це в свій реліз, ви поліпшите час відгуку.
CSS-спрайт кращі для зменшення числа зображень. Об'єднайте фонові зображення в один і використовуйте такі властивості CSS, як background-image і background-position для відображення потрібної області.
Карти зображень об'єднують кілька зображень в одне. Сумарний розмір залишається майже незмінним, але завантаження сторінки прискорюється за рахунок меншої кількості HTTP-запитів. Карти зображень можуть застосовуватися лише в разі суміжних картинок, наприклад, панель навігації. Визначення координат для карти може зажадати досить багато часу і уваги. Для навігації карти зображень незручні і тому не рекомендуються до використання.
Почніть з скорочення кількості HTTP-запитів на сторінці. Це найважливіша рекомендація для поліпшення продуктивності сторінки у нових відвідувачів. Як показано в блозі Tenni Theurer Browser Cache Usage - Exposed. 40-60% щоденних відвідувачів сайту приходять з порожнім кешем. Швидке завантаження сторінки при першому відвідуванні покращує враження користувача від вашого сайту.
В системі є штатна функція об'єднання і стиснення CSS- і JS-файлів, яка включається в настройках головного модуля. При включенні цієї опції в ідеальному випадку на сторінці підключається 3 CSS і 3 JS-файлу.
Ще матеріал по темі:
2. Використовувати мережу доставки контенту (CDN - Content Delivery Network)
Відстань від користувача до вашого веб-сервера впливає на час відгуку. Розміщення контенту на безлічі серверів з різним місцем розташування дозволить користувачам швидше завантажувати ваші сторінки. Але з чого почати?
Перш за все, не намагайтеся переписати ваше додаток для роботи в розподіленої архітектурі. В залежності від програми, зміна архітектури може включати обескураживающие завдання, наприклад, синхронізацію стану сесії і реплікацію транзакцій бази даних на різних серверах. Спроби скоротити відстань між користувачами і вашим контентом можуть застрягти і не піти далі цього кроку в розробці архітектури.
Пам'ятайте, що 80-90% часу відгуку для кінцевого користувача визначається часом завантаження компонентів сторінки: картинок, стилів, скриптів, Flash-роликів. Це - золоте правило продуктивності. Краще зайнятися розподілом статичного контенту, ніж братися за складне завдання модифікації архітектури додатку. Це не тільки істотніше скоротить час відгуку, але це і легше завдяки мережам доставки контенту.
Мережа доставки контенту (CDN) - це група веб-серверів, розподілених по різним местоположениям, щоб забезпечити найбільш ефективну доставку контента користувачам. Зазвичай для доставки контенту конкретного користувача вибирається найближчий по мережі сервер, наприклад, з мінімальною кількістю перенаправлень між мережами або мінімальним часом відгуку.
Деякі великі інтернет-компанії мають у своєму розпорядженні власної CDN, але економічніше використовувати CDN-службу провайдера, наприклад, Akamai Technologies, EdgeCast або level3. Стартапи і приватні веб-сайти, можливо, не можуть дозволити собі CDN-службу, але з ростом вашої цільової аудиторії і переходом на глобальний рівень CDN стає необхідною. У Yahoo! служби, які перенесли свій статичний контент з веб-серверів додатків на CDN (як сторонні, так і внутрішні CDN-служби Yahoo), поліпшили час відгуку для кінцевих користувачів на 20% і більше. Перехід на CDN - щодо легка зміна програмного коду, яке значно поліпшить час завантаження вашого сайту.
«1С-Бітрікс: Управління сайтом» - перша російська CMS, інтегрована з мережею CDN на рівні самої платформи! Будь-який власник сайту може значно прискорити свій проект буквально в «один клік» без будь-яких додаткових налаштувань!
Підключення: в адміністративній панелі вашого сайту в розділі «Налаштування» - «Хмарні сервіси Бітрікс» - «Прискорення сайту (CDN)» відзначте галочку «Включити прискорення сайту» і збережіть зміни.
3. Додати заголовок Expires або Cache-Control
Це правило включає в себе два аспекти:
- Статичні компоненти: встановіть політику «Never expire» в заголовку Expires
- Динамічні компоненти: використовуйте відповідний заголовок Cache-Control для умовних запитів браузера.
Дизайн веб-сторінок стає все багатшими, що означає все більшу кількість скриптів, стилів, зображень і Flash-роликів на сторінці. Новому відвідувачу доведеться виконати кілька HTTP-запитів, але за допомогою заголовка Expires можна кешувати ці компоненти. Це дозволяє уникнути непотрібних HTTP-запитів при наступних зверненнях до сторінки. Заголовки Expires часто використовуються з зображеннями, але їх слід застосовувати на всіх компонентах сторінки, включаючи скрипти, стилі і Flash-ролики.
Якщо ваш сервер працює на Apache, використовуйте директиву ExpiresDefault для терміну кешування по відношенню до поточної дати. Цей приклад директиви ExpiresDefault встановлює термін зберігання на 10 років щодо поточної дати.
Майте на увазі, що, якщо ви використовуєте заголовок Expires, вам доведеться змінити ім'я компонента при зміні його змісту. У Yahoo! це входить в процес складання: номер версії міститься в імені компонента, наприклад, yahoo_2.0.6.js.
4. Використовувати стиснення GZip
Час передачі HTTP-запиту і відгуку можна істотно скоротити за допомогою фронт-енд рішень. Звичайно, пропускна здатність підключення користувача, його провайдер, розташування в мережі і т.д. не залежить від розробників. Але є й інші параметри, що впливають на час відгуку. Стиснення скорочує час відгуку за рахунок зменшення розміру HTTP-відгуку.
Починаючи з HTTP / 1.1, веб-клієнти підтримують стиснення з заголовком Accept Encoding в HTTP-запиті.
Якщо веб-сервер виявляє в запиті цей заголовок, він може стиснути компоненти HTTP-відгуку за допомогою одного з методів, перерахованих клієнтом. Веб-сервер сповіщає про це клієнта за допомогою заголовка Content-Encoding в HTTP- відгуку.
Gzip-стиснення скорочує розмір відгуку приблизно на 70%. Приблизно 90% інтернет-трафіку (на дату написання статті) передається через браузери, які заявляють про підтримку gzip. Якщо ви використовуєте Apache, модуль, який визначає параметри стиснення, залежить від версії: Apache 1.3 використовує mod_gzip. а Apache 2.x - mod_deflate.
Відомі деякі проблеми з браузерами і проксі-серверами, які можуть викликати невідповідність між тим, що браузер очікує отримати, і одержуваних стисненим контентом. На щастя, ці проблеми скорочуються по мірі відновлення браузерів. Модулі Apache автоматично додають до відгуку відповідні заголовки Vary.
Веб-сервери визначають, що стискати, на підставі типу файлу, але зазвичай досить обмежені в цьому виборі. Більшість сайтів стискають HTML-документи. Також варто стискати скрипти і стилі, але багато сайтів упускають цю можливість. В принципі, має сенс стискати будь-який текстовий відгук, включаючи XML і JSON. Зображення і PDF- файли стискати не варто, так як вони вже стиснуті. Застосування до них gzip не тільки марно збільшує навантаження на процесор, але також може збільшити розмір файлу.
Максимально широке застосування стиснення до різних типів файлів - простий спосіб зменшити розмір сторінки і поліпшити враження користувача.
5. Розміщувати таблиці стилів на початку документа
Під час дослідження продуктивності в Yahoo! ми виявили, що в результаті перенесення таблиць стилів в розділ сторінки HEAD сторінка здається більш швидкою. Причина цього в тому, що при розташуванні стилів в розділі HEAD сторінка візуалізується поступово.
Розробники фронт-енду, зацікавлені у високій продуктивності, вважають за краще поступову завантаження сторінки, тобто, ми хочемо, щоб браузер відображав наявний контент в міру його отримання. Це особливо важливо для високонавантажених сторінок і користувачів з повільним підключенням. Існують дослідження і документи, що доводять важливість зворотного зв'язку для користувачів, наприклад, індикаторів завантаження. У нашому випадку HTML-сторінка і є індикатор завантаження! При поступової завантаженні шапки, навігаційної панелі, логотипу в шапці всі ці компоненти виконують функцію зворотного зв'язку для користувача, що очікує завантаження сторінки. Це покращує загальне враження користувача.
Проблема з розташуванням стилів в нижній частині документа полягає в тому, що це блокує поступову завантаження в багатьох браузерах, включаючи Internet Explorer. Ці браузери блокують візуалізацію, щоб не довелося перемальовувати елементи в разі зміни стилів. В результаті користувач бачить порожню білу сторінку.
Специфікація HTML явно підкреслює, що таблиці стилів повинні знаходитися в розділі HEAD: «На відміну від елемента A, елемент LINK може перебувати тільки в розділі HEAD, але з'являтися може необмежену кількість разів». Жодна з альтернатив, порожній білий екран або потік нестілізованного контенту, ризику не варто. Найкраще рішення - слідувати специфікації HTML і завантажувати стилі в розділі HEAD.
Для ще більшого прискорення завантаження сайту об'єднаний CSS-файл можна перенести вниз сторінки, перед закриває тегом