Оптимізація веб-сторінки: докладний посібник

1. Вибір правильного формату
2. експериментальні формати
3. Оптимізація інструментами і алгоритмами
4. адаптивність
5. Вибір правильного формату
6. Обмежте кількість шрифтів
7. Позначте стратегію завантаження шрифтів
8. Позбавтеся від зайвих залежностей
9. Інші матеріали по темі:

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

Інтернет розвивається з неймовірною швидкістю, як і розробляється нами веб-платформа. Часто ми не замислюємося про те, як йде справа у наших клієнтів. Лише побіжно глянувши на сьогоднішній стан Інтернету, можна зробити висновок, що ми абсолютно забули, наскільки він мінливий.

Так що ж є сучасний інтернет?

Тільки у 46% з 7.4-мільярдного населення Землі є доступ в інтернет. Середня швидкість з'єднання - 7Мб / с. Що важливіше, 93% користувачів сидять в інтернеті з мобільних пристроїв, тому сьогодні непростимо забувати про мобільних платформах.

Наші сайти не в кращій формі - сьогодні середньостатистичний сайт важить стільки ж, скільки оригінальний Doom (близько 3 Мб). Справедливості заради варто помітити, що для статистики краще використовувати медіани (прочитайте статтю Іллі Григорик «Ідеальна середня стаття - це міф»). Медіанний сайт важить близько 1.4Мб. Зображення займають приблизно 1.7Мб, JavaScript - 400Кб. Цій проблемі схильні не тільки веб-платформи. Чи не краще йде справа і з нативними додатками.

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

Як врахувати ці нюанси в дизайні і розробці, які не завдавши при цьому шкоди поданням?

Один з найбільш ефективних, але рідко використовуваних способів збільшення продуктивності полягає в тому, щоб зрозуміти, як браузер аналізує і зберігає статику. Сучасні браузери вельми успішно аналізують пріоритет ресурсів прямо під час їх парсинга. І саме тут на сцені з'являється критичний запит.

Запит є критич ески м, якщо в ньому міститься статика, необхідна для рендеринга контенту в рамках користувальницького робітничо го вікна.

Для більшості сайтів це буде HTML, стилі, логотип, шрифти і, можливо, зображення. Але на ділі виявляється, що в цей же час крім них запитуються безліч інших, другорядних речей (JavaScript, трек-коди, реклама і т. Д.). На щастя, ми можемо контролювати цю поведінку, вказуючи пріоритет подгрузки статики.

Завдяки <link rel = "preload»> можна безпосередньо наказати високий пріоритет в черзі завантаження статичний файлів, що може значно оптимізувати UX.

Для багатьох критичні реквести досі залишаються чорним ящиком, і на цьому значною мірою позначається недолік у вільному доступі матеріалів на дану тему. Однак, нещодавно Бен Шварц ( Ben Shwartz ) Опублікував неймовірно вичерпну і доступну статтю з цього предмету. Також рекомендується до прочитання матеріал Preload, Prefetch and Priorities in Chrome .

Для відстеження пріоритетів запитів можна використовувати Lighthouse performance tool і Critical Request Chains audit , Або стежити за запитами у кладці Network в панелі розробника Chrome.

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

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

Вибір правильного формату

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

• Вектор: не залежить від дозволу, як правило значно компактніше. Ідеально підходить для логотипів, іконок і простих зображень, заснованих на геометрії.
• Растр: підходить для високо деталізованих зображень, таких як фотографії.

Після прийняття цього рішення, вам відкриється широкий вибір: JPEG, GIF, PNG -8, PNG -24, або новітні формати, такі як WEBP або JPEG - XR. Як не помилитися у виборі з такого широкого спектру?

• JPEG: для зображень з багатою палітрою кольорів (наприклад, тих же фотографій)
• PNG -8: для зображень з малою кількістю колірної
• PNG -24: для зображень з прозорими ділянками
• GIF: для анімацій

експериментальні формати

Останнім часом на арені з'явилися кілька нових форматів: WebP, JPEG 2000 і JPEG - XR. Всі вони були створені розробниками браузерів.

WebP - найпопулярніший з них. Він підтримує стиснення з втратами і без втрат, що робить його неймовірно гнучким. Стиснутий без втрат WebP важить на 26% менше PNG і на 25-34% легше JPG. Він підтримується 74% браузерів, а Photoshop дозволяє конвертувати в цей формат JPG і PNG.

Оптимізація інструментами і алгоритмами

Навіть використання найефективніших графічних форматів не виправдовує ігнорування подальшої оптимізації. Це - ключова щабель.

Якщо ви вибрали SVG, який сам по собі відносно мало важить, він теж повинен бути стиснутий. Для цього існує ряд непоганих інструментів, таких як SVGO або SVGOMG . Також, оскільки SVG - формат, заснований на XML, його можна стиснути за допомогою GZIP на стороні сервера.

Для більшості інших форматів прекрасним вибором буде ImageOptim . Ще в цьому році Google представив Guetzli - відкритий алгоритм, що відбувається з минулого досвіду з WebP і Zopfi. Він дозволяє домогтися стиснення JPEG до 35%. Єдиний його недолік - низька продуктивність: близько хвилини CPU на один мегапиксель.

адаптивність

Десять років тому можна було обійтися одним дозволом на всі випадки життя. Сьогодні ж, в епоху адаптивного веба, оптимізація грає ключову роль. завдяки Responsive Images Community Group , Веб-розробники прекрасно підковані і озброєні.

Можливість використання кастомних шрифтів - неймовірно потужний дизайнерський інструмент. Але велика сила пов'язана з великою відповідальністю. За статистикою шрифти є головними ворогами продуктивності приблизно на 68% сайтів.

Вибір правильного формату

Існує чотири веб-формату: EOT, TTF, WOFF і новіший WOFF 2. TTF і WOFF використовуються найчастіше і підтримуються більш ніж 90% браузерів. Залежно від підтримки браузерами, найоптимальнішим вважається WOFF 2, а для старих браузерів - WOFF. Гідність WOFF 2 полягає в тому, що він має на увазі ряд кастомних препроцесорну і стискають алгоритмів, що дозволяє зменшити підсумковий вага файлу на 30% і істотно підвищити можливості парсинга.

Обмежте кількість шрифтів

Незалежно від того, де хостятся шрифти, їх кількість, різновиди та стилі істотно впливають на ресурси продуктивності.

В ідеалі можна було б обійтися одним шрифтом зі звичайним і жирним накресленнями.

Позначте стратегію завантаження шрифтів

Спочатку браузер будує DOM і CSSOM; шрифт не будуть довантажуватися до тих пір, поки не зустрінуться в CSS -селекторе вже існуючого вузла DOM. Така поведінка відчутно уповільнює рендеринг тексту, часто приводячи до ефекту FOIT (Flash of Invisible Text).

Найбільш простим і ефективним рішенням може стати FOUT (Flash of Unstyled Text).

Font - display - нова властивість CSS, що надає можливість вирішити проблему без використання JS. На жаль, він підтримується лише частково (в Chrome і Opera) і все ще знаходиться в процесі розробки в Firefox і Webkit.

Оптимізувати отримання JavaScript - це тільки півсправи. Після того, як код буде завантажений, він буде підданий парсингу, скомпільовано і запущений в браузері. Побіжного погляду на кілька популярних сайтів досить, щоб зрозуміти, що gzipped JS після розпакування стає як мінімум в три рази більше.

Позбавтеся від зайвих залежностей

В сучасних менеджерах легко простежити кількість і розмір всіх залежностей. Добрими інструментами є webpack-bundle-analyzer і Bundle Buddy . Візуальні інструменти дозволяють виявити дублювання коду, найбільші витрати продуктивності, непотрібні залежності.

В VS Code і Atom є розширення Inport Cost, що робить вага імпортованого пакета більш наочним.

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

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

Інші матеріали по темі:

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