Можливість писати HTML і CSS з твердим розумінням веб-технологій - це великий досвід. Але в міру зростання коду і трафіку сайту, в гру вступає новий набір навичок, той, який є надзвичайно важливим як під час розробки, так і для користувацького досвіду. Знання основ продуктивності і організації сайту може надати велике значення.
Організація і архітектура коду може істотно вплинути не тільки на швидкість розробки, але і на швидкість відображення сторінок. Обидві вони можуть викликати значні проблеми не тільки для розробників, але і для користувачів. Знайдіть час щоб спроектувати правильну структуру коду і визначте, як різні компоненти працюватимуть спільно - це може прискорити готовий сайт і поліпшить ваш досвід у всьому.
Крім того, ці кілька невеликих кроків щодо поліпшення продуктивності сайту можуть окупитися в вигляді дивідендів. Продуктивність сайту нагадує правило 80/20, де 20% оптимізації прискорить приблизно 80% сайту.
Стратегія і структура
Перша частина щодо поліпшення продуктивності і організації сайту обертається навколо визначення оптимальної стратегії і структури для розробки коду. Зокрема, побудова строгої архітектури папок, виклад шаблонів дизайну і пошук способів повторного використання типового коду.
архітектура стилю
Питання, як організувати стилі, зводиться до особистих вподобань і тому, що є кращим для конкретного сайту, але в цілому, є передовий досвід, яким варто слідувати. Один з них включає в себе поділ стилів на основі сенсу, який включає створення папок для загальних базових стилів, компонентів для користувача інтерфейсу і модулів бізнес-логіки.
Описана вище архітектура включає в себе три папки, все з окремими групами стилів. Тут мета - почати думати про сайтах як про системи. а не як окремих сторінках і архітектура коду повинна відображати це мислення. Зверніть увагу, що тут немає ніяких стилів конкретних сторінок.
Папка з базовими стилями включає в себе загальні стилі і змінні, які будуть використовуватися по всьому сайту, наприклад, для макета і друкарні. Папка з компонентами включає в себе стилі для певних елементів призначеного для користувача інтерфейсу, які розбиті на різні файли компонентів, таких як попередження і кнопки. Нарешті, папка з модулями включає в себе стилі для різних розділів сторінки, які визначаються відповідно до потреб бізнесу.
Стилі компонентів - це чисто інтерфейс і у них немає нічого спільного з основною бізнес-логікою сайту. Модулі включають в себе стилі, характерні для бізнес-логіки. При розмітці модуля в HTML він зазвичай використовує різні компоненти для користувача інтерфейсу. Наприклад, бічна панель сторінки може містити список і кнопку, стилі яких визначені в стилях компонента, в той час як інші стилі, необхідні для бічній панелі, успадковуються від стилю модуля. Поділ стилю заохочує добре продумувати пресети і можливості стилів, які будуть широко розповсюджуватися і використовуватися повторно.
Стратегія організації стилів це не зовсім новий шлях і вона вже згадувалася в різних методологіях CSS, включаючи об'єктно-орієнтована CSS (OOCSS) і SMACSS. Ці методології мають свою власну думку про структуру, а також про те, як використовувати стилі.
Об'єктно-орієнтована CSS
Методологія об'єктно-орієнтованого CSS вперше була описана Ніколь Салліван в її роботі по написанню стилів для великих сайтів. Об'єктно-орієнтована CSS визначає два принципи, які допоможуть створювати масштабовані веб-сайти з суворою архітектурою і раціональним кількістю коду. Ці два принципи включають в себе:
- поділ структури і оформлення;
- розділення вмісту і контейнера.
В цілому, поділ структури і оформлення включає відділення компонування елемента від теми сайту. Структура модуля повинна бути прозорою, дозволяючи іншим стилям успадковуватися і відображається без конфліктів. Найчастіше це вимагає правильної сітки і структури макета, поряд з добре продуманими модулями.
Поділ змісту і контейнера включає в себе видалення залежності у вкладених дочірніх елементів від батьківського елемента. Заголовок повинен виглядати так само, незалежно від його батьківського контейнера. Щоб досягти цього, елементи повинні наслідувати стилі за замовчуванням, потім розширені кількома класами при необхідності.
Основа включає в себе стилі базових елементів і охоплює загальні значення за замовчуванням. Структура потім встановлює розміри і стилі сітки різних елементів, визначає їх компонування. Стилі модуля - це більш конкретні стилі, орієнтовані на окремі частини сторінки, такі як навігація або її основні особливості. Стилі стану потім використовуються для доповнення або перевизначення інших стилів в тому випадку, якщо модуль включає альтернативне стан, наприклад, активну вкладку. Нарешті, тема може бути додана, коли включені стилі, засновані на оформленні або зовнішньому вигляді різних модулів.
вибір методології
Вибір, яку методологію використовувати, в будь-якому випадку повністю залежить від вас і що вам подобається, то краще для даного веб-сайту. Взагалі кажучи, поєднання OOCSS і SMACSS працює добре, запозичуючи бажані вами принципи кожної методології.
продуктивність селектор
Однією функціональністю CSS часто неусвідомлено зловживають - це селектори. Значна увага в CSS віддається властивостями і значенням. Поки ці стилі застосовуються до правильного елементу, все виглядає нормально. Це дуже погане допущення. Вибір елементів в CSS впливає на продуктивність, в тому числі, на те, як швидко відображається сторінка, а також як на практиці вписати стилі в загальну архітектуру сайту.
Зберігайте селектори короткими
Є кілька переваг, навіщо зберігати селектори CSS при можливості короткими. Вони включають в себе мінімізацію специфічності, що дозволяє краще успадковуватися і переноситися, плюс підвищення ефективності. Довгі, більш точні селектори знижують продуктивність, оскільки вони змушують браузер відображати кожен окремий селектор типу справа наліво. Це також накладає тягар на всі інші селектори, щоб вони стали більш специфічними.
У наведеному вище коді перший селектор вельми специфічний і може бути набагато швидше ідентифікований і показаний за допомогою класу. Крім того, використання класу в цьому випадку значно знижує необхідність визначення батьків цього елемента, що дозволяє елементу з часом міняти своє місце розташування без порушення будь-яких стилів.
Другий приклад включає в себе більш короткі селектори, ніж в першому прикладі, але вони можуть бути поліпшені шляхом забезпечення такого ж рівня специфічності для кожного селектора. Уникайте застосування надмірно конкретних селектор, натомість це зменшить шанс порушення належного порядку елементів при їх зміні. Видаливши деякі окремі блоки селекторів і давши всім селекторам однакову силу, все це дозволить їм краще взаємодіяти.
Взагалі, мета коротких селекторів - зменшити специфічність, створити чистий, більш чуйний код.
Віддавайте перевагу класи
Класи це добре, тому що вони відображаються швидко, дозволяють повторно використовувати стилі і широко застосовуються при створенні сайту. Існують загальні методи застосування класів, які дозволяють побачити, що класи працюють належним чином.
Оскільки селектори відображаються справа наліво, важливо стежити за ключовим селектором. Це селектор в самому кінці, крайній праворуч. Ключовий селектор має вирішальне значення, оскільки він визначає перший елемент, який браузер збирається знайти. Поганий ключовий селектор може відправити браузер полювати на диких гусей. Не бійтеся використовувати клас, щоб зробити елемент більш унікальним, просто на благо продуктивності.
Крім того, не я випередив селектор класу елементом. Це забороняє стилям застосовуватися до різних елементів і підвищує загальну специфічність селектора.
Варто також відзначити - тримайтеся якомога далі від ідентифікаторів, оскільки вони надмірно специфічні і не допускають будь-яких повторень. Зрештою застосування ідентифікатора не сильно відрізняється від використання! Important.
Повторне використання коду
Одне з найбільших падінь продуктивності приходить з роздуванням розміру файлу і непотрібним відображенням в браузері. Одним з найшвидших способів, який допоможе багато в чому скоротити розміри CSS-файлу, є повторне, наскільки це можливо, використання стилів. Будь-які повторюються стилі або шаблони інтерфейсу повинні бути об'єднані, задіюючи загальний код. Якщо два модулі використовують однаковий фон, закруглені куточки і тінь у блоку, немає причин явно вказувати ті ж стилі два рази. Замість цього вони можуть бути об'єднані в одному класі, стилі при цьому пишуться один раз.
Повторно використовуваний код не повинен працювати за рахунок семантики. Одним з методів може бути з'єднання селектор разом, розділяючи їх комою і дозволяючи однаковим стилям успадковуватися відразу двом селекторам. Інший підхід, який часто зустрічається в раніше згаданих методологиях OOCSS і SMACSS, включає в себе прив'язування стилів до одного класу, а потім використання декількох класів в одному елементі.
Між цими застосовуваними підходами немає великої різниці, так як код використовується повторно, а загальний розмір файлу зменшується.
Мінімізація та стиснення файлів
стиснення gzip
Налаштування gzip досить безболісна і HTML5 Boilerplate виконав велику роботу для цього. Для файлів gzip потрібно додати файл .htaccess в кореневу папку веб-сервера, позначаючи конкретні файли, які будуть стиснуті. Точка на початку імені файлу правильна, так як файл .htaccess є прихованим.
- mod_setenvif.c
- mod_headers.c
- mod_deflate.c
- mod_filter.c
- mod_expires.c
- mod_rewrite.c
Взагалі кажучи, це не є проблемою і деякі веб-сервери також можуть налаштувати для вас стиснення. Зрештою, стискати файли теж в інтересах веб-сервера.
Вимірювання стиснення
У браузері Google Chrome веб-інспектор видає достаток даних пов'язаних з продуктивністю, особливо у вкладці Network. Крім того, є кілька сайтів, які допомагають визначити, що стиснення gzip включено.
Мал. 1.01. Вкладка Network ідентифікує кожен завантажений в браузері файл і виводить розмір файлу і час його завантаження. Зверніть увагу, що застосування gzip знизило розміри файлів приблизно на 60%.
Мал. 1.02. Дивлячись на файл, конкретно визначають, який тип стиснення підтримує браузер. У нашому випадку gzip, deflate і sdch позначені як підтримувані в заголовку запиту. Дивлячись на заголовки відповіді визначають, що файл був відправлений за допомогою методу стиснення gzip.
стиснення зображень
Зниження розміру текстового файлу допомагає, але ви отримаєте більш високі результати шляхом стиснення розміру файлів зображень. Загальний розмір файлів всіх зображень по всьому сайту можна швидко скласти і стиснення зображень в значній мірі допоможе зберегти розмір файлів під контролем.
Є кілька інструментів, які допомагають стискати зображення, двома кращими є ImageOptim для Mac і PNGGauntlet для Windows. Обидва вони пропонують стискати найбільш популярні формати зображень, зокрема, файли JPG і PNG.
Демонстрація стиснення зображення
Нестиснене, 455 Кб
Мал. 1.03. За допомогою ImageOptim це зображення було зменшено більш, ніж на 14% без зниження або втрати якості.
Слід також зазначити, що установка розмірів зображення в HTML шляхом додавання атрибутів width і height дійсно допомагає відобразити сторінку швидше, залишаючи відповідне простір для зображення. Зрозумійте, ці атрибути повинні бути використані тільки для ідентифікації точних розмірів зображення, а не для його скорочення. Використання великого зображення, а потім його зменшення за допомогою атрибутів height і width є поганою практикою, так як це завантажує більше даних, ніж необхідно.
Зменшення HTTP-запитів
Після розміру файлу число HTTP-запитів до сайту - одна з найбільших пасток продуктивності. Кожен раз, коли робиться запит до сервера, збільшується час завантаження сторінки. Деякі запити повинні завершитися до того, як почнуться інші і занадто багато запитів може втопити сервер.
об'єднання файлів
Практика спрайтів в CSS включає використання одного фонового зображення для декількох елементів. Мета полягає в тому, щоб скоротити число HTTP-запитів, зроблених з використанням декількох фонових зображень.
Щоб створити спрайт візьміть жменьку фонових зображень, ті, які часто використовуються, і розташуйте їх в одне зображення. Потім, за допомогою CSS додайте спрайт як фонове зображення до елемента використовуючи властивість background-position для відображення правильної фонової картинки.
Уявіть, що фонове зображення ковзає позаду елементів, тільки щоб виставити правильне фонове зображення для даного елемента. Наприклад, якщо елемент розміром 16 пікселів в ширину і 16 пікселів у висоту, то він може виставити тільки фонове зображення 16 пікселів на 16 пікселів, а інша частина фонової картинки буде прихована.
Використовуючи спрайт вище, меню може бути створено через фон для елементу . Потім, за допомогою класів змінимо положення фону спрайту, щоб показати відповідні іконки.
демонстрація спрайтів
Картинки через data: URL
Додатково, замість спрайтів закодовані дані зображення можуть бути включені в HTML і CSS безпосередньо через data: URL. взагалі усуваючи необхідність в HTTP-запиті. data: URL прекрасно працює для маленьких зображень, які ніколи не змінюються і там, де HTML і CSS в значній мірі кешуються. Є, однак, кілька проблем. Картинки може бути складно міняти і підтримувати, що призводить до необхідності генерувати інші дані. І вони не працюють в старих браузерах, зокрема, Internet Explorer 7 і нижче.
Якщо використання data: URL допомагає скоротити кілька HTTP-запитів і HTML або CSS можуть бути в значній мірі кешуватися, то переваги, як правило, переважують ризик. Кілька інструментів допоможуть генерувати data: URL, включаючи конвертери і генератори візерунків. Будьте обережні і завжди двічі перевірте, що data: URL менше, ніж саме зображення.
Демонстрація data: URL
Кешування загальних файлів
Ще один спосіб допомагає скоротити HTTP-запити і подавати сторінки швидше - це кешування загальних файлів. Коли сторінка завантажується перший раз, певні файли можуть потім кешуватися. Тепер браузер не повинен запитувати ті ж файли при повторному візиті протягом досить довгого часу. Наскільки довгий цей період часу вирішувати вам, все залежить від того, як довго ви б хотіли, щоб користувачі утримували певні типи файлів.
Подібно файлів gzip, настройка заголовків для закінчення кешування файлів може бути встановлена через файл .htaccess. І знову HTML5 Boilerplate знаходиться на один крок попереду нас. В їх файлі .htaccess є розділ, позначений як Expires headers.