1 - Мінімізація HTTP запитів:
У момент запуску сторінки користувачем більшість часу в ході завантаження припадає на основні її компоненти, це HTML структура сторінки, JS скрипти, SSH, зображення, флеш і т.д. Зменшення числа компонентів мінімізує число HTTP запитів у рази і є> ключовим фактором, що впливає на швидкість завантаження. Об'єднуйте Javascript в один CSS файл і в одну цсс-ку. Розрахунок тут простий: 10 JS-файлів = 10 HTTP запитів, 1 JS-файл = 1 запит, до того ж більшість браузерів призупиняють завантаження решти елементів сторінки, допоки триває завантаження і обробка кожного файлу Javascript. Використовуйте CSS-спрайти, вони допомагають знизити кількість запитів картинок, що використовуються як фонові.
2 - Використання компресії:
Найбільш популярним методом компресії файлів є Gzip. Застосовувати компресію можна до HTML, CSS, JS, проте щодо зображень та PDF-файлів - краще не стискати із допомогою Gzip, оскільки вони вже стиснуті. Спроба стиснути їх із допомогою Gzip потенційно лише збільшить об’єм файлу. В Drupal використовуються модулі Css Gzip та Javascript Aggregator.
3 - Мінімізація Javascript та CSS:
Під мінімізацією ми маємо на увазі практику видалення і з коду зайвих символів, з метою зменшити його розмір, і таким чином "стиснути" час завантаження. З коду зменшеної версії будуть видалені всі коментарі, а також непотрібні символи (пропуск, ентер і табуляція). У випадку із Javascript, це підвищує продуктивність і час відгуку, оскільки розмір завантажуваного файлу зменшується. Чи не найпопулярнішими серед інструментів мінімізації коду Javascript є JSMin та YUI Compressor. Компресор YUI може також зменшити CSS. В Drupal можна використовувати модуль Javascript Aggregator, а в Drupal 7 мінімізація цсс включається автоматично, на момент запуску компресії css.
4 - Правильний порядок підключення стилів і скриптів у документ:
Першими в тезі <head> сторінки повинні йти мета-теги і <title>. Після них повинні бути розташовані таблиці стилів. Це пояснюється тим, що багато браузерів, включаючи Internet Explorer блокує рендеринг, аби уникнути перемальовування елементів сторінки, якщо їх стилі змінюються. Користувач буде бачити білий екран, поки не почнуть завантажуватися стилі
Пропишіть JS-скрипти після всіх елементів <head>. Зміст проблеми, пов’язаної із сценаріями полягає в тому, що вони блокують паралельне завантаження. Специфікація HTTP/1.1 передбачає, що браузери завантажують не більше двох компонентів паралельно з одного хоста. Якщо сценарій завантажується, браузер не почне жодних інших завантажень, навіть з різних хостів. Тому, якщо це можливо, винесіть якомога більше скриптів на самий низ документа.
5 - Уникайте CSS виразів та фільтрів:
CSS вирази - це потужний і небезпечний інструмент динамічної зміни CSS. Ці вирази підтримуються Internet Explorer з 5 по 7 версії. Проблема тут полягає в тому, що вони виконуються частіше, ніж можна собі уявити - і тоді, коли сторінка відображається і змінюється, і навіть тоді, коли на сторінці відбуваються переміщення курсору мишки. Доданий в CSS вираз лічильник дозволить відслідковувати, коли і як часто CSS вирази виконуються. Переміщення мишки по сторінці може легко створювати більше 10000 виконань зображень. Якщо вам потрібно використовувати CSS зображення, пам'ятайте, що вони можуть впливати на продуктивність вашої сторінки.
Проблемою з фільтром AlphaImageLoader (виправлення проблеми з напівпрозорими PNG в ІЕ версій <7) є те, що цей фільтр блокує рендеринг і "заморожує" вікно браузера, коли зображення завантажується. Це також збільшує рівень використання пам'яті і застосовується до кожного елементу, а не для зображення, таким чином ускладнюючи ситуацію ще більше. Краще всього уникати AlphaImageLoader повністю і натомість використовувати PNG8, замість того щоб втрачати продуктивність в ІЕ. Якщо вам вкрай необхідний фільтр AlphaImageLoader, використовуйте хак з підкресленням _filter, аби не мучити ваших ІЕ7-користувачів (якщо у вас є окремий CSS для всіх ІЕ) чи, в якості оптимального варіанту, можна скористатись Javascript.
6 - Використовуйте внутрішні Javascript та CSS:
Використання зовнішніх файлів збільшує швидкість завантаження сторінки, оскільки Javascript та CSS кешуються в браузері. Javascript та CSS, які вбудовані в документ HTML, завантажуються кожен раз, коли надходить запит на HTML документ. Єдиним винятком, коли влаштовані стилі можуть бути переважаючими, це домашня сторінка, коли є декілька (можливо тільки один) переглядів сторінки за сесію, тоді ви можете побачити, що встроювання Javascript та CSS призводить до більш швидкого завантаження у кінцевих користувачів.
7 - Видалення скриптів, що повторюються:
Досить сповільнює продуктивність подвійне включення Javascript файл на одній сторінці. Ситуація не така вже й надзвичайна, як це може видатись. Yahoo! пише, що в 2 з 10 рейтингових американських сайтів було знайдено повторення одного й того ж Javascript. B Internet Explorer, якщо зовнішній скрипт включений двічі і не кешований, це спричиняє до утворення двох HTTP-запитів у ході завантаження сторінки. Навіть якщо сценарії кешуються, додаткові запити HTTP з'являються все одно, в момент коли користувач оновлює сторінку.