34 поради щодо збільшення продуктивності web-додатків

Posted by on 28.03.2008 Leave a comment (1) Go to comments

Розробники, що відповідають за створення високопродуктивних рішень в Yahoo, опублікували цікаву презентацію на 76 сторінок, в якій узагальнено досвід компанії, пов’язаний з підвищенням продуктивності web-додатків. В презентації представлені 34 рекомендації web-розробникам, з них 14 порад були описані в попередній доповіді.

Для виявлення проблем з продуктивністю сайтів в Yahoo було розроблене спеціальне доповнення до Firefox-плагіна Firebug — YShow, що дозволяє виявити вузькі місця та оцінити швидкість поетапного завантаження різних частин сторінки.

Поради:

  1. Виконувати якнайменше HTTP-запитів;
  2. Користуватись послугами мереж доставки контента (Content Delivery Network), наприклад Akamai;
  3. Не нехтувати HTTP заголовком “Expires” або “Cache-control”;
  4. Віддавати сторінки в стиснутому вигляді (наприклад, mod_gzip);
  5. Вказувати посилання на фали з таблицями стилів (link href) на початку документа;
  6. Вказувати посилання на JavaScript файли (script src) в кінці документа;
  7. Не використовувати очислювані (expressions) вирази в CSS;
  8. Зберігати JavaScript та CSS вставки у вигляді окремих файлів;
  9. Зменшити кількість звернень до інших доменів на сторінці(наприклад, коли зображення або iFrame завантажуються з іншого сервера, в ідеалі не більше трьох доменів);
  10. Мінімізувати розмір JavaScript і CSS (наприклад, за допомогою JSMin або YUI compressor, які прибирають зайві пробліли, коментарі, та скорочують змінні);
  11. Уникати перенаправлень (HTTP Redirect);
  12. Виключати дублювання JavaScript коду (наприклад, IE повторно завантажує “script src” вставки, що повторюються);
  13. Налаштувати ETags (“FileETag None” в Apache);
  14. Кешувати Ajax запити;
  15. Скидати буфер на початковому етапі генерації сторінки (наприклад, через періодичний виклик flush() в PHP), для того, щоб клієнт отримав посилання на CSS файли та встиг почати їх завантаження);
  16. Використовувати для Ajax запитів HTTP метод GET (вміщується в 1 TCP пакет, в той час як POST відправляється в два етапи — заголовки і дані);
  17. Виділення контенту, який можна завантажити в останню чергу (наприклад, відкладене завантаження зображень та JavaScript блоків після завантаження основної частини);
  18. Виділення скриптів, які слід завантажувати в першу чергу;
  19. Зменшення числа елементів в дереві DOM (мінімізація числа HTML-тегів на сторінці);
  20. Розділення контенту по різним доменам: статика через окремий static.domain.com (броузер буде завантажувати дані паралельно);
  21. Мінімізувати число iFrame-ів, не використовувати iFrame та script src посилання на чужі ресурси (блокує завантаження наступної частини сторінки);
  22. Недопускати появу 404 помилки (сторінка не знайдена);
  23. Зменшити розмір Cookie (прибрати зайве, скоротити імена, прив’язати лише до необхідни доменів, визначити тривалість їх життя);
  24. Для допоміжних сторінок виключити встановлення Cookie (з винесенням зображень, CSS та скриптів на static.domain.com);
  25. В JavaScript мінімізувати звернення до DOM (дуже повільна операція), виключити повторні запити до DOM за допомогою кешування;
  26. Оптимізувати обробку подій в JavaScript (замість “onload” використовувати DOMContentLoaded, обережно використовувати onresize, провести аудит за допомогою утиліти YUI Event);
  27. Завантажувати CSS через “link” на початку сторінки, не використовувати @import (в IE він призводить до завантаження CSS в самому кінці);
  28. Уникати використання фільтрів в CSS, вони пыдтримуються лише в IE, натомість використовувати PNG8;
  29. Оптимізувати зображення (мінімізація розміру палітри, перехід на PNG, оптимізація за допомогою pngcrush, optipng чи pngoptimizer, вилучення коментарів в зображеннях, оптимізацыя JPEG через jpegtran);
  30. Оптимізація CSS спрайтів (css sprite) для створення фонових зображень;
  31. Фактичний розмір зображення повинен співпадати із вказаним в параметрах width та height, щоб уникнути масштабування;
  32. favicon.ico повинен бути невеликим (менше 1 Кб) та кешованим (повинен встановлюватись як Expires, 9% всіх запитів в Yahoo Search припадає на favicon.ico !). При використанні Flash слід визначити crossdomain.xml;
  33. Сторінки, призначені для перегляду на мобільних пристроях, не повинні перевищувати 25Кб (інакше ті не попадуть в кеш iPhone);
  34. Для мобільних пристроїв краще використовувати multipart блоки, коли доповнення до сторінки(CSS, зображення), упаковуються в самій сторінці у вигляді додатків ;

Джерело: OpenNet.ru

інтернет, Програмування, , , ,