Оптимізація javascript і css-файлів в drupal, drupal bloggers

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

Активність користувачів на Вашому сайті буде додатковим стимулом до подальшої роботи.

Удачі у всіх Ваших починаннях!

З чого починається сайт?

  • Для браузера сайт починається з GET-запиту сторінки.
  • Сервер на цей запит висилає HTML-код сторінки.
  • Браузер розбирає код та почне завантажувати всіх зовнішніх файлів (JS, CSS, Flash і ін.) В порядку їх слідування в коді.
  • Зазвичай браузер використовує не більше 2-х потоків для завантаження зовнішніх файлів, а CSS і JS завантажуються взагалі в одному потоці.
  • Час на кожен запит залежить від розміру повертається відповіді, завантаження сервера і активності на кожній машині на всьому шляху між браузером і сервером.
  • Чим більше розмір файлу - тим довше він буде доставлятися браузеру.
  • Чим більше кількість файлів - тим довше буде завантажуватися вся сторінка.

Таким чином, щоб збільшити швидкість завантаження сторінки потрібно:

  1. modules / comment / comment.js
  2. modules / profile / profile.js
  3. modules / openid / openid.js
  4. modules / taxonomy / taxonomy.js
  5. modules / system / system.js
  6. modules / block / block.js
  7. modules / color / color.js
  8. modules / user / user.js
  9. misc / autocomplete.js
  10. misc / drupal.js
  11. misc / collapse.js
  12. misc / batch.js
  13. misc / farbtastic / farbtastic.js
  14. misc / form.js
  15. misc / tableselect.js
  16. misc / ahah.js
  17. misc / tabledrag.js
  18. misc / textarea.js
  19. misc / progress.js
  20. misc / tableheader.js
  21. misc / teaser.js
  22. misc / jquery.form.js
  23. misc / jquery.js
Добре, що вони не всі загрузаются на одній сторінці, а деякі взагалі не використовуються. На совісті розробника модуля правильно налаштувати умови підключення JS і CSS-файлів на сторінці, щоб даремний код не зменшував швидкість завантаження сторінки.
CSS-файли
У вашому проекті кількість і сумарний розмір буде інший.
Команда для самостійної перевірки розміру CSS файлів:
find. -name '* .css' -exec ls -l # 123; # 125; \; | awk 'END'

У нашому проекті, крім файлів ядра, є ще близько 450-ти в додаткових модулях і темах.
Загальний розмір усіх CSS-файлів - 1'674'793 байт.
Що стосується CSS-файлів в ядрі Drupal 6, то ось вони:

  1. modules / locale / locale.css
  2. modules / aggregator / aggregator-rtl.css
  3. modules / aggregator / aggregator.css
  4. modules / update / update.css
  5. modules / update / update-rtl.css
  6. modules / poll / poll.css
  7. modules / poll / poll-rtl.css
  8. modules / comment / comment-rtl.css
  9. modules / comment / comment.css
  10. modules / tracker / tracker.css
  11. modules / forum / forum-rtl.css
  12. modules / forum / forum.css
  13. modules / book / book.css
  14. modules / book / book-rtl.css
  15. modules / profile / profile.css
  16. modules / search / search-rtl.css
  17. modules / search / search.css
  18. modules / openid / openid.css
  19. modules / node / node-rtl.css
  20. modules / node / node.css
  21. modules / taxonomy / taxonomy.css
  22. modules / system / system-menus-rtl.css
  23. modules / system / admin-rtl.css
  24. modules / system / admin.css
  25. modules / system / maintenance.css
  26. modules / system / defaults-rtl.css
  27. modules / system / defaults.css
  28. modules / system / system-rtl.css
  29. modules / system / system-menus.css
  30. modules / system / system.css
  31. modules / block / block.css
  32. modules / color / color.css
  33. modules / color / color-rtl.css
  34. modules / help / help.css
  35. modules / help / help-rtl.css
  36. modules / dblog / dblog.css
  37. modules / dblog / dblog-rtl.css
  38. modules / user / user.css
  39. modules / user / user-rtl.css
  40. misc / print-rtl.css
  41. misc / farbtastic / farbtastic.css
  42. misc / print.css
  43. themes / bluemarine / style.css
  44. themes / bluemarine / style-rtl.css
  45. themes / garland / print.css
  46. themes / garland / style.css
  47. themes / garland / minnelli / minnelli.css
  48. themes / garland / color / preview.css
  49. themes / garland / style-rtl.css
  50. themes / garland / fix-ie.css
  51. themes / garland / fix-ie-rtl.css
  52. themes / pushbutton / style.css
  53. themes / pushbutton / style-rtl.css
  54. themes / chameleon / common-rtl.css
  55. themes / chameleon / style.css
  56. themes / chameleon / marvin / style.css
  57. themes / chameleon / marvin / style-rtl.css
  58. themes / chameleon / common.css
  59. themes / chameleon / style-rtl.css

Сумарний розмір CSS-файлів на порядок менше, ніж розмір JS-файлів. Але потрібно врахувати, що CSS-файлів на сторінці набагато більше, ніж JS-файлів - приблизно в 2 рази більше. Крім того, стилі, як правило, завантажуються для всіх сторінок (це стилі теми) і тільки стилі модулів можуть завантажуватися для певних сторінок. Таким чином і файли стилів, і скрипти потребують нашої уваги в однаковій мірі.
Обмежений Internet Explorer
Браузер IE 6-8 має обмеження на кількість і розмір CSS-файлів:

  • Всі теги додавання стилів після перших 31 тегів ігноруються.
  • Всі CSS-правила після перших 4,095 правил ігноруються.
  • На сторінках, які використовують правило @import для імпорту зовнішніх таблиць стилів, які імпортують інші зовнішні таблиці стилів, таблиці стилів з рівнем вкладеності більше 3 - ігноруються.

Обмеження протоколу HTTP
Цікаво чи є у браузерів обмеження на кількість АJAX-з'єднань?
Згідно зі специфікацією HTTP 1.1 браузер повинен встановлювати не більше 2 одночасних з'єднань (і це справедлівао для IE6 / 7) до одного хосту. У Firefox і Opera цей параметр настроюється і становить не менше 4 за замовчуванням. За деякими даними в IE8 - 6 з'єднань з одним хостом.
Джерело інформації: Raising network.http.max-persistent-connections-per-server?

  • Firefox 2: 2
  • Firefox 3 beta 4: 4
  • Opera 9.26: 4
  • Opera 9.5 beta: 4
  • Safari 3.0.4 Mac / Windows: 4
  • IE 7: 2
  • IE 8: 6
  • Більшість JS і CSS-файлів не оптимізовані.
  • Файлів багато і їх сумарні розміри значні.
  • Маємо проблеми з браузером IE, який обмежує кількість CSS-файлів на сторінці.
  • Проблеми зі швидкістю завантаження сторінки через великої кількості зовнішніх файлів і обмеження браузерів на кількість одночасних з'єднань з сервером.

Запит на сервер і сервер віддає стислий контент

  • Оптимізація CSS не робиться, коли сайт знаходиться в режимі Maintenance ( "Обслуговування") або запущено оновлення (update.php).
  • До оптимізованим файлів додається рядок у вигляді параметра, яка дозволяє контролювати кешування файлів браузером. Коли запускається update.php або робиться повний скидання кеша, - змінюється цей рядок, що змушує браузери перезавантажити нові версії файлів, так як вони вважають, що URL змінився.
  • Чи буде файл брати участь в оптимізації вирішує 4й аргумент функції drupal_add_css () - $ preprocess, який визначає чи буде даний файл брати участь в оптимізації, якщо вона буде включена. За замовчуванням файл буде брати участь в оптимізації.
  • Спочатку формується 2 списку файлів, які не беруть участі в оптимізації CSS - окремо (1) для модулів і окремо (2) для тем.
  • Далі створюється ім'я файлу, який буде зберігати оптимізований CSS і викликається функція drupal_build_css_cache (). яка аггрегірует і оптимізує CSS файли.
  • Отриманий файл зберігається в папці sites / default / files / css (в мультісайтового установці буде інший шлях, але, - я думаю, - що ви і самі знаєте де вони будуть зберігатися).

Що в себе включає оптимізація?

Отже, оптимізація, яку нам пропонує ядро ​​Drupal є насправді мінімізацією з аггрегаціі в один файл.
Недоліки методу оптимізації в ядрі Drupal
Метод оптимізації, який використовується в ядрі Drupal безпечний, тобто він не призводить до помилок в коді. Але метод не настільки ефективний, як здається.
Справа в тому, що на сторінці може бути десятка 2 різних скриптів, які збираються в унікальний файл, який для даної сторінки кешируєтся. Скрипти на сторінці можуть довантажувати в залежності від прав доступу користувача або ще яких-небудь умов, що збільшує кількість варіантів для однієї-єдиної сторінки.

  • Якщо вибрано використання стиснення трафіку на сторінці налаштування продуктивності,
  • Розширення PHP zlib) присутній в системі,

CSS-хакі, які працюють:

Тестування швидкості завантаження сторінки
Було проведено замір часу завантаження сторінки, щоб з'ясувати наскільки зміниться середній час завантаження при різних методах оптимізації JS-файлів. Тестовий сайт має понад 1300 JS-файлів і майже 450-CSS-файлів. Встановлено 227 модулів (включаючи модулі ядра). Були досліджені різні методи оптимізації:

Умови проведення тесту
налаштування браузера

  • Проверяемая сторінка: головна сторінка тестованого сайту
  • Браузер: Firefox 3.6.13
  • Кеш браузера: 500М
  • Інструмент виміру: Yslow 2.1.0
  • Проксі сервер: чи не використовувався
  • Сервер має: Accelerator
  • Операційна система: Linux
  • Версія ядра: 2.6.29-5
  • Архітектура: x86_64

Налаштування в Drupal

  • Користувач в Drupal: суперадмін
  • Caching mode: Normal
  • Minimum cache lifetime: none
  • Page compression: enabled
  • Block cache: enabled
  • Optimize CSS files: enabled

Результати тестування
Середній час завантаження сторінки

Діаграма часу завантаження сторінки в різних режимах

Аналіз результатів тестування

Корисні посилання
Компресори скриптів

Порядок завантаження елементів сторінки браузером