Чланци

Како креирати ЦСС критичне путање у ВордПресс-у

Разумевање ВордПресс ЦСС-а

Пре него што заронимо, хајде да разумемо како обичан ЦСС функционише у ВордПресс-у.

Свака ВордПресс тема се састоји од стиле.цсс који садржи сав код потребан за стилизовање ваше странице. Програмери тема би требало да подржавају све функције ВордПресс-а које укључују постове на блогу, коментаре, страницу са производима, страницу са чланством, формуларе, итд. Други додаци које инсталирате такође могу да додају сличне цсс листе стилова.

Ово може учинити цсс датотеке надувеним и великим у величини од 200 кб или чак више.

Шта је Цритицал Патх ЦСС?

Како ваше ЦСС датотеке расту, ваш претраживач треба да преузме те велике датотеке, анализира их и прикаже. Такође познат као блокирање рендеровања. Такође ће повећати први смислени приказ и први смислени приказ.

ЦСС критичне путање је ЦСС потребан да се горњи садржај прикаже на свакој веб страници. Као што име каже, „критичан“ ЦСС, који помаже претраживачу да га брзо нацрта и прикаже пре него што учита пуне ЦСС датотеке.

Обично је цсс критичне путање уграђен у заглавље, а изворна цсс датотека се учитава асинхроно или у подножје ради лакше употребе.

Зашто је Цритицал Патх ЦСС толико важан?

Мора да сте већ видели упозорење од алата као што су Гоогле ПагеСпеед Инсигхтс или ГТметрик које каже „оптимизујте испоруку цсс-а“ или „одложите неискоришћени цсс“.

Критични ЦСС нема никакве везе са временом учитавања странице. Не повећава/смањује време учитавања. Али даје много боље корисничко искуство. Помаже да се брзо „прикаже“ или „обоји“ веб страница.

  • Побољшава прво извлачење садржаја (ФЦП)
  • Побољшава прву значајну уплату (ФМП)
  • Уклоните неискоришћени ЦСС (технички га немојте уклањати, али дајте приоритет „корисном“ ЦСС-у)

Ево два снимка екрана мог блога са и без критичног ЦСС-а.

  • Као што можете видети у одељку „без критичне цсс путање“, било је потребно скоро 5 секунди да се кориснику покаже нешто корисно на мобилном уређају. Прегледач мора да направи додатни ХТТП захтев за цсс датотеку, да је преузме, рашчлани да би започео рендеровање. Али када користите критични цсс, сав потребан цсс мора бити уграђен и претраживач може да почне да приказује одмах након учитавања ХТМЛ датотеке за секунду или мање.

    Како направити критичан ЦСС у ВордПрессу?

    Постоји неколико начина за генерисање критичног ЦСС-а у ВордПресс-у.

    Коришћење додатака за кеширање

    ВП Роцкет је врхунски додатак за кеширање који заиста добро функционише.

    Један од разлога зашто користим ВП Роцкет на сваком сајту је сама критична ЦСС генерација. Они генеришу критични ЦСС одвојено за почетну страницу, страницу са постова, страницу категорије, страницу производа, итд. и уграђују је. Они ће вратити критични ЦСС ако дође до промена у теми или поставци.

    Све се може урадити притиском на дугме.

    Други додаци за кеширање који могу да генеришу критичан ЦСС

    Свифт Перформанце и ЛитеСпеед (захтева ЛитеСпеед/ОпенЛитеСпеед сервер) су слични додаци који могу да генеришу Цритицал ЦСС. Оба ова додатка имају облак и пуну кеш меморију уграђену у своје сервере.

    Коришћење Аутоптимизе + Фрее Цритицал ЦСС Генератор

    Постоје онлајн алати треће стране који обезбеђују важан цсс уносом УРЛ адресе ваше веб локације. пегасаас је тако одличан бесплатни алат.

    Ево како да то урадите:

    Корак 1. Идите на хттпс://пегасаас.цом/цритицал-патх-цсс-генератор/ и унесите своју УРЛ адресу. Копирајте генерисани „Цритицал Патх ЦСС“.

    Корак 2 У подешавањима аутоматске оптимизације (омогућите напредна подешавања), у одељку „ЦСС опције“, означите „Инлине анд Дефер ЦСС“ и налепите копирани ЦСС.

    Предности:

    • Бесплатно је

    минуси:

    • Нема засебног критичног ЦСС-а за различите типове страница (нпр.: почетна страница, страница са постовама, страница категорије, страница производа, итд.)
    • Не обнављајте аутоматски на основу промене теме/подешавања

    Зашто сам ВордПресс не може да генерише критичан ЦСС?

    Као што сте можда приметили, креирање цсс критичне путање омогућава спољне услуге. Па зашто сам Вордпрес не може да га генерише?

    Креирање критичног ЦСС-а омогућено је пројектима отвореног кода као што су Цритицал (од Гоогле-а), ЦритицалЦСС или пентхоусе. Сви ови пројекти су засновани на НодеЈС-у, а не на ПХП-у. Дакле, морате да инсталирате НодеЈС на свој сервер. Већина дељених/управљаних хостинг провајдера то не дозвољава из неколико разлога.