В днешния конкурентен дигитален пейзаж скоростта на уебсайта има голямо значение, когато става въпрос за успеха на онлайн бизнес. Гигантите на търсачките като Google дават приоритет на бързо зареждащите се сайтове, осъзнавайки необходимостта от осигуряване на безпроблемно потребителско изживяване.
Според проучвания по-бързото зареждане на страници повишава ангажираността на потребителите и процента на реализация. Всъщност забавяне от една секунда във времето, необходимо за зареждане на страницата, може да причини 7% спад в клиентските реализации. Като се има предвид това, очевидно е, че собствениците на уебсайтове трябва да обърнат голямо внимание на ефективността на уебсайта.
Google приема сериозно ефективността на уебсайта и я взема предвид, когато определя резултатите от търсенето. Следователно уебсайтовете, които се зареждат бързо, е по-вероятно да се покажат първи в резултатите от търсенето, привличайки повече посетители и в крайна сметка генерирайки повече приходи. Но как можете да изпълните изискванията на Google и да заредите уебсайта си бързо?
Отървавате се от ресурси, които могат да блокират изобразяването на времето за зареждане на уебсайт, като CSS и JavaScript файлове.
Премахването на тези ресурси обаче може да бъде предизвикателство и да отнеме много време, особено за хора без технически умения.
В тази статия ще обясним ресурсите за блокиране на изобразяване и как те влияят на ефективността на уебсайта и ще предоставим ръководство стъпка по стъпка за елиминирането им от вашия WordPress сайт. И така, нека започнем да оптимизираме вашия уебсайт за скорост и успех!
Съдържание
Ресурси за блокиране на изобразяване
Всеки ресурс, който трябва да бъде зареден, преди да може да бъде показана уеб страница, се счита за ресурс, блокиращ изобразяването. Тези ресурси влияят на производителността и ефективността на уебсайта и удължават времето, необходимо за зареждане на страница.
CSS или JavaScript файл може да се счита за ресурс, блокиращ изобразяването, ако този файл блокира изобразяването на уеб страница. Значението на зареждането на страницата обаче може да варира в зависимост от непосредствената им необходимост.
Когато потребител влезе в страница, браузърът първо обработва HTML кода, за да покаже съдържанието й на видимата на екрана част от страницата. Когато браузърът срещне CSS и JavaScript файлове, той също ги изтегля и обработва. Ако файловете с ресурси съдържат допълнителни кодове или неизползвани части, зареждането на уеб страницата отнема повече време.
Видове ресурси за блокиране на изобразяване
Като цяло файловете с ресурси като CSS и JavaScript се считат за ресурси, блокиращи изобразяването в WordPress. Браузърът разглежда тези ресурси като критични и изисква зареждане, преди страницата да може да бъде показана. Но това не е всичко; има повече файлове с ресурси, които блокират изобразяването на уеб страница.
Ето списък с ресурси, блокиращи изобразяването:
CSS таблици със стилове
Дизайнът и представянето на уеб страницата се определят от таблици със стилове на CSS. CSS файл ще се счита за ресурс, блокиращ изобразяването, ако е поставен в секцията
на HTML страница.JavaScript файлове в раздела
JavaScript е скриптов език, който може да се използва за предоставяне на уеб страница с динамично поведение и взаимодействие. JavaScript файл ще се счита за ресурс, блокиращ изобразяването, ако бъде поставен в секцията
на HTML страница.Шрифтове
Текстовете на уеб страница се показват с различни шрифтове. Шрифтовете също се считат за ресурс, блокиращ изобразяването, ако са включени в секцията
на HTML страница и са заредени от локален сървър или CDN.HTML импортиране
Това са по-старите HTML функции, които позволяват на уеб страниците да включват елементи от други HTML документи. Въпреки че импортирането на HTML вече не се използва толкова често, все още може да се види на някои по-стари сайтове. Импортирането на HMTL също се счита за ресурс, блокиращ изобразяването.
Защо блокиращите изобразяването ресурси са ужасни за уеб страници
Ако вашият WordPress сайт включва ресурси за блокиране на изобразяване, ще изостанете в резултатите от търсенето. Дори ако в момента сте на предната линия, по-добре представящите се сайтове в крайна сметка ще ви победят.
Сайтовете с ресурси за блокиране на изобразяването ще заредят допълнителни файлове, докато изобразяват сайта. Преди да видят уебсайта, потребителите трябва да изчакат, докато се обработят файловете. Следните показатели за ефективност за уебсайтове ще бъдат повлияни от тези ресурси:
- Largest Contentful Paint: Това определя колко време ще отнеме зареждането на основното съдържание на страницата.
- First Contentful Paint: Времето, необходимо на браузъра да създаде първото съдържание на обектен модел на документ (DOM) на вашия уебсайт.
- Общо време на блокиране: Това оценява колко време е необходимо от Frist Contentful Pianto до колко време е необходимо на страницата да стане напълно интерактивна.
Въпреки че ресурсите за блокиране на изобразяването не са необходими за зареждане, те могат да попречат на изобразяването на уебсайт или уеб страница. Ето защо е от съществено значение да премахнете такива ресурси, за да предотвратите затрудняването на навигацията на потребителите във вашия уебсайт.
Нека да разгледаме по-подробно защо блокирането на изобразяване е сериозен проблем за уеб страниците:
Бавно време за зареждане на страницата
Ресурсите, блокиращи изобразяването, ще накарат уебсайта да се зарежда по-бавно, което е един от основните му недостатъци. Една уеб страница се зарежда бавно, когато съдържа файлове с ресурси с ненужни елементи. Следователно това ще повлияе на външния вид на резултатите от търсенето, по-ниската ангажираност на потребителите и по-високата степен на отпадане.
Блокирано изобразяване
Често браузърът спира изобразяването на уеб страница, когато попадне на блокиращи изобразяването ресурси, защото иска блокиращите изобразяването ресурси да бъдат извлечени и обработени.
В крайна сметка потребителите ще се раздразнят и ще напуснат вашия сайт поради липса на реакция на страницата или бавно изобразяване.
Освен това, ако даден ресурс се зарежда бавно, браузърът също може да се откаже и да спре да се опитва да го зареди. Това може да доведе до счупени страници или липсваща информация.
Намалена ангажираност на потребителите
Когато възникнат закъснения при рендиране, потребителското изживяване се влошава с него. Потребителите винаги очакват бързо зареждане и обикновено напускат сайт с бавно зареждане. Така те попадат на сайт, който се зарежда по-бързо.
Бавно зареждащите се сайтове имат пагубен ефект върху удовлетвореността на потребителите и репутацията на марката. С това трафикът на уебсайта и процентът на реализация също драстично намаляват.
Има различни подходи за премахване на блокиращи изобразяването ресурси от WordPress. Ние обаче ще ви запознаем с ръчни методи за елиминиране на ресурси, блокиращи изобразяването. След това ще покажем как можете да го направите, като използвате някои от известните плъгини в WordPress.
Елиминирайте ръчно блокиращите изобразяването ресурси
Можете да избегнете да го правите ръчно, така че не се разочаровайте. Но преминаването през този раздел със сигурност ще ви помогне да научите някои техники за оптимизиране на ефективността на WordPress. Но първо вижте това видео, за да се запознаете с обсъжданите термини.
#1. Идентифицирайте ресурси, блокиращи изобразяването
Първо трябва да откриете ресурсите, блокиращи изобразяването, преди да ги премахнете от уебсайта си. Просто следвайте тези стъпки, за да откриете ресурсите за блокиране на изобразяването на вашия уебсайт WordPress:
- Отидете на Google PageSpeed Insights.
- Въведете URL адреса на вашия сайт в лентата за търсене.
- Щракнете върху бутона „Анализиране“, за да получите информация за уебсайта си.
- Превъртете надолу и проверете секцията Възможности.
- Ако вашата страница има ресурси, блокиращи изобразяването, те ще бъдат изброени.
#2. Използване на атрибути „Defer“ и „Async“ за JS
След като идентифицирате ресурсите, блокиращи изобразяването, е време да ги премахнете за по-добро представяне на уебсайта. От различни методи използването на метода „defer“ или „async“ за JavaScript файлове е един подход за това.
Когато става въпрос за атрибута „отлагане“, той позволява на браузъра да изтегли JS файла и след това да го изпълни. Но това се случва, когато страницата приключи зареждането и е готова да покаже съдържанието си.
Така че останалите елементи на страницата могат да се зареждат паралелно с JavaScript файла. В резултат на това времето, необходимо за зареждане на страницата, намалява.
Друг подход е атрибутът „async“, който позволява на браузъра да изтегли JS файла, когато е наличен. Това се случва без блокиране на други елементи на страницата. Следователно JS файлът може да се зарежда паралелно с други елементи, което ускорява процеса на зареждане.
Можете да се отървете от блокиращите изобразяването ресурси и да увеличите скоростта на уебсайта си, като използвате атрибута „defer“ или „async“.
#3. Използване на атрибут „Медия“ за условен CSS
Използването на атрибутите „медия“ за условен CSS е друг подход за елиминиране на ресурси, блокиращи изобразяването. С този атрибут можете да дефинирате уникални CSS файлове за настолни и мобилни браузъри.
Например, можете да включите CSS файл, който е предназначен за настолни устройства, и друг CSS файл, който е пригоден за мобилни устройства. Можете да посочите на браузъра, че CSS файлът за настолни компютри ще се зареди при достъп през настолно устройство.
По същия начин мобилният CSS трябва да се зарежда само когато е достъпен през мобилни устройства. Като зареждате специфичен за устройството CSS за определени устройства, можете да намалите ресурсите за блокиране на изобразяването и да увеличите времето за зареждане на вашия сайт.
#4. Отлагане на некритичен CSS
В допълнение към използването на атрибута „медия“ за условен CSS, опитайте да отложите некритичния CSS. За този подход трябва да заредите основно основния CSS. След това зареждате останалата част от CSS, докато страницата се зарежда.
Например, може да имате огромен CSS файл, който включва всички стилове за вашия уебсайт. Но само малка част от този CSS файл е необходима за показване на съдържанието в горната част на вашия сайт. Съдържанието на видимата на екрана част от страницата може да се покаже бързо чрез забавяне на некритичния CSS, а оставащият CSS може да бъде зареден, когато страницата се зареди.
#5. Премахване на неизползваните CSS и JS
Премахването на ненужни CSS и JavaScript файлове е друга техника за премахване на ресурси, блокиращи изобразяването. Тези файлове могат да направят страницата ви по-тежка и да увеличат времето за зареждане.
Като премахнете всички неизползвани CSS и JS файлове, можете да намалите броя на ресурсите, блокиращи изобразяването. Можете лесно да използвате инструменти като PurifyCSS или UnusedCSS, за да премахнете всеки неизползван CSS файл от уебсайта си.
#6. Локално зареждане на персонализирани шрифтове
Персонализираните шрифтове могат също да включват ресурси, които ограничават изобразяването. Вместо да разчитате на външни източници като Google Fonts, трябва локално да заредите свои персонализирани шрифтове, за да избегнете нуждата от тези ресурси.
Можете да гарантирате, че персонализираните ви шрифтове се зареждат бързо и ефективно, без да забавят работата на уебсайта ви, като ги заредите локално. Това може да доведе до по-бърз, по-отзивчив уебсайт и подобряване на потребителското изживяване.
#7. Минимизиране на JS и CSS
И накрая, минимизирането на вашите CSS и JavaScript файлове може да помогне на уебсайта ви да функционира по-добре. Минимизирането премахва ненужните знаци, като бели интервали и коментари, от вашия код. По този начин размерът на вашите файлове се намалява, което ускорява зареждането.
За минимизиране на вашите файлове можете да използвате инструменти като MinifyJS или CSSNano. Запазете копие на оригиналните си файлове, в случай че някога се наложи да ги промените.
Елиминирайте блокиращите изобразяването ресурси с плъгина
В този раздел ще ви покажем как можете да премахнете блокиращите изобразяването ресурси с помощта на добавки за WordPress. Тези плъгини са известни в WordPress и могат бързо да премахнат ресурси, блокиращи изобразяването. Най-добрата част е, че можете дори да подобрите ефективността на уебсайта си без специализиран опит.
#1. W3 пълен кеш
W3 Total Cache (W3TC) подобрява цялостното потребителско изживяване на уебсайт на WordPress. Той елиминира ресурсите, блокиращи изобразяването, и подобрява SEO, Core web vitals и др. Плъгинът използва функции като мрежова интеграция за доставка на съдържание, за да приложи най-добрите практики.
За да премахнете блокиращите изобразяването ресурси, инсталирайте и активирайте приставката W3 Total Cache и изпълнете следните стъпки:
- Отидете в секцията „Ефективност“ в таблото за управление на WordPress и щракнете върху „Общи настройки“.
- Под заглавието Minify активирайте Minify и изберете Manual като режим на минимизиране.
- Сега щракнете върху Запазване на всички настройки.
- След това съберете всички блокиращи изобразяването Javascript и CSS файлове чрез Google PageSpeed Insights.
- Последвано от връщане към Performance > Minify.
- Сега, в секцията js, първо щракнете върху Активиране за настройките на JS Minify. След това под секцията Операции в области изберете Неблокиране с помощта на типа „отлагане“ за етикета Преди .
- Сега се насочете към управлението на JS файлове, изберете темата, която сте активирали, и щракнете върху бутона Добавяне на скрипт. Сега съберете URL адресите на Javascript, които имат проблеми, сканирани от Google PageSpeed Insights. Поставете URL адресите в определеното поле, както е посочено на изображението.
- Сега превъртете малко надолу до секцията CSS. Изберете вашата тема от падащото меню в раздела за управление на CSS файлове и щракнете върху Добавяне на стилов лист. Сега просто следвате предишната стъпка и копирате и поставяте URL адресите, събрани от PageSpeed Insight, които имат проблеми.
- Тъй като всички настройки са конфигурирани, щракнете върху бутона Запазване на настройките и изчистване, за да изпълните.
#2. JCH Оптимизиране
JCH Optimize подобрява ефективността на уебсайта на WordPress, измерена от Google PageSpeed insight. Плъгинът подобрява Първата боядисване на съдържание (FCP), Боядисване с най-голямо съдържание (LCP), Индекс на скоростта (SI), Кумулативно изместване на оформлението (CLS), Време за интерактивност (TTI) и др.
По този начин цялостното потребителско изживяване и ефективността на уебсайта се подобряват значително.
След като инсталирате и активирате JCH Optimize, следвайте тези процеси, за да премахнете ресурсите, блокиращи изобразяването:
- Отидете в Settings>JCH Optimize, превъртете малко надолу и отидете до настройките на основните функции.
- Активирайте Оптимизирайте доставката на CSS, за да елиминирате блокирането на CSS изобразяване. Тази функция автоматично определя основния CSS, необходим за показване на съдържанието на видимата на екрана част от страницата на всяка уеб страница. Освен това го вгражда в секцията на HTML съдържанието на всяка страница.
- След това връзката за предварително зареждане се използва за асинхронно зареждане на свързаните CSS файлове.
- За да премахнете ресурсите, блокиращи изобразяването на Javascript, трябва да включите атрибутите async или defer към тага