Активні веб-елементи - поради щодо оптимізації структури та збільшення продуктивності,
Згадайте, як багато часу ви раніше витрачали на оптимізацію активних елементів вашого проекту (зображення, CSS і т.д.)? Добре, що сьогодні користувачі мають в своєму розпорядженні набагато більш швидкий інтернет, і тепер, здається, ми, нарешті, можемо використовувати великі зображення або великі флеш-файли.
Проте, з появою мобільних розробок, ми знову повернулися до тієї ж проблеми. Вкрай важливо, оптимізувати сайти під мобільні пристрої, так щоб додатки, які відображають веб-сторінки, працювали швидше: завантажували менше інформації і негайно реагували на дії користувача.
зображення
Забезпечити потрібний розмір
Часто ми використовуємо ті ж зображення для різних розділів нашого сайту. Наприклад, в інтернет-магазині всі товари мають загальний знімок. Давайте припустимо, що у нас є три сторінки, на яких виводиться це зображення: одна сторінка - це загальний перелік товарів, до якого входить даний продукт, друга - власне його детальний опис, і третя - висновок зображення товару в оригінальному розмірі.
Отже, нам потрібно одне і те ж зображення в трьох різних розмірах, і якщо ми використовуємо один і той же файл для всіх трьох сторінок, то браузер буде завантажувати його в повному розмірі навіть для сторінки списку товарів.
Де насправді вистачило б і картинки 200 на 200 пікселів. Якщо вихідний файл має розмір близько 1 Мб, а у нас списку існує десять позицій, то тільки при завантаженні зображень користувачеві доведеться викачати 10 Мб.
Це не дуже добре. Якби ви спробували створити різні зображення для різних сторінок вашого сайту, це заощадило б користувачеві багато KBs. Також правильно було б звертати увагу на дозвіл екрана пристрою користувача.
Наприклад, якщо хтось заходить на сайт з мобільного пристрою, йому немає ніякої потреби завантажувати величезне зображення в шапці сайту, яке ви зазвичай використовуєте. За допомогою Медіа-запитів CSS можна відправляти користувачеві на завантаження зображення менших розмірів:
Завантаження зображення з застосуванням налаштувань потрібного розміру не завжди достатньо. Файли деяких форматів можуть бути значно зменшені, при цьому без втрати якості. Є багато програм, які можуть вам у цьому допомогти. Наприклад, Photoshop підтримує відмінну функцію «Зберегти для Web та інших пристроїв»:
У даній панелі є безліч опцій, але одна з найважливіших - «Якість». Якщо задати її значення в районі 80%, то можна значно зменшити розмір файлу.
Звичайно, можна використовувати для стиснення файлів код, але я особисто віддаю перевагу Photoshop. Його я використовую завжди, коли є така можливість. Нижче наводиться простий приклад коду PHP:
Також для збільшення продуктивності вашого застосування, ви можете зменшити кількість запитів до сервера. Адже кожне нове зображення означає новий запит.
Відмінне рішення - об'єднати різні зображення в одне. Отримане комплексне зображення називається спрайт, і через зміну стилю розміщення фонової картинки ви можете виводити тільки частину спрайту з потрібним вам фрагментом.
Наприклад, Twitter Bootstrap при завантаженні головної сторінки використовує спрайт для своїх внутрішніх іконок:
Тоді через CSS ви можете прописати приблизно ось такий код, щоб вивести ту частину спрайту, що вам потрібна:
кешування
Є кілька способів управління кешуванням, і я пропоную вам ознайомитися з цією великою статтею. щоб дізнатися про них докладніше. В цілому ж, ви можете контролювати процес налаштування заголовків таким чином:
попередня вибірка
HTML5 розвивається кожен день. У ньому є одна корисна особливість, яка називається попередня вибірка. З її допомогою браузеру повідомляється, що в найближчому майбутньому вам будуть потрібні деякі ресурси, і він повинен завантажити інформацію з них зараз - на майбутнє. наприклад:
Схеми URI- даних / Вбудовані картинки
Пару років тому переді мною була поставлена задача розробити просту веб-сторінку. яка б складалася тільки з одного файлу HTML.
І, звичайно, потрібно було вбудувати в код кілька зображень. Схеми URI- даних допомогли мені вирішити цю проблему. Ідея полягала в тому, щоб конвертувати зображення в кодуванні Base64 і помістити його в атрибут SRC тега IMG.
За допомогою цього методу ваше зображення насправді буде частиною HTML-коду, і вся сторінка буде завантажуватися за один HTTP-запит. Звичайно, якщо у вас велике зображення, рядок коду буде дуже довгою. Ось приклад простого скрипта PHP. який перетворює зображення в рядок коду base64:
У деяких випадках це може бути корисним для вас, але майте на увазі, що IE не дуже добре обробляє такі коди.
Мені подобається думати, що опис CSS-стилів схоже на складання коду. Ви описуєте стилі для різних блоків вашого сайту і взаємозв'язків між ними. Тому я думаю, що управління CSS є дійсно важливою річчю.
Кожна частина сторінки повинна мати свій власний стиль, і вони повинні чітко розділятися. Зберігання стилів для різних елементів в різних файлах забезпечує хорошу організацію. Але з цим пов'язані і певні проблеми.
Всі ми знаємо, що використання оператора @import не дуже гарна ідея. Тому що кожен новий оператор @import означає новий запит до сервера. І якщо у вас, наприклад, є 20 різних файлів CSS, то це означає, що браузер буде виконувати 20 HTTP-запитів.
І браузер не зможе завантажити / вивести сторінку, перш чим не будуть завантажені всі стилі. Якщо деякі з ваших файлів CSS видалені або мають великий розмір, то перш ніж ви побачите сторінку на екрані може пройти великий час.
Використовуйте CSS-препроцесори
За допомогою CSS-препроцесорів можна вирішити всі описані вище проблеми. Ви можете все також розділяти ваші стилі по різних файлах, але в кінцевому підсумку препроцесор компілює їх в один CSS-файл. Крім того, CSS-препроцесори надають ще багато дійсно цікавих функцій: змінні, вкладені блоки, Mixins і успадкування.
Код і раніше представляється в форматі CSS, але тепер він уже добре відформатований і структурований. Є кілька поширених препроцесорів, які ви можете спробувати застосувати на своєму сайті: Sass. LESS і Stylus. Ось простий приклад коду CSS-препроцесора LESS:
В кінцевому підсумку він призводить до наступної угруповання стилів:
Або, наприклад, якщо у вас є стиль кнопки, і ви хочете вивести таку ж кнопку, тільки з іншим кольором тексту. Тоді ви можете використовувати наступний код:
ефективний CSS
Дуже часто розробники не замислюються про ефективність CSS. Ефективність CSS визначає швидкість виведення сторінки, і, якщо ваші стилі неефективні, запит буде оброблятися браузером дуже повільно. Цікаво, що браузери розбирають селектори CSS справа наліво. Це означає, що наступний код:
неефективний в принципі. Движок завантажить всі теги і повинен буде оцінювати кожен з батьківських елементів, щоб, врешті-решт, зібрати всі необхідні стилі. Ви також повинні знати, що з точки зору ефективності види селекторів ранжуються в наступному порядку: ID, клас, тег і універсальні.
Це означає, що елемент з ID SET буде показуватися швидше, ніж просто елемент з селектором тегів. Звичайно, немає сенсу додавати ідентифікатори до всіх елементів в дереві DOM. але ви повинні обов'язково проінспектувати свій код і поліпшити його там, де це можливо. Наприклад, якщо у вас є запис на зразок цієї:
Ви повинні видалити частини ul. тому, що у вас на сторінці є тільки один елемент #navigation. Або в наступному селекторі:
зрозуміло, що елемент .content є дочірнім для тега body. Насправді все елементи є для нього дочірніми.
Ось дві корисні посилання по цій темі: developers.google.com і css-tricks.com
розмір файла
Як уже згадувалося вище, потрібно зменшувати розмір початкового коду настільки, наскільки це взагалі можливо. Тому що браузер не виводить сторінку, поки не завантажить всі CSS. Ось кілька порад, які допоможуть вам зменшити розмір файлу.
Об'єднуйте схожі стилі:
можна перетворити в:
Використовуйте скорочення. замість:
Можна написати наступний код:
Мінімізуйте ваш CSS-код. Ви можете зробити це за допомогою інструментів, які призначені для видалення зайвих пробілів і рядків. Наприклад, CSSOptimiser або Minifycss.
Це звичайна практика, коли подібні інструменти використовуються на серверах або для оптимізації додатків, тобто додаток, написане на тій же мові, що і сам движок сайту. Зазвичай ці компоненти допомагають мінімізувати ваш код і зробити його більш зручним для користувача додатків.
Розміщуйте посилання на ваші файли CSS між тегами
.Буде корисно включити посилання на ваші CSS-файли між тегами
. В цьому випадку браузер буде завантажувати їх першими.Зменшення кількості HTTP-запитів
мінімізувати код
Більшість з цих інструментів використовують перейменування змінних, а також перетворення кількох рядків в одну. Що робить практично неможливою подальшу налагодження коду.
Спробуйте CommonJS. AMD. RequireJS
Всередині скрипта main.js ви можете прописати функцію require () для завантаження будь-якого іншого сценарію, який вам потрібен:
Використання розділу імен
Якщо залишити наведений вище код, як є, по-перше він може бути скопійований кимось, а, по-друге, існує ймовірність, що під час використання будуть часто виникати конфлікти з іншими бібліотеками вашого проекту. Однак згрупувавши його, як самостійний об'єкт (розділ імен), можна забезпечити його захист:
Використовуйте шаблони дизайну
Використання деяких з них допоможе вам створити функціональні і надійні додатки. Якщо я спробую хоча б побіжно охопити їх усі, то мені доведеться написати цілу книгу. Однак ось приклади деяких з них:
шаблон конструктора
Даний шаблон можна використовувати для створення об'єкта певного типу. наприклад:
шаблон модуля
Шаблон модуля дає нам можливість створювати приватні та публічні методи. Наприклад, у наведеному нижче коді, змінна _index і метод privateMethod є приватними. А increment і getIndex - публічні:
шаблон спостереження
Скрізь, де у вас є підписки або потрібна модерація подій, у вас, ймовірно, спостерігається наступна картина. Є люди, які відстежують зміни, пов'язані з певним об'єктом.
Як тільки відбувається якась агресивна дія, об'єкт повідомляє про це спостерігачів. У наведеному нижче прикладі показано, як ми можемо додати спостерігача до об'єкта користувачів:
Шаблон ланцюжка функцій
Даний шаблон є хорошим способом організувати публічний інтерфейс модуля. Це економить час і покращує Новомосковскбельность:
Assets-Pack
Часто якісь його елементи запускаються під час кешування, але всі операції відбуваються безпосередньо під час виконання крипта. Таким чином, перевіряється логіка коду, за допомогою якого здійснюється обробка запиту JS або CSS файлів. Під час цього процесу і здійснюється компіляція, мінімізація і впорядкування елементів структури вашого сайту.
У моїх останніх проектах я використовував інструмент, який називається assets-pack. Це дійсно корисний набір функцій, і нижче я докладно поясню, як він функціонує. Але ще більш цікаво, то, як я його застосовую. Дана бібліотека призначена для використання тільки в процесі розробки.
Вона не призначена для впровадження в вихідний код сайту і не передбачає розгортання на сервері. Вона використовується тільки тоді, коли ви працюєте над вашими активними елементами (CSS, JS). Вона відстежує зміни, що вносяться до певні папки і компілює / запаковує код в окремий файл. При такому підході вам більше не потрібно самим дбати про мінімізацію або компіляції.
Все, що вам потрібно зробити, це просто відправити відкомпільований статичний файл на пристрій користувача. Це підвищує продуктивність програми, так як воно обслуговує тільки статичні файли і, звичайно, робить весь процес простіше. Вам не потрібно нічого налаштовувати на сервері або задавати непотрібну логіку.
Нижче наводиться опис установки і використання assets-pack.
Використання
Модуль працює в конфігурації JSON. Якщо ви запускаєте його з командного рядка, то повинні заздалегідь подбати про те, щоб все установки були прописані у файлі JSON. Набираємо в режимі емуляції командного рядка наступні команди:
Створюємо файл assets.json і запускаємо в тому ж каталозі на виконання наступну команду:
Налаштування повинні задаватися в чинному файлі / об'єкті JSON. Який представляє собою просто масив об'єктів:
об'єкт елемента
Базова структура об'єкта елемента виглядає наступним чином:
Задавати параметри опції pack не обов'язково. За замовчуванням інструмент налаштований так, щоб мінімізувати загальний розмір. Ось кілька прикладів налаштувань:
Оптимізація .less файлів
Оптимізація .less файлів виробляється небагато по-іншому. Тут вже обов'язково задавати параметри опції pack, в якості яких, як правило, виступають точки входу. Ви повинні будете імпортувати всі існуючі .less файли. Виключені опції не будуть доступні для обробки.
Якщо у вас виникнуть якісь проблеми, будь ласка, перевірте файл tests / packing-less.spec.js через спеціальний сервіс на GitHub.
Оптимізація файлів інших форматів
assets-pack може обробляти файли будь-якого формату. Наприклад, ми можемо об'єднати декілька шаблонів HTML в один файл. Для цього потрібно задати налаштування приблизно таким чином:
Однак ви повинні враховувати, що в цьому випадку мінімізація коду виконуватися не буде.
висновок
Як розробники, ми повинні намагатися забезпечити нашим користувачам максимальну продуктивність додатків і сервісів.
Переклад статті «Web Assets - Tips for Better Organization and Performance» був підготовлений дружною командою проекту Сайтобудування від А до Я.