Ефективні методи зменшення пропускної здатності (і, таким чином, разів завантаження сторінки)?

Які найефективніші методи, коли йдеться про зменшення пропускної здатності, яку веб-сайт потребує для відображення сторінки?

Агресивне кешування? Мінімізація JS / CSS? Gzip? CMS? Спрати?

Кілька основних методів, які легко реалізуються на будь-якому веб-сайті:

• Стисніть HTML, CSS і Javascript з deflateабо gzipякщо браузером , який зробив запит підтримує.
• Мінімізуйте свій javascript за допомогою Google Closure Compiler
• Скоротіть свій css за допомогою компресора YUI

Трохи більше:

• Якщо сторінка чи зображення навряд чи зміняться, скажіть браузеру кешувати її. Більшість веб-серверів вже роблять це для статичних файлів, тому все, що вам потрібно зробити, - це додати його до своїх динамічних сценаріїв, де це можливо.
• Автоматично об'єднайте файли CSS та JS в один . Це вигідно, оскільки воно зменшує запити HTTP (які мають накладні витрати та якісь дурні браузери - і, маючи на увазі, Internet Explorer - обмежуйте за замовчуванням 2 запити одночасно на домен).
• Перемістіть статичні файли (CSS, JS, зображення тощо) до окремого доменного імені. Це призводить до того, що інформація про файли cookie не надсилається в HTTP-запиті.

• Використовуйте спрайти, які створюються автоматично . Спрайт - це єдине зображення, що містить кілька значків або інших невеликих зображень; потім ви вибираєте, яке зображення відображатиметься із backgroundвластивістю CSS . Приклад .

  Перевага полягає в тому, що клієнт робить менше запитів HTTP (які мають накладні витрати).

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

Компанія Google окреслила та пояснила їхні рекомендації щодо максимального зменшення розміру корисної навантаження . Вони включають такі методи:

1. Увімкнути стиснення
2. Видаліть невикористаний CSS
3. Мінімізуйте JavaScript
4. Мінімізуйте CSS
5. Мінімізуйте HTML
6. Відкладіть завантаження JavaScript
7. Оптимізуйте зображення
8. Подавайте масштабовані зображення
9. Подавайте ресурси з послідовної URL-адреси

Ці пропозиції є частиною проекту надбудови Firefox / Firebug під назвою Page Speed . Схожий на плагін Yahoo! 'S YSlow . Фактичне доповнення сторінки Швидкість перевірятиме на багато більше оптимізацій, ніж цей список пояснюється докладно. Також представлені інструкції щодо використання швидкості сторінки.

Найкращі методи Yahoo для подолання вашого веб-сайту визначають подібний набір найкращих практик:

1. Мінімізуйте запити HTTP
2. Використовуйте мережу доставки вмісту
3. Додайте Expires або заголовок кеш-керування
4. Компоненти Gzip
5. Покладіть таблиці стилів вгорі
6. Покладіть Сценарії знизу
7. Уникайте CSS-виразів
8. Зробити JavaScript та CSS зовнішніми
9. Зменшити пошук DNS
10. …

(Список Yahoo! - близько 35 пунктів, не потрібно цитувати його в повному обсязі.)

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