Уроци от React и Vue Frameworks за Page Speed

В нашето непрекъснато преследване на скоростта на страниците често се оказваме, че се връщаме към една и съща точка. Въпреки усилията на екипите за продукти, маркетинг и растеж да мотивират техническите екипи, задачите, които биха могли да подобрят производителността на сайта, често се отлагат поради необходимостта от рефакторинг и дори когато са готови, те не винаги дават пълни резултати. В този цикъл е полезно да разгледате някои проницателни перспективи за постигане на реално представяне. Например, какви поуки можем да научим от скоростта на React.js и Vue.js или техните SSR (изобразяване от страна на сървъра) разширения като Next.js и Nuxt.js в сравнение с други платформи? Не е ли време да оптимизирате MB на jQuery и CSS файлове? Кога ще се събудят големите компании, които жертват своята уеб производителност в полза на зле информирани разработчици от предния край? Нека разгледаме тези въпроси един по един.

Защо базираните на Next.js и Nuxt.js сайтове са бързи?

Платформите Next и Nuxt, които са удобни за SEO структури, изградени върху React и Vue, се открояват със скорост. Но защо тези платформи са толкова бързи?

React.js и Vue.js са базирани на компоненти рамки, които разделят всяка страница на подкомпоненти, както е показано по-долу.

Нека вземем пример от реалния свят, за да илюстрираме тази точка: страница със списък за електронна търговия. Може да се приеме, че тази страница със списък има следните подкомпоненти:

• Header
• обява
  • Информация за влизане в списъка
    • Заглавие на страницата
    • Галета
    • Брой продукти
  • филтър
    • Филтър за категории
    • Ценови филтър
    • ...
  • сортиране
  • Продуктови карти
    • Снимка на продукта
  • Данни за продукта
    • Наименование на продукта
    • Цена на продукта
      • Зачертана цена
      • Продажна цена
    • Отстъпка
    • Информация за кампанията
  • Номериране на страници
  • Съдържание на категорията
• Footer

Когато създавате приложение, базирано на компоненти с Nuxt.js, всеки от тези компоненти се кодира отделно и се включва в основната страница. Например, разгледайте файл с име ProductPhoto.js. Каквито и функции да са необходими за снимки на продукти (въртележка, дисплей с адаптивно изображение и т.н.), JS кодът е написан в този компонент. По същия начин само CSS файловете, използвани от този компонент, са включени в него. Това означава, че само файловете, изисквани от всеки компонент, се изпълняват, ако компонентът се използва.

Как в момента се управлява този процес на повечето уеб платформи?

Файлът script.js включва код за всичко - от членство, филтри и страници с колички до менюто, което се изпълнява на всички страници. Резултатът? 

Уебсайтове с a 3 MB JS файл и 1.5 MB CSS файл. Основният проблем не са само размерите на файловете, но и фактът, че не можете да очаквате процесорът на средно мобилно устройство с Android да изпълни хиляди редове код в рамките на милисекунди. Като изпълнявате само кода, от който се нуждаете, можете да постигнете подобрения в производителността.

Как да елиминирам ресурсите, блокиращи изобразяването?

Днес 32% от най-добрите 1 милион уебсайтове използват библиотеката с шрифтове Font Awesome, която е средно около 250 KB. Като се има предвид, че асинхронното зареждане не е за предпочитане поради ефекта на движение, помислете колко шрифта се виждат на първия екран на страница, когато тя се отваря на мобилно устройство или настолен компютър. Кратко проучване на 50 различни платформи установи средно 3.4 използвани икони (най-често: количка, потребител, меню, известие). Така, за да заредим само четири икони без проблеми, зареждаме цялата библиотека.

Как усъвършенстваните JS рамки управляват това? Чрез импортиране само на SVG формата на иконите, използвани в съответния компонент, елиминира необходимостта от зареждане на цели шрифтове или CSS библиотеки.

Какво ни казва използването на Bootstrap срещу React JS?

Библиотеката Bootstrap JS има пазарен дял от 26% във всички сайтове по света, докато използването на React е около 4%. Bootstrap е популярен със своята гъвкавост и лекота на използване, което позволява бързо развитие. Тази гъвкавост обаче си има цена: общи JS функции, обширно покритие на кода и функции за функции, които може никога да не използвате, са включени във вашия проект.

Така че, нека попитаме: какво означава повече от 100% увеличение на употребата от топ 10,000 1,000 до топ XNUMX сайтове показват? Това показва, че най-добрите обръщат детайлите в своя полза, за да бъдат още по-добри.

В обобщение, вместо да пренаписваме нашите сайтове с технологии като След това, Nuxt, Angular, React, Vueи т.н., трябва да разберем какво точно правят тези технологии за скорост и да приложим тези най-добри практики към нашите уеб приложения.