Днес JavaScript играе ключова роля за създаването на интерактивни и динамични уеб сайтове. Може да се каже, че всеки съвременен сайт използва JavaScript. Среща се в множество слайдери, карусели, падащи менюта, Drag&Drop елементи, галерии, анимирани бутони и какво ли още не.
Благодарение на него се постигат дизайни с уникални визуални ефекти. Създават се функционалности като чат, фийд в реално време, резервации. Подават се събития към външни платформи като Google Analytics, Facebook Pixel, Mailchimp, GDPR Consent платформи и още.
JavaScript позволява на потребителите да взаимодействат с уеб страницата, без тя да се презарежда, и ползите от него в уеб разработката са неизмерими.
Може ли JavaScript да забавя сайта?
Има ситуации, в които може да води до забавяне. Забавянето от JavaScript e малко по-трудно уловимо, но ако сме наясно за какво да следим, проверката е проста.
Може да бъде при конкретно действие (клик върху бутон, затруднено скролиране, „насичане“ на анимация и др.) или при първоначалното зареждане на сайта.
В повечето случаи говорим за забавяне при първоначалното зареждане на сайта и страниците. Причините могат да бъдат най-различни: Защо сайтът ми е бавен: 7 най-често срещани причини и Добри практики за оптимизация на твоя WordPress сайт.
Вероятно една от най-плашещите причини за влошено представяне е свързана със забавяне от JavaScript ресурсите, които се зареждат на сайта. Обикновено не става въпрос за един конкретен скрипт, а за целия обем на всички JavaScript ресурси при зареждане на сайта.
Колкото повече ефекти се натрупват, толкова повече се увеличават JavaScript ресурсите в сайта. Увеличаването на ресурсите от своя страна не би могло да премине незабелязано и да не се отрази на скоростта на зареждане на сайта.
Причината на първо място е, че тези ресурси увеличават общия размер на уеб страницата и изискват допълнително време за Download. Това е времето, което е необходимо, за да се свалят ресурсите от уеб сървъра в браузъра на посетителя.
На второ място костват допълнително време, за да се обработят и изпълнят от браузъра на посетителя.
Всъщност няма причина за притеснение. Няма да се наложи да премахвате от красивите визуални ефекти или да се разделите с любима функционалност.
Просто и ефективно решение е да се направи оптимизация с отложено зареждане на JavaScript (Delay JavaScript execution). С оптимизацията при първоначалното зареждане ще се изтеглят и изпълнят само тези JS ресурси, които са необходими, за да се покаже видимата част от страницата и това може да я направи по-бърза. Останалите ще се свалят на по-късен етап.
Скриптовете се забавят изкуствено и се зареждат едва след определено събитие: скролиране, кликване някъде или след точно определено време (например след 2 секунди).
Друг по-различен подход за отлагане вместо delay е с HTML атрибута defer. Методът с defer е по-безопасен, но за сметка на това с малко по-ниска ефективност.
Полезно или вредно е отложеното зареждане на JavaScript?
Когато сайтът е прост или среден по сложност, често не се използва много JavaScript. Затова при малки сайтове JavaScript-ът обикновено няма видимо влияние върху производителността и няма нужда от подобна оптимизация. Дори да се направи, няма да окаже никакъв ефект и по-добре да не го правите.
По-сложните сайтове обаче често зареждат прекалено много JavaScript, което значително удължава времето за зареждане. Голяма част от тези скриптове не са необходими за първоначалното визуализиране на съдържанието и е добре да се отложат.
Ефектът от оптимизацията може да бъде усетен видимо при сайтове с по 2-5 MB скриптове.
В практиката виждам чести случаи, в които обемът на JS е повече от половината от целия обем на уеб страницата.
Например, цялата начална страница е 8 MB и от тях 5 MB са само от JS. Тогава ефектът от отлагането е осезаем и оптимизацията е добър подход.
Как може да се измери количеството JavaScript в уеб сайт?
Метриките при измерването на количеството JavaScript в един уеб сайт могат да бъдат:
- Обем (в KB) на JavaScript файловете, свалени в браузъра;
- Брой JavaScript файлове;
- Време за изпълнение на скриптовете (performance);
- Размер на изходния JavaScript код (включително inline скриптове).
Всички са от значение, но най-често обемът на изтегления JavaScript е достатъчно показателен дали има нужда от оптимизация, или не. В по-редки случаи се налага да се проследят и останалите метрики. Самото измерване може да се извърши по няколко начина:
- С инструмент на браузъра (DevTools).
- PageSpeed Insights или Lighthouse (вградено в Chrome).
- Други инструменти от трети страни като WebPageTest и GTmetrix.
- PageSpeed Insights, WebPageTest и GTmetrix показват общото натоварване от JS и кoи файлове са блокиращи изобразяването на страницата. Резултатите се разпределят и спрямо това дали ресурсът е от самия сайт или от трета страна като Google, Facebook, Mailchimp, GDPR Consent платформи и други.
С инструмент на браузъра (DevTools)
Отворете браузъра и натиснете F12 или Ctrl+Shift+I, за да се зареди DevTools. Изберете таба Network и презаредете страницата с (Ctrl+R). От лентата с инструменти, кликнете на бутона „JS“.
Показва се списък с всички .js файлове, техните размери в колона „Size“ и време за зареждане в колонa „Time“. Най-важната информация е в лентата, разположена отдолу:
- сумирано общото количество (в KB или MB) в „resources“;
- тази част, която вече е свалена в transferred.
Как се отразява в Page Speed Insights?
При проверка на сайта в PageSpeed Insights, може да видите следните препоръки:
- Eliminate render-blocking resources
- Reduce unused JavaScript
Двете препоръки имат пряка зависимост от JavaScript ресурсите, които се зареждат при първоначалното визуализиране на уеб сайта. Ако ги виждате за Вашия сайт, вероятно все още не сте настроили отложено зареждане.
Всички ресурси първо се свалят в браузъра и се обработват. Едва тогава се визуализира съдържанието на уеб страницата. Докато те не се заредят, браузърът спира рендирането (показването) на сайта. През това време потребителят чака на „празен“ екран.
Някои от ресурсите обаче не са нужни за видимата част на страницата по време на нейното изобразяване и излишно блокират зареждането. Това са така наречените „render-blocking“ ресурси.
Други ресурси изобщо не се използват в дадената страница. Например – скриптове за слайдер, който не се показва на началната страница или зареждане на цяла библиотека като jQuery, но реално се използва само част от нея. Това е така нареченият „unused“ JavaScript.
Отложеното зареждане оказва пряко влияние в тези аспекти и с него е възможно да се изпълнят напълно или поне частично препоръките за премахване „render-blocking“ и „unused“ ресурсите.
Допълнително ще окаже влияние на LCP, FCP и на препоръки като:
- JavaScript execution time;
- Minimizes main-thread work.
Възможно е да окаже частично подобрение и при всички препоръки, в които се появяват .js файлове.
Изключение прави препоръката за минифициране. Минифицирането на JS/CSS е друг вид оптимизация на сайт, която може да се приложи, ако до момента не го използвате.
Можем ли да оптимизираме зареждането без да сме експерти?
При повечето системи за уеб сайтове, за да се коригира забавянето, е необходима намесата на програмист.
В WordPress за щастие, без да се променя сайтът, има какво да се направи, за да се намали общото натоварване от JS и да се премахнат „render-blocking“ и „unused“ ресурсите.
При някои сайтове, създадени с WordPress, без да са необходими задълбочени познания, може да се справим с този казус, като добавим плъгин за отложено зареждане на JavaScript ресурсите.
За съжаление, има и сайтове, в които отлагането не минава безпроблемно и води до нарушаване на визуални ефекти заради отложен ресурс. Това може да изглежда като „счупване“ на визията на сайта и за да се направят фини настройки, ще е необходим задълбочен анализ и технически познания в областта. Обикновено, с по-задълбочени познания счупването е поправимо. Анализът цели да се намери кой ресурс е причината и да се добави като изключение в правилото за отлагане.
Могат да се намерят както безплатни, така и платени плъгини за отложено зареждане на JavaScript.
Добро безплатно решение е плъгинът WP Meteor: https://bg.wordpress.org/plugins/wp-meteor/
След инсталация има възможност за избор по какъв начин да се отложи зареждането на JavaScript и вариантите са: докато потребителят не взаимодейства със страницата, например: при скролиране, при кликване на някой елемент от нея или след изтичане на определено време – за 1 секунда или за 2 секунди.
С отлагането до 2 секунди се постигат доста добри резултати.
Плъгинът служи само за отлагане на JavaScript и не прилага никакви други оптимизации като кеш, минифициране, оптимизации по CSS и т.н. Но е съвместим и може да се използва успешно в комбинация с други плъгини за тази цел. Добра комбинация е използването на WP Meteor съвместно с W3Total Cache с Autoptimize. Всички останали плъгини, с които е съвместим, могат да се намерят описани в документацията.
Предлагат се и други безплатни плъгини, но принципът на работа е различен. Повечето правят отлагането с defer вместо delay.
От платените решения, добри варианти са WP Rocket и NitroPack.
WP Rocket предлага използването на множество оптимизации на едно място, сред които е и отлагане на JS. Предимството на WP Rocket при отлагането е, че има лесен начин за безопасна настройка. С един клик може да се отложат всички останали ресурси без тези на темата и критични плъгини. Това може да спести от усилията да се прави анализ, ако отлагането води до счупване на визуални ефекти.
NitroPack е безспорно най-доброто, но и по-високо бюджетно, готово решение за оптимизация на сайт, който включва комплексен набор от всичко необходимо. До голяма степен за неговата ефективност допринася и отлагането на JаvaScript, но разбира се, има и други много силни предимства, включително и спрямо WP Rocket.
В случай на проблем с отлагането на JavaScript има различни режими на работа и с един клик може да се премине към по-безопасен режим с по-малко оптимизации.
Важно е да се има предвид, че добавянето на изключения все пак не е толкова полезно, независимо кой от плъгините ще използвате. Всяко изключение от отлагането на JavaScript намалява ползите от него и резултатите се отдалечават от отлични, но е единственият начин да се решат възникнали визуални проблеми без промени в сайта или намеса на програмист.
Най-често срещаните причини за визуални проблеми от отлагането на JS са ресурси от темата и някои критични плъгини. Ако се наложи да правите диагностика, препоръчвам да започнете от там. Може да се тества изключване на цялата директория на темата от оптимизациите.
Абонирайте се за СуперБлога, за да получавате полезно и експертно познание от света на уеб хостинг услугите, касаещо Вашия сайт и дигитално присъствие.
