{"id":244925,"date":"2022-04-05T10:23:00","date_gmt":"2022-04-05T07:23:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=244925"},"modified":"2022-04-27T12:23:51","modified_gmt":"2022-04-27T09:23:51","slug":"jak-zoptymalizowac-dostarczanie-css-w-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/jak-zoptymalizowac-dostarczanie-css-w-wordpress\/","title":{"rendered":"Jak zoptymalizowa\u0107 dostarczanie CSS w WordPress"},"content":{"rendered":"

Je\u015bli tu jeste\u015b, prawdopodobnie otrzyma\u0142e\u015b to powiadomienie w te\u015bcie Google PageSpeed \u200b\u200bInsights<\/a> :<\/p>\n

\"Jak<\/a><\/p>\n

Chocia\u017c wyeliminowanie wszystkich plik\u00f3w blokuj\u0105cych renderowanie mo\u017ce by\u0107 trudne, nie jest to trudne z odpowiednimi narz\u0119dziami.<\/p>\n

W tym przewodniku poka\u017c\u0119 Ci trzy sposoby na przyspieszenie witryny<\/a> dzi\u0119ki zoptymalizowanemu dostarczaniu CSS. Dost\u0119pne s\u0105 tutaj opcje zar\u00f3wno dla wszystkich nowo\u015bci WordPress, jak i programist\u00f3w.<\/p>\n

Zacznijmy od g\u00f3ry \u2013 co dok\u0142adnie oznacza optymalizacja dostarczania CSS w witrynie WordPress?<\/p>\n

Co oznacza \u201eoptymalizacja dostarczania CSS"?<\/h2>\n

Pozw\u00f3l, \u017ce najpierw wyja\u015bni\u0119, co mam na my\u015bli.<\/p>\n

Pliki CSS s\u0142u\u017c\u0105 do stylizowania stron internetowych<\/a>. Ka\u017cdy motyw WordPress \u0142aduje plik style.css i prawdopodobnie masz kilka dodatkowych arkuszy styl\u00f3w (plik\u00f3w CSS) dodanych przez wtyczki. Na przyk\u0142ad, je\u015bli masz wtyczk\u0119, kt\u00f3ra dodaje nowy wid\u017cet, b\u0119dzie musia\u0142a za\u0142adowa\u0107 inny arkusz styl\u00f3w, aby nada\u0107 mu styl.<\/p>\n

Wszystkie pliki CSS s\u0105 \u0142adowane przed wyrenderowaniem witryny.<\/strong><\/p>\n

Oznacza to, \u017ce do tego czasu odwiedzaj\u0105cy zobacz\u0105 pusty bia\u0142y ekran. Teraz jest rzecz\u2026<\/p>\n

Wi\u0119kszo\u015b\u0107 za\u0142adowanego CSS nie jest potrzebna dla ka\u017cdej strony, na kt\u00f3rej znajduje si\u0119 odwiedzaj\u0105cy, a jeszcze mniej jest potrzebna do tego, co mo\u017ce od razu zobaczy\u0107. Na przyk\u0142ad, po co kaza\u0107 im czeka\u0107 podczas \u0142adowania styl\u00f3w do stopki? Prawdopodobnie minie co najmniej kilka sekund, zanim to zobacz\u0105 (je\u015bli kiedykolwiek to zrobi\u0105).<\/p>\n

Op\u00f3\u017aniaj\u0105c nasze pliki CSS lub \u0142aduj\u0105c je asynchronicznie, mo\u017cemy pozwoli\u0107, aby witryna pojawi\u0142a si\u0119 w przegl\u0105darce u\u017cytkownika przed zako\u0144czeniem \u0142adowania arkuszy styl\u00f3w.<\/p>\n

W tym przewodniku podziel\u0119 si\u0119 trzema r\u00f3\u017cnymi podej\u015bciami do odroczenia arkuszy styl\u00f3w i optymalizacji dostarczania CSS.<\/p>\n

Zoptymalizowane krytyczne \u015bcie\u017cki renderowania w akcji<\/h3>\n

Je\u015bli odwiedzasz stron\u0119 g\u0142\u00f3wn\u0105 Compete Themes<\/a>, obserwuj wska\u017anik \u0142adowania na karcie przegl\u0105darki podczas wczytywania witryny. Zauwa\u017cysz, \u017ce gdy witryna jest widoczna i wygl\u0105da na wczytan\u0105, wska\u017anik \u0142adowania kr\u0119ci si\u0119 jeszcze przez chwil\u0119.<\/p>\n

To przyk\u0142ad tego, jak zoptymalizowane dostarczanie CSS wygl\u0105da w praktyce.<\/p>\n

Je\u015bli chcesz zobaczy\u0107 przyk\u0142ad wysoce zoptymalizowanej krytycznej \u015bcie\u017cki renderowania<\/a>, odwied\u017a Amazon. Ca\u0142a strona nie \u0142aduje si\u0119 od razu. Zamiast tego w ci\u0105gu kilku sekund zobaczysz r\u00f3\u017cne elementy pojawiaj\u0105ce si\u0119 na stronie dzi\u0119ki starannie zoptymalizowanej \u015bcie\u017cce renderowania.<\/p>\n

1 rakieta WP<\/h2>\n

U\u017cywam wtyczki WP Rocket<\/a> tutaj w Compete Themes i polecam j\u0105 przed wszystkimi innymi rozwi\u0105zaniami do krytycznej optymalizacji \u015bcie\u017cki renderowania.<\/p>\n

Optymalizacja dostarczania CSS za pomoc\u0105 WP Rocket naprawd\u0119 nie mo\u017ce by\u0107 prostsza. W menu Optymalizacja plik\u00f3w znajduje si\u0119 pole wyboru umo\u017cliwiaj\u0105ce w\u0142\u0105czenie tej funkcji.<\/p>\n

\"Jak<\/a><\/p>\n

Po sprawdzeniu WP Rocket automatycznie odroczy wszystkie twoje arkusze styl\u00f3w, aby nie by\u0142y \u0142adowane, dop\u00f3ki witryna nie pojawi si\u0119 w przegl\u0105darce u\u017cytkownika. Teraz, je\u015bli ca\u0142y CSS zosta\u0142by odroczony, Twoja witryna wygl\u0105da\u0142aby okropnie, dop\u00f3ki nie zostanie za\u0142adowana, a programi\u015bci WP Rocket zaj\u0119li si\u0119 tym elegancko za pomoc\u0105 swojej wtyczki.<\/p>\n

Po w\u0142\u0105czeniu tej opcji WP Rocket automatycznie znajdzie kod CSS potrzebny do stylizacji cz\u0119\u015bci witryny, kt\u00f3re odwiedzaj\u0105cy widz\u0105 w momencie za\u0142adowania witryny, a kod zostanie dodany do dokumentu.<\/p>\n

Innymi s\u0142owy, Twoja witryna wy\u015bwietla si\u0119 szybciej w przegl\u0105darce i wydaje si\u0119, \u017ce jest w pe\u0142ni za\u0142adowana, podczas gdy odroczony CSS jest \u0142adowany przez nast\u0119pn\u0105 sekund\u0119 lub dwie.<\/p>\n

Moim zdaniem jest to zdecydowanie najlepsze rozwi\u0105zanie do optymalizacji dostarczania CSS za pomoc\u0105 WordPressa.<\/p>\n

WP Rocket to wtyczka premium, ale je\u015bli szybsze czasy \u0142adowania przynios\u0105 Ci wi\u0119ksze dochody z Twojej witryny, zdecydowanie rozwa\u017cy\u0142bym zakup jej dla Twojej witryny. Mam o wiele bardziej szczeg\u00f3\u0142owe spojrzenie na WP Rocket,<\/a> kt\u00f3re mo\u017cesz przeczyta\u0107, je\u015bli chcesz dowiedzie\u0107 si\u0119 wi\u0119cej. W przeciwnym razie mo\u017cesz sprawdzi\u0107 ich witryn\u0119 tutaj<\/a>.<\/p>\n

2 Autooptymalizacja<\/h2>\n

Drugie podej\u015bcie, kt\u00f3re polecam, to wtyczka Autooptimize<\/a>.<\/p>\n

\"Jak<\/a><\/p>\n

Ta bogata w funkcje wtyczka wydajno\u015bci zapewnia kilka podej\u015b\u0107 do optymalizacji dostarczania CSS. Najprostsz\u0105 opcj\u0105 jest po prostu wbudowanie ca\u0142ego CSS. Spowoduje to pobranie ca\u0142ego kodu CSS znalezionego w arkuszach styl\u00f3w i dodanie go bezpo\u015brednio do dokumentu strony, dzi\u0119ki czemu \u017cadne arkusze styl\u00f3w nie zostan\u0105 za\u0142adowane.<\/p>\n

Aby znale\u017a\u0107 t\u0119 opcj\u0119, musisz klikn\u0105\u0107 przycisk Poka\u017c ustawienia zaawansowane u g\u00f3ry.<\/p>\n

\"Jak<\/a><\/p>\n

Zobaczysz wtedy opcj\u0119 wbudowania wszystkich CSS.<\/p>\n

\"Jak<\/a><\/p>\n

Chocia\u017c ta opcja mo\u017ce poprawi\u0107 wydajno\u015b\u0107, je\u015bli do dokumentu strony dodano zbyt du\u017co kodu CSS, mo\u017ce zamiast tego spowolni\u0107 witryn\u0119. Mo\u017ce warto poeksperymentowa\u0107.<\/p>\n

W przeciwnym razie sprytnym podej\u015bciem jest w\u0142\u0105czenie opcji Inline i odrocz CSS. Spowoduje to odroczenie wszystkich arkuszy styl\u00f3w i umieszczenie tylko krytycznego kodu CSS. Jednak nie znajdzie automatycznie krytycznego CSS, takiego jak WP Rocket.<\/p>\n

Jak wi\u0119c uzyska\u0107 krytyczny kod CSS witryny? Nawet dla do\u015bwiadczonego programisty WP mo\u017ce to by\u0107 rodzaj drapie\u017cnika.<\/p>\n

Chocia\u017c sam nie testowa\u0142em tego narz\u0119dzia pod k\u0105tem niezawodno\u015bci, to darmowe narz\u0119dzie Critical Path CSS Generator<\/a> by\u0142oby realnym podej\u015bciem. Wprowad\u017a adres URL swojej witryny, a zwr\u00f3ci on CSS, kt\u00f3ry koniecznie musisz za\u0142adowa\u0107.<\/p>\n

Nast\u0119pnie mo\u017cesz skopiowa\u0107 i wklei\u0107 ten kod do pola CSS \u015bcie\u017cki krytycznej w Autooptimize.<\/p>\n

\"Jak<\/a><\/p>\n

W przypadku korzystania z tego podej\u015bcia mo\u017ce by\u0107 konieczne dodanie dodatkowego kodu CSS dla r\u00f3\u017cnych stron witryny, a tak\u017ce mo\u017ce wymaga\u0107 bardzo dobrej znajomo\u015bci kodu CSS motywu, aby zapewni\u0107 sp\u00f3jn\u0105 stylizacj\u0119.<\/p>\n

Inne podej\u015bcie<\/h3>\n

Istnieje wtyczka o nazwie Autoptimize power-up na stronie krytycznej<\/a>. To do\u015b\u0107 k\u0119s, ale ta dodatkowa wtyczka pozwoli Ci automatycznie wygenerowa\u0107 krytyczny CSS Twojej witryny za pomoc\u0105 us\u0142ugi krytycznej.com<\/a>.<\/p>\n

Aby skorzysta\u0107 z tej opcji, musisz zarejestrowa\u0107 si\u0119 w CriticalCSS, aby uzyska\u0107 p\u0142atne konto.<\/p>\n

3 Przyspieszenie<\/h2>\n

Ta ostatnia opcja jest bardzo szybka i \u0142atwa do wdro\u017cenia przez programist\u0119 WordPress.<\/p>\n

Speed \u200b\u200bUp<\/a> to lekka wtyczka, kt\u00f3ra pozwala odroczy\u0107 wszelkie niekrytyczne arkusze styl\u00f3w.<\/p>\n

\"Jak<\/a><\/p>\n

Chocia\u017c nie zoptymalizuje to ca\u0142kowicie dostarczania CSS, pomo\u017ce.<\/p>\n

Za\u0142\u00f3\u017cmy, \u017ce tw\u00f3j motyw dodaje jeden arkusz styl\u00f3w, a nast\u0119pnie pi\u0119\u0107 dodatkowych arkuszy styl\u00f3w dodanych przez wtyczki. Je\u015bli tylko arkusz styl\u00f3w motywu jest krytyczny do za\u0142adowania przed wy\u015bwietleniem witryny, mo\u017cesz odroczy\u0107 pozosta\u0142e pi\u0119\u0107.<\/p>\n

Przyspieszenie daje Ci prosty filtr, kt\u00f3ry mo\u017cesz doda\u0107 do pliku functions.php motywu potomnego (lub wtyczki), aby odroczy\u0107 dowolny arkusz styl\u00f3w. Wszystko czego potrzebujesz to uchwyty ka\u017cdego \u0142adowanego arkusza styl\u00f3w. Mo\u017cesz znale\u017a\u0107 tutaj kilka prostych funkcji<\/a> do wyprowadzania uchwyt\u00f3w wszystkich zarejestrowanych arkuszy styl\u00f3w w Twojej witrynie.<\/p>\n

Ponownie, b\u0119dzie to szybkie i \u0142atwe dla programisty, ale nie poleca\u0142bym tego rozwi\u0105zania, je\u015bli nie piszesz kodu.<\/p>\n

Wniosek<\/h2>\n

Mam nadziej\u0119, \u017ce w tym po\u015bcie dowiedzia\u0142e\u015b si\u0119 czego\u015b o optymalizacji wydajno\u015bci WordPressa<\/a>.<\/p>\n

Chocia\u017c ka\u017cde z trzech powy\u017cszych rozwi\u0105za\u0144 mo\u017ce dzia\u0142a\u0107 dobrze, musz\u0119 na koniec wypowiedzie\u0107 si\u0119 na temat wtyczki WP Rocket<\/a>. Jako bloger i programista motyw\u00f3w WordPress uwa\u017cam, \u017ce praca z ni\u0105 jest \u0142atwa i bezbolesna.<\/p>\n

Je\u015bli chcesz uzyska\u0107 wi\u0119cej wskaz\u00f3wek dotycz\u0105cych przyspieszenia witryny, mo\u017ce Ci si\u0119 spodoba\u0107 ten przewodnik dotycz\u0105cy optymalizacji obrazu<\/a> lub moja recenzja silnika WP, na<\/a> kt\u00f3rej opiera si\u0119 Compete Themes w celu szybkiego \u0142adowania.<\/p>\n

\u0179r\u00f3d\u0142o nagrywania: www.competethemes.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

Dowiedz si\u0119, jak przyspieszy\u0107 dzia\u0142anie witryny WordPress za pomoc\u0105 jednego z tych trzech podej\u015b\u0107 do optymalizacji dostarczania CSS. Wskaz\u00f3wki dla pocz\u0105tkuj\u0105cych i zaawansowanych w \u015brodku.<\/p>\n","protected":false},"author":1,"featured_media":256898,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[654,585,665,612],"tags":[847],"class_list":["post-244925","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jak-zrobic","category-przyspiesz-wordpressa","category-wolny-zawod","category-uncategorized-8","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/posts\/244925","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/comments?post=244925"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/posts\/244925\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/media\/256898"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/media?parent=244925"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/categories?post=244925"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/tags?post=244925"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}