Все в один рядок база знань тестування сайтів

Перш ніж я почну виступ, хочу подякувати Артемія Ломова за надану можливість брати участь в даному заході в якості доповідача і за схвалення теми, яку я вирішив представити.

А тема називається «Все в один рядок».

Як відомо, все, що бачить користувач у вікні браузера, перебуваючи в інтернеті. є результатом роботи сервера.

Якщо коротко розглянути процес заходу на сторінку. то це виглядає наступним чином:

За їх коректне відображення та виконання відповідає не тільки розробник сайту, але і браузер користувача. Браузер, мабуть, навіть більше.

І коли в документі міститься маса зазначених об'єктів, то браузер, сервер, і інтернет-канал отримують надмірне навантаження через необхідність обробки цілої серії запитів:

1. GET /index.html
2. GET /template/style.css
3. GET /template/style_common.css
4. GET /template/style_custom.css
5. GET /lib/jquery.js
6. GET /images/logo.png
7. GET /images/header.png
8. GET /images/footer.png

Проблеми сучасного веб-документа

Невиправдано велика кількість запитів є проблемою як з технічної. так і з економічної точок зору. Не випадково одна з перших дій фахівців з оптимізації інтернет-трафіку, фахівців з тестування навантаження є скорочення кількості запитів. І про це ж йдеться в одному з найбільш часто цитованому зводі рекомендацій від фахівця Стіва Саудерса (Steve Souders) з Yahoo! Development Network.

Вивчивши рекомендації інших фахівців, я виявив практично повна відсутність застосування такого простого і ефективного прийому оптимізації, як запис коду в один рядок.

Запис коду в один рядок

Як показала практика, цей прийом дозволяє скоротити обсяг коду, що завантажується клієнтської стороною, на 15. а то й на 40%.

Ознайомившись з наведеним способом оптимізації, у вас. можливо, виникла ідея: чому я говорю про це? Хіба все веб-розробники не займаються оптимізацією вже протягом багатьох років? Відповіддю на це питання буде рішуче «ні», навіть якщо це вас здивує.

Лише деякі розробники сайтів використовують даний прийом.

Відсоток використання «в один рядок»

Провівши власне дослідження понад 1000 сайтів самої різної тематики, як українських, так і зарубіжних. за допомогою розробленої мною системи тестування сайтів testsistema.ru, я отримав наступні дані:

Причому ця статистика по відсортованим сайтам - понад 200 довелося викинути через їх дуже низької якості. Якщо брати всіх підряд, то цифри будуть ще гірше.

При подальшому вивченні статистики виявилося, що серед цієї тисячі сайтів немає жодного, котрий використовує всі три способи одночасно, крім двох моїх сайтів testsistema.ru і at-free .net.

Як зробити код в один рядок

Як же зробити код в один рядок? В основі цього лежать два дії:

1. агрегування коду
2. оптимізація коду

Можна виділити два способи агрегування. Почну з найбільш оптимального:

Орієнтовна схема роботи агрегатора

Схема може бути доповнена в залежності від конкретних вимог.

Деякі з дій по оптимізації коду:

Що ж, закінчимо з теорією. перейдемо безпосередньо до практики. Не буду втомлювати вас читанням програмного коду і ознайомлю з уже готовим інструментарієм.

Всі інструкції, способи підключення доступні в документації до проектів і на їх форумах.

Як видно з діаграми, різниця в обсязі сторінки досить істотна. При використанні агрегаторів і GZip-стиснення. про який ми поговоримо пізніше, сторінки виходять в 6 разів менше.

Користувачі мобільних пристроїв по достоїнству оцінять ваші зусилля і, при інших рівних умовах, виберуть сайт, де все в один рядок. У вашого сайту буде конкурентна перевага.

У своїй діяльності веб-розробник неминуче стикається з проблемами. У тому числі з технічними. організаційними. Виявити джерело проблеми буває складно. Щоб у вас було менше проблем, дозволю собі дати кілька рекомендацій.

Зробили ви код в один рядок чи ні, вам все одно знадобляться наступні прийоми оптимізації:

• HTTP-кешування
• GZip-стиснення
• профілювання

Застосування HTTP-заголовків «Expires» і «Last-Modified» допомагає вирішити одночасно дві задачі:

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

Частота застосування даної технології залишає бажати кращого. Тільки 1,7% досліджених мною сайтів застосовують HTTP-кешування.

Неймовірно, але GZip-стиснення зменшує обсяг сторінок в середньому до 80%.

GZip-стиснення - це стиснення сторінки на сервері. передача запакованих даних браузеру, розпакування прийнятих даних на стороні клієнта. Весь процес займає всього кілька мілісекунд.

Як і HTTP-кешування. цей високоефективний метод оптимізації використовується досить рідко - всього на 2, 3% сайтів, за даними testsistema.ru.

Профілювання - виявлення характеристик. Чим це може бути корисно для нас? За допомогою профілювання можна домогтися завантаження тільки того, що необхідно на одній. конкретної сторінці.

CSS-профілювання - виняток невикористовуваних CSS-властивостей. Займатися CSS-профілюванням вручну досить складно. Але в цьому нам допоможе плагін Dust-Me Selectors для браузера Firefox.

Наведу кілька цікавих даних. Середній розмір сторінки становить від 192 до 256 кілобайт. Другий за популярністю розмір сторінки - від 256 до 512 кілобайт. Максимальний розмір сторінки, який мені зустрівся - 7,7 МБ на сайті navуstavke.ru.

Мінімальний розмір, менше 32 КБ, всього у 17 сайтів, тобто у 1, 7%. До цього числа входить і мій сайт at-free.net з 22 кілобайтами. Я робив сайт зі сторінкою не більше 4 КБ, але замовник заважив все банерами, тому наводити не буду.

Закінчу виступ напуттям:

Розробники, робіть все в один рядок.

Замовники, вимагайте все в один рядок.

Все - в одну - рядок.