У безперервній гонитві за швидкістю сторінки ми часто повертаємося до однієї точки. Незважаючи на зусилля відділів продукту, маркетингу та розвитку, спрямованих на мотивацію технічних команд, завдання, які могли б покращити продуктивність сайту, часто відкладаються через необхідність рефакторингу, і навіть коли вони виконані, вони не завжди дають повні результати. У цьому циклі корисно розглянути деякі глибокі погляди на досягнення реальної ефективності. Наприклад, які уроки ми можемо винести зі швидкості React.js і Vue.js або їхніх розширень SSR (відтворення на стороні сервера), таких як Next.js і Nuxt.js, порівняно з іншими платформами? Чи не час оптимізувати МБ файлів jQuery та CSS? Коли прокинуться великі компанії, які жертвують своєю продуктивністю в Інтернеті на користь погано поінформованих розробників інтерфейсу? Давайте розглянемо ці запитання одне за іншим.
Чому сайти на основі Next.js і Nuxt.js швидкі?
Платформи Next і Nuxt, які є зручними для SEO структурами, побудованими на React і Vue, виділяються своєю швидкістю. Але чому ці платформи такі швидкі?
React.js і Vue.js це фреймворки на основі компонентів, які розбивають кожну сторінку на підкомпоненти, як показано нижче.
Щоб проілюструвати це, візьмемо реальний приклад: сторінку електронної комерції. Можна вважати, що ця сторінка списку містить такі підкомпоненти:
- Header
- Listing
- Інформація про вхід до списку
- Заголовок сторінки
- Breadcrumb
- Кількість продуктів
- Фільтр
- фільтр категорій
- Фільтр цін
- ...
- Сортування
- Картки товарів
- Фото продукту
- Інформація про продукт
- Найменування
- Ціна товару
- Закреслена ціна
- Ціна продажу
- Облікова ставка
- Інформація про кампанію
- Нумерація сторінок
- Вміст категорії
- Інформація про вхід до списку
- Нижній колонтитул
Під час створення програми на основі компонентів за допомогою Nuxt.js кожен із цих компонентів кодується окремо та включається в головну сторінку. Наприклад, розглянемо файл під назвою ProductPhoto.js. Які б функції не потрібні для фотографій товару (карусель, адаптивне відображення зображень тощо), код JS написаний у цьому компоненті. Подібним чином до нього включено лише файли CSS, які використовує цей компонент. Це означає, що лише файли, необхідні кожному компоненту, виконуються, якщо компонент використовується.
Як цей процес зараз обробляється на більшості веб-платформ?
Файл script.js містить код для всього: від членства, фільтрів і сторінок кошика до меню, яке працює на всіх сторінках. Результат?
Веб-сайти з a 3 МБ файл JS і 1.5 МБ CSS файл. Основна проблема полягає не лише в розмірах файлів, а й у тому, що ви не можете очікувати, що процесор середнього мобільного пристрою Android виконає тисячі рядків коду за мілісекунди. Виконуючи лише той код, який вам потрібен, ви можете досягти підвищення продуктивності.
Як усунути ресурси, що блокують рендеринг?
Сьогодні 32% із 1 мільйона найкращих веб-сайтів використовують бібліотеку шрифтів Font Awesome, розмір якої в середньому становить близько 250 КБ. Враховуючи, що асинхронне завантаження не є кращим через ефект переміщення, подумайте про те, скільки шрифтів видно на першому екрані сторінки, коли вона відкривається на мобільному пристрої чи комп’ютері. Коротке дослідження на 50 різних платформах показало, що в середньому використовується 3.4 піктограми (найчастіше: кошик, користувач, меню, сповіщення). Таким чином, щоб завантажити лише чотири значки без проблем, ми завантажуємо всю бібліотеку.
Як передові фреймворки JS керують цим? Завдяки імпорту лише SVG-формату піктограм, які використовуються у відповідному компоненті, що усуває необхідність завантажувати цілі бібліотеки шрифтів або CSS.
Що говорять нам використання Bootstrap і React JS?
Бібліотека Bootstrap JS має частку ринку 26% на всіх сайтах у всьому світі, тоді як використання React становить близько 4%. Bootstrap популярний завдяки своїй гнучкості та простоті використання, що дозволяє швидко розвиватися. Однак ця гнучкість має свою ціну: загальні функції JS, широке охоплення коду та функції для функцій, які ви можете ніколи не використовувати, включені у ваш проект.
Отже, давайте запитаємо: що означає збільшення використання більш ніж на 100% від від 10,000 1,000 до XNUMX XNUMX найпопулярніших сайтів? Це показує, що найкращі перетворюють деталі на свою користь, щоб стати ще кращими.
Таким чином, замість того, щоб переписувати наші сайти за допомогою таких технологій, як Далі Nuxt, Angular, React, Vueтощо, ми повинні зрозуміти, що ці технології роблять правильно для швидкості, і застосувати ці найкращі практики до наших веб-додатків.
