Сред многото причини за огромната популярност на WordPress в мрежата, общността на разработчиците е, че има огромен брой плъгини и теми за изграждане на персонализиран уебсайт с относително малко усилия и инвестиции. Когато обаче на сайта работят няколко скрипта, това може да забави работата му и времето за зареждане.
Въпреки че някои от скриптовете не трябва да се зареждат едновременно, те го правят и в крайна сметка пречат на потребителите да могат бързо да разглеждат съдържанието на уебсайта, което води до изоставяне на сайта от разочарование. За щастие има доста начини, по които тези блокиращи визуализацията JavaScript и CSS файлове могат да бъдат премахнати, за да позволят на уебсайта да се зареди бързо и да достави съдържанието на зрителите.
Обяснение на блокирането на визуализация JavaScript и CSS
Всеки път, когато даден уебсайт се зарежда в уеб браузър, той изисква всички скриптове да се заредят в опашка. Ако поради някаква причина опашката от скриптове откаже да се изчисти, уебсайтът не се показва. Тези скриптове, които отказват да се заредят, се наричат блокиращи изобразяването JavaScript и CSS файлове. Времето за зареждане на сайта зависи изцяло от дължината на опашката. Много често много от скриптовете, заседнали в опашката, дори не са необходими, за да позволят на зрителя да види уебсайта в този момент от времето и много лесно може да се накара да изчака да стартира, докато уебсайтът се зареди напълно.
Недостатъци на блокиращите визуализация JavaScript и CSS
Първото и най-важно въздействие на рендериращите JavaScript и CSS скриптове върху уебсайта е, че те забавят скоростта му на зареждане. Скоростта на сайта е много важен параметър, който диктува колко използваем е уебсайтът и колко добре се представя в SERP. Ако сайтът се зарежда бавно, е по-вероятно посетителите да го изоставят за друг сайт; последващият процент на отпадане е силен SEO сигнал, който понижава класацията на търсачката. Според searchchenginejournal, повече от действителното време, прекарано в зареждането на сайта, проблемът е във възприемането от потребителите на времето, необходимо за зареждане на уебсайта. Тъй като браузърите се опитват да зареждат едновременно всичко, включително скриптове за блокиране на визуализация, трябва да се опитате да гарантирате, че сайтът зарежда само онези скриптове, необходими на сайта, за да може да се използва в началото, след което останалите скриптове могат натоварване.
Премахване на блокирането на визуализация JavaScript и CSS
Още преди да се опитате да премахнете скриптовете за блокиране на изобразяването, ще трябва да идентифицирате скриптовете, които са отговорни за проблема. Използването на инструмента PageSpeed Insights на Google е най-лесният начин да направите това. Трябва да направите списък със скриптовете, които се нуждаят от внимание и след това да решите дали искате да разрешите проблема ръчно или да използвате приставка, специално проектирана за тази цел.
Ако обаче внедрите някои най-добри практики за намаляване на броя на скриптове за блокиране на рендериране на вашия уебсайт по време на етапа на разработка, вие не само ще улесните живота си, но и ще осигурите достъпно SEO. Някои от често срещаните тактики включват минимизиране на JavaScript и CSS чрез премахване на ненужно празно пространство и коментари в кода, обединяване на JavaScript и CSS файлове, за да се намали общият им брой, както и използване на асинхронно зареждане, за да се отложи зареждането на Java Script.
Колкото и просто да звучат методите, ръчното премахване на скриптовете може да бъде уморително поради огромния брой JavaScript и CSS файлове, които се доставят с всеки от предните плъгини. Докато WordPress предлага комбиниран филтър за всички скриптове с лицева страна, използвайки които, можете да идентифицирате всички входящи JavaScript или CSS файлове; много по-лесно е да използвате плъгин, вместо да го правите от нулата.
Най-добрите приставки за намаляване на броя на блокиращите изобразяването JavaScript и CSS скриптове
WP Rocket
WP Rocket действа като много добър инструмент за оптимизиране на уебсайтове, тъй като е изключително гъвкав и може да се справи с различни задачи като минимизиране на CSS и JavaScript, отлагане на отдалечени заявки за JavaScript, мързеливи зареждащи изображения и др. Въпреки че лесният процес на настройка е голям плюс, приставката ще изисква да се приспособите към различно изживяване на таблото за управление на WordPress от това, с което са свикнали повечето разработчици. Въпреки че WP ракетата се предлага с няколко безплатни екстри, базовите цени за един уебсайт започват от $ 49 годишно.
Autoptimize
Създаден специално за справяне с проблеми, идентифицирани от инструменти като PageSpeed прозрения, Autoptimize позволява на потребителите да конфигурират приставката с ново меню в таблото за управление на WordPress. Докато Autoptimize изпълнява всички основни задачи, като кеширане и минимизиране на скриптове, той също може да оптимизира и конвертира изображения в WebP файлов формат. Въпреки че конфигурирането му може да е малко трудно, безплатният плъгин се оценява много високо за своята функционалност. Предлагат се и потребителски конфигурационен план за $ 165 и експертен план за конфигуриране на приставки с $ 667 с професионален преглед на уебсайта.
JCH Оптимизиране
JCH Optimize предлага набор от уникални инструменти за повишаване на скоростта на зареждане на вашата страница. Например, той може да намали размерите на страниците и броя на HTTP заявките, необходими за зареждане на уеб страници, които водят до намаляване на натоварването на сървъра и намаляват изискването за честотна лента.
Sprite Generator, който преобразува фоновите изображения в спрайтове, така че зареждането на браузъра изисква по-малко HTTP заявки. Докато потребителите ще харесат разширената му функционалност, стръмната крива на обучение може да бъде проблем, въпреки че е налице адекватна документация за поддръжка, за да се осигури инсталация без грешки. Можете да започнете, като използвате безплатната версия; обаче, ако искате да получите достъп до разширените функции, ще трябва да се абонирате за един от плановете, започващ от $ 29 за шест месеца.
Премахнете неизползваните CSS JS файлове в WordPress
Има 4 основни способности, когато трябва да евакуирате неизползваните CSS JS записи в WordPress front-end:
- wp_deregister_script ($ дръжка)
- wp_dequeue_script ($ handle)
- wp_deregister_style ($ дръжка)
- wp_dequeue_style ($ handle)
// изхвърляме дръжки за съдържание, с които не е нужно да се занимаваме, всеки със своите условия
add_action ('wp_print_scripts', 'wra_filter_scripts', 100000);
add_action ('wp_print_footer_scripts', 'wra_filter_scripts', 100000);
функция wra_filter_scripts () {
#wp_deregister_script ($ handle);
#wp_dequeue_script ($ handle);
wp_deregister_script ('bbpress-editor');
wp_dequeue_script ('bbpress-editor');
// Поддръжка на пиксели на устройства
// това подобрява целите на трансферите Gravatars и wordpress.com при програми с висока резолюция и мащабиране. Ние просто имаме Gravatars, така че трябва да сме добре и без него.
wp_deregister_script ('devicepx');
wp_dequeue_script ('devicepx');
if (! is_singular ('docs')) {
wp_deregister_script ('toc-front');
wp_dequeue_script ('toc-front');
}
if (! is_singular (array ('docs', 'post'))) {
wp_deregister_script ('codebox');
wp_dequeue_script ('codebox');
}
}
// премахване на стилове, които не са ни необходими
add_action ('wp_print_styles', 'wra_filter_styles', 100000);
add_action ('wp_print_footer_scripts', 'wra_filter_styles', 100000);
функция wra_filter_styles () {
#wp_deregister_style ($ дръжка);
#wp_dequeue_style ($ дръжка);
// няма повече стилове bbpress.
wp_deregister_style ('bbp-default');
wp_dequeue_style ('bbp-default');
// изтеглянето на монитора не се използва във фронт-енда.
wp_deregister_style ('wp_dlmp_styles');
wp_dequeue_style ('wp_dlmp_styles');
if (! is_singular ('docs')) {
// приставката за списък със съдържание се използва на страниците с документация, както са били
wp_deregister_style ('toc-screen');
wp_dequeue_style ('toc-screen');
}
// това не трябва да е така. Трябва да го разгледаме.
wp_deregister_style ('wppb_stylesheet');
wp_dequeue_style ('wppb_stylesheet');
}
if (! is_singular (array ('docs', 'post'))) {
wp_deregister_style ('codebox');
wp_dequeue_style ('codebox');
}
}
Наистина страхотното нещо като това е, че можете да използвате ограничителни етикети на WordPress, за да се съсредоточите върху определена страница или цял персонализиран тип публикация. Това ни дава адаптивността, която трябва да подреждаме нашите CSS / JS записи точно там, където са необходими.
Заключение
Гарантирането, че уебсайтът Ви се зарежда бързо, е от съществено значение, за да бъдете лесен за ползване и да предотвратите по-висок процент на отпадане от потъването на SEO ефективността Ви. Въпреки че може да има много причини, поради които вашият сайт на WordPress може да не се зарежда бързо, често срещана причина са ненужните опашки за блокиране на рендерирането на JavaScript и CSS скриптове, произтичащи от използването на приставки.
За да се справите с проблемите, с които дори чистото писане на код не може да се справи, може да е полезно да използвате един от специализираните плъгини, предназначен да намали броя на JavaScript и CSS скриптове, както и да гарантира, че ненужното образуване на опашка от скриптове не забавя зареждане на сайта.
