Внедряване на Preload, Prefetch, Preconnect в WordPress

Възползвайте се от съвременните функции на браузъра като предварително зареждане, предварително извличане, предварително свързване, за да направите уебсайта на WordPress по-бърз.

Като собственик на сайт, кой не обича да прави всичко възможно, за да зареди уеб страницата по-бързо?

Осигуряването на постоянно зареждане на сайта по-бързо в световен мащаб е предизвикателство. Има няколко неща, които можете да направите, за да заредите бързо ресурсите на сайта, включително да активирате следните съвети за браузъра. Те са известни също като техники за предварително сърфиране.

Забележка: техниките за съвети на браузъра не помагат много, когато влизате в уебсайта за първи път, но следващите заявки са по-бързи.

Предварително зареждане

Можете да използвате таг за предварително зареждане, за да кажете на браузъра да извлече някои от статичните ресурси по-рано. Те могат да бъдат изображение, шрифт, JavaScript, CSS, скриптове, видео и т.н. Помага за приоритизиране на зареждането на ресурса; следователно производителността се подобрява.

Предварителното зареждане би било добра идея за прилагане, ако очаквате вашите потребители да посетят няколко страници впоследствие. Като магазин за електронна търговия, където потребителят посещава продуктовата страница и след това проверява информацията, сравнява с друг продукт, добавя в количката, плаща и т.н.

Можете да използвате следните добавки, за да настроите функцията за предварително зареждане.

По-добри съвети за ресурси – безплатен плъгин за конфигуриране на CSS и JS файлове.

WP Rocket – премиум плъгин за суперзареждане на производителността на уебсайта с много основни техники, включително предварително зареждане на кеширане и карта на сайта.

  Какво е концептуална карта и как да я създадете?

Как да разберете дали предварителното зареждане е активирано?

Най-бързият начин да разберете е като прегледате изходния код на страницата. Трябва да видите нещо като по-долу.

<link rel="preload" as="style" href="https://wilku.top/implementing-preload-prefetch-preconnect-in-wordpress/IMPORTANT.css">
<link rel="preload" as="script" href="CRITICAL.js">

Не всички браузъри поддържат предварително зареждане по време на писане. Така че, проверете матрица за съвместимост преди изпълнението.

Предварително свързване

Зареждате ли ресурси от други домейни? Може би CDN?

Ако не и всеки ресурс се зарежда от вашия единствен домейн, тогава това може да не е полезно.

Предварителното свързване подсказва на браузъра да установи връзка с други домейни във фонов режим, за да спести време за DNS търсене, пренасочване, TCP ръкостискане, TLS преговори и т.н. Идеята е да се намали забавянето, за да се осигури бързо зареждане на ресурси от друг домейн.

Отново можете да използвате гореспоменатия плъгин за по-добри съвети за ресурси или премиум подобен perfmatters.

След като конфигурирате необходимите ресурси, трябва да ги видите в изходния код на страницата, както по-долу.

<link rel="preconnect" href="https://ANOTHERSITE.com">

Забележка: ако зареждате ресурсите от домейн, който изисква CORS, тогава трябва да посочите това като кръстосано начало и изход трябва да изглежда така.

<link rel="preconnect" href="https://ANOTHERSITE.com" crossorigin>

Preconnect е съвместим с най-новата версия на Chrome, Edge, Firefox, Safari.

Предварително извличане

Оставете браузъра да извлече следващата страница, която смятате, че ще е необходима, когато потребителят навигира наоколо. Prefetch ще изтегли необходимите ресурси и ще ги съхрани в локалния кеш и ще ги обслужва бързо, когато е необходимо. Има два вида предварително извличане.

DNS предварително извличане – обяснено по-долу

Предварително извличане на връзка – конфигурирано чрез . Използва се за предварително извличане на HTML или статични ресурси. Можете да извличате предварително ресурси, като използвате като атрибут.

  Ръководство за начинаещи за CSPO сертифициране [+7 Courses]

като атрибут поддържа различни ресурси като аудио, видео, скрипт, запис, стил, шрифт, обект, документ и т.н. Предварителното извличане на връзки може да бъде конфигурирано с помощта на Плъгин Pre Party Resource Hints.

Предварително извличане на DNS

Зареждате ресурси от много домейни и искате да ги разрешите във фонов режим?

Тази бърза настройка може да помогне за разрешаването на всички потенциални домейни по-рано, така че когато са поискани ресурси, да се зарежда по-бързо. Това помага да се намали общата латентност.

Да приемем, че зареждате ресурси от 3 домейна и всеки домейн отнема около 100 ms, за да извърши DNS търсене, тогава ще спестите 300 ms забавяне.

Не е ли готино?

Можете да внедрите, като използвате плъгина perfmatters или добавите следното във файла functions.php на вашата тема, ако ви е удобно да редактирате файловете на темата.

//* DNS Prefetching
function dns_prefetch() {
    echo '<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="https://YOUROTHERDOMAIN.com" />
<link rel="dns-prefetch" href="https://ANDANOTHERONE.com" />
<link rel="dns-prefetch" href="https://AND.SOMEMORE.com" />
}
add_action('wp_head', 'dns_prefetch', 0);

Можете да прочетете повече на Уеб документи на Mozilla.

Предварително изобразяване

Очаквате ли потребителите на вашия сайт да навигират в потенциалната страница?

Предварителното изобразяване може да помогне за зареждането на тези активи във фонов режим и когато потребителят щракне върху него, те го получават много бързо. Можете да постигнете това с плъгина Pre Party Resource Hints.

Предварителното изобразяване е подходящо за лека страница или актив, но внимавайте с целия сайт или големи ресурси, тъй като може да увеличи използването на процесора и честотната лента и да забави сайта. Така че опитайте с по-малкия ресурс и го тествайте, за да сте сигурни, че няма странични ефекти.

  Как да използвате Google Maps и Apple Maps в движение без интернет връзка

Както можете да видите, има четири основни добавки, включени за прилагане на съвети за браузър в WordPress. Изберете този, който харесвате и отговаряйте на изискванията.

Плъгин Pre Party Resource Hints – безплатен плъгин предлага предварително извличане на DNS, предварително извличане на връзки, предварително изобразяване, предварително свързване и предварително зареждане.

По-добри съвети за ресурси – алтернатива на горния.

Безплатният плъгин е добър, стига да се поддържа и поддържа. За съжаление, това не се случва с много плъгини и затова понякога е по-добре да изберете платената версия. Плъгините за комерсиална версия се поддържат професионално и актуални със стандартни и корекции за сигурност на WordPress. Ако сте готови да похарчите няколко долара за оптимизиране на ефективността на вашия сайт, можете да разгледате следните.

WP Rocket – с добра репутация, доверие на повече от 800 000 сайта. Струва $49 за един уебсайт.

Perfmatters – лек и лесен за проследяване струва $24,95 за един сайт. Докато пиша, той предлага следните функции.

Това е много оптимизация.

Заключение

Ядрото на WordPress е леко, но става обемисто в зависимост от темата и плъгините, които използвате. И е от съществено значение да оптимизирате ефективността на вашия сайт за по-добро класиране и реализация при търсене. Горните техники са лесни за следване, но не трябва да спирате дотук.

Трябва също така да обмислите използването на CDN за кеширане и по-бързо доставяне на съдържание на вашите потребители в световен мащаб. Има много, но бих препоръчал да опитате SUCURI, който предлага CDN и сигурност, и двете.