CSS і JavaScript, блакавальныя загрузку старонкі ў WordPress
- 1. Скарыстаемся залежнасцю іншых скрыптоў ад jQuery
- Перамяшчаем jQuery ў футер сайта
- 2. Аб'яднанне CSS у WordPress
- Міша Рудрастых
У гэтай пасадзе будзе разумецца, што вы знаёмыя з інструментам Google па аптымізацыі хуткасці загрузкі старонак сайта - PageSpeed Insights . Слухайце, ды прама зараз убіце туды свой сайт націсніце кнопку «Analize».
Окей, а цяпер - пра што гэты пост?
Цалкам магчыма, што ў выніках праверкі вашага сайта ёсць пункт «Eliminate render-blocking JavaScript and CSS in above-the-fold content».
Я заўважыў, што гэты пункт адзін з самых няпростых (працаёмкіх) і практычна на ўсіх сайтах, нават на вельмі хуткіх, ён прысутнічае.
Як яго выправіць у тэорыі:
- Аб'яднаем ўсе JavaScript файлы і размяшчаем тое, што атрымалася перад тэгам </ body> сайта.
- Аб'яднаем ўсе CSS, суём прама перад JavaScript, якія мы ўжо перамясцілі, затым выбіраем з іх тыя стылі, якія неабходныя для карэктнага адлюстравання старонкі, а асабліва яе верхняй часткі (першага экрана) і змяшчаем іх у тэг <style> у <head> сайта.
Як жа ідзе справу на практыцы, і ў дадзеным канкрэтным выпадку - для сайтаў на WordPress?
1. Скарыстаемся залежнасцю іншых скрыптоў ад jQuery
У карэктна згатавалі тэме WordPress ўсе CSS і JS файлы падключаюцца праз wp_head () і wp_footer () - гэта значыць у <head> і ў канцы </ body> адпаведна.
Таксама ў файлаў ёсць залежнасці, то ёсць напрыклад убудова fancybox.js павінен падлучацца пасля jquery.js, а гэта значыць, што калі бібліятэка jQuery знаходзіцца ў wp_footer () , То FancyBox ну ніяк не можа трапіць у wp_head () .
Перамяшчаем jQuery ў футер сайта
Робіцца гэта вельмі проста - пры дапамозе функцый wp_deregister_script () , wp_register_script () , wp_enqueue_script () і хука wp_enqueue_scripts (часам выкарыстоўваюць хук init ў звязку з is_admin () ). Усё, што патрабуецца ад вас, гэта ўставіць код наступнага ўтрымання ў файл functions.php вашага сайта.
add_action ( 'wp_enqueue_scripts', 'true_peremeshhaem_jquery_v_futer'); function true_peremeshhaem_jquery_v_futer () {// здымаем стандартную рэгістрацыю jQuery wp_deregister_script ( 'jquery'); // рэгіструем для падлучэння ў футере, апісанне параметраў - у дакументацыі функцыі (спасылка крыху вышэй) wp_register_script ( 'jquery', includes_url ( '/js/jquery/jquery.js'), false, null, true); // падлучальны wp_enqueue_script ( 'jquery'); }
Хачу звярнуць вашу ўвагу на тое, што гэта аўтаматызаванае рашэнне, і хоць яно працуе практычна ў 100% выпадкаў, бывае такое, што некаторыя скрыпты не жадаюць пераносіцца ў футер сайта. Тады ўжо спатрэбіцца больш уважлівы да кожнага вашаму файлу JavaScript.
На гэтым наша праца з JS заканчваецца, вядома прырост у хуткасці дасць яшчэ і аб'яднанне скрыптоў (гэта значыць здымаеце іх усё з рэгістрацыі і потым проста падлучаеце сваю аб'яднаную версію) - але Google цяпер гэта ўжо не патрабуе.
2. Аб'яднанне CSS у WordPress
Калі аб'яднанне ўсіх JavaScript у адзін файл - не заўсёды добрая ідэя, то CSS-кі я б рэкамендаваў аб'ядноўваць па магчымасці заўсёды.
Памятаеце скрыншот ў самым пачатку артыкула (10 blocking CSS resources)? Адкуль бярэцца такая колькасць файлаў стыляў, бо распрацоўшчык тэмы напэўна разумеў, што робіць?
Адказ - з убудоў.
Напрыклад убудова «Contact Form 7» падлучае сваю ўласную табліцу стыляў, і хоць сама па сабе яна невялікая, то лепш усё ж пазбегнуць лішніх HTTP-запытаў.
Давайце пакрокава разбярэм як.
- Капіруеце змесціва табліцы стыляў плагіна і ўстаўляеце яго ў канец асноўнага файла стыляў - style.css.
- Правяраеце, прастаўленыя Ці ў дадзеных стылях адносныя спасылкі на малюнкі, напрыклад url ( 'images / load.gif'). Калі так, то альбо замяняе іх на абсалютныя, альбо пераносіце выявы з плагіна ў тэчку з тэмай.
- Заходзіце ў налады плагіна і глядзіце, ці ёсць магчымасць дзе-небудзь зняць галачку і не падключаць CSS плагіна. У «Contact Form 7» такой магчымасці няма, а значыць мы пераходзім да наступнага пункта.
- Адсякалі файлы праз functions.php. Для стыляў «Contact Form 7» код будзе наступны: add_action ( 'wp_print_styles', 'true_otkljuchaem_stili_contact_form', 100); // па ідэі вы можаце выкарыстоўваць і хук wp_enqueue_scripts, хоць канкрэтна яго я не тэставаў function true_otkljuchaem_stili_contact_form () {wp_deregister_style ( 'contact-form-7'); // у параметрах - ID падключаецца файла}
Таксама часам пры дапамозе умоўных тэгаў файлы ўбудоў (як CSS, так і JS) адключаюць толькі з тых старонак, на якіх яны не выкарыстоўваецца.
Ок, з «Contact Form 7» разабраліся, а як даведацца ID файлаў CSS іншых убудоў?
Да легко, адкрываем зыходны код старонкі і бачым там падобную карціну:
Таксама ёсць убудова, які дазволіць выканаць аб'яднанне CSS і JavaScript аўтаматычна - JS & CSS Script Optimizer.
Калі ў вас засталіся пытанні, альбо я забыўся згадаць пра што-небудзь у гэтым артыкуле, калі ласка, пакіньце свой каментар.
Міша Рудрастых
Упершыню пазнаёміўся з WordPress ў 2009 годзе. З 2014 года мяне можна сустрэць на WordCamp - афіцыйнай конфы па WordPress, часам там выступаю. Таксама ў цяперашні час вяду курсы па WordPress у Epic Skills .
Калі вам патрэбна дапамога з вашым сайтам ці можа нават распрацоўка з нуля - пішыце мне .
Окей, а цяпер - пра што гэты пост?Адкуль бярэцца такая колькасць файлаў стыляў, бо распрацоўшчык тэмы напэўна разумеў, што робіць?
Ок, з «Contact Form 7» разабраліся, а як даведацца ID файлаў CSS іншых убудоў?