Zobacz szczeg\u00f3\u0142y wtyczki<\/a><\/p>\nCo dok\u0142adnie robi z CSS i JS<\/h2>\n
Autoptimize agreguje arkusze styl\u00f3w i skrypty, czyli tworzy z wielu plik\u00f3w jeden lub kilka wi\u0119kszych. Taka paczka trafia do pami\u0119ci podr\u0119cznej i jest serwowana szybciej ni\u017c dziesi\u0105tki pojedynczych plik\u00f3w. Do tego minimalizacja usuwa zb\u0119dne znaki, co obni\u017ca rozmiar.<\/p>\n
Skrypty mog\u0105 zosta\u0107 oznaczone do \u0142adowania z atrybutami typu od\u0142\u00f3\u017c, a cz\u0119\u015b\u0107 CSS mo\u017ce zosta\u0107 zainlinowana jako krytyczne style. Krytyczny CSS to niewielki fragment, kt\u00f3ry odpowiada za wygl\u0105d widocznej cz\u0119\u015bci ekranu po wej\u015bciu. Reszta \u0142aduje si\u0119 po starcie, wi\u0119c strona od razu wygl\u0105da poprawnie.<\/p>\n
Wtyczka umo\u017cliwia te\u017c pozostawienie niekt\u00f3rych plik\u00f3w bez zmian poprzez list\u0119 wyklucze\u0144. To wa\u017cne, gdy konkretna biblioteka \u017ale znosi \u0142\u0105czenie lub minimalizacj\u0119.<\/p>\n
Kiedy to daje najwi\u0119kszy efekt<\/h2>\n
Najwi\u0119cej zyskuj\u0105 strony z rozbudowanymi motywami, kreatorami stron i wieloma dodatkami, gdzie liczba plik\u00f3w CSS i JS szybko ro\u015bnie. Efekt odczuj\u0105 te\u017c serwisy z ruchu mobilnego, bo kr\u00f3tsza \u015bcie\u017cka \u0142adowania i mniejsza waga zasob\u00f3w oznaczaj\u0105 szybszy start na s\u0142abszych urz\u0105dzeniach i sieciach.<\/p>\n
Instalacja i szybki start<\/h2>\n
Po instalacji wtyczki wchodzisz w ustawienia i zaznaczasz optymalizacj\u0119 dla JavaScript, CSS oraz HTML. Na tym etapie zwykle wystarczy domy\u015blna konfiguracja, kt\u00f3ra nie ingeruje agresywnie w kolejno\u015b\u0107 \u0142adowania.<\/p>\n
Nast\u0119pnie sprawd\u017a stron\u0119 w trybie prywatnym lub na innym urz\u0105dzeniu. Je\u015bli wszystko wygl\u0105da poprawnie, mo\u017cna w\u0142\u0105cza\u0107 kolejne opcje, jak od\u0142o\u017cone \u0142adowanie skrypt\u00f3w czy wstrzykni\u0119cie krytycznego CSS, i ponownie testowa\u0107 wynik oraz wygl\u0105d.<\/p>\n
Ustawienia kt\u00f3re maj\u0105 najwi\u0119ksze znaczenie<\/h2>\n
Najwa\u017cniejsze s\u0105 trzy grupy opcji. Pierwsza to \u0142\u0105czenie i minimalizacja CSS oraz JS, druga to spos\u00f3b \u0142adowania skrypt\u00f3w i styl\u00f3w w czasie startu, trzecia to wykluczenia. Dobrze ustawiona lista wyklucze\u0144 sprawia, \u017ce wra\u017cliwe skrypty pozostaj\u0105 bez zmian, a ca\u0142a reszta jest przyspieszona i bezpieczna dla wygl\u0105du.<\/p>\n
\u0141adowanie krytycznego CSS bez psucia wygl\u0105du<\/h2>\n
Je\u015bli po samym \u0142\u0105czeniu nadal wida\u0107 migotanie styl\u00f3w, warto doda\u0107 krytyczny CSS. To zestaw regu\u0142 niezb\u0119dnych, aby pierwszy ekran wygl\u0105da\u0142 dobrze zanim do\u0142aduj\u0105 si\u0119 pe\u0142ne style. Autoptimize pozwala wstrzykn\u0105\u0107 taki fragment w nag\u0142\u00f3wku, a pozosta\u0142\u0105 cz\u0119\u015b\u0107 arkuszy za\u0142adowa\u0107 p\u00f3\u017aniej.<\/p>\n
Najpro\u015bciej zacz\u0105\u0107 od krytycznych styl\u00f3w dla strony g\u0142\u00f3wnej i kilku typ\u00f3w podstron. Je\u015bli uk\u0142ad jest sp\u00f3jny, wystarczy jeden zestaw na ca\u0142y serwis. Gdy wygl\u0105d r\u00f3\u017cni si\u0119 mocno mi\u0119dzy szablonami, sensowne jest przygotowanie osobnych fragment\u00f3w.<\/p>\n
Obrazki i czyszczenie kodu HTML<\/h2>\n
Wtyczka potrafi r\u00f3wnie\u017c odchudzi\u0107 HTML i doda\u0107 leniwe wczytywanie zdj\u0119\u0107. Leniwe wczytywanie to technika, w kt\u00f3rej obrazki \u0142aduj\u0105 si\u0119 dopiero wtedy, gdy u\u017cytkownik do nich przewija. Dzi\u0119ki temu pierwsze widoki uruchamiaj\u0105 si\u0119 szybciej, a transfer nie marnuje si\u0119 na zawarto\u015b\u0107 niewidoczn\u0105 od razu.<\/p>\n
Typowe konflikty i jak je rozwi\u0105za\u0107<\/h2>\n
Zdarza si\u0119, \u017ce po w\u0142\u0105czeniu agregacji co\u015b przestaje dzia\u0142a\u0107. Najcz\u0119\u015bciej winny jest konkretny skrypt, kt\u00f3ry nie lubi minimalizacji lub zmiany kolejno\u015bci. Wtedy dodaj go do wyklucze\u0144 po nazwie pliku lub wzorcu adresu. Po zapisaniu ustawie\u0144 wyczy\u015b\u0107 pami\u0119\u0107 podr\u0119czn\u0105 wtyczki i przegl\u0105darki, a nast\u0119pnie sprawd\u017a stron\u0119.<\/p>\n
Je\u015bli pojawiaj\u0105 si\u0119 b\u0142\u0119dy JavaScript, pomocna bywa opcja owini\u0119cia kodu w blok try catch. Dzi\u0119ki temu pojedynczy b\u0142\u0105d nie zatrzyma dzia\u0142ania reszty skrypt\u00f3w. Alternatyw\u0105 jest wy\u0142\u0105czenie odk\u0142adania dla danego pliku, gdy kolejno\u015b\u0107 \u0142adowania ma znaczenie.<\/p>\n
Problemy ze stylami zwykle rozwi\u0105zuje poprawne ustawienie krytycznego CSS lub wyj\u0119cie z agregacji jednego arkusza, kt\u00f3ry odpowiada za kluczowe elementy widoku. Warto te\u017c sprawdzi\u0107, czy inny dodatek nie pr\u00f3buje robi\u0107 tej samej optymalizacji w tym samym czasie.<\/p>\n
Wsp\u00f3\u0142praca z cache CDN i wydajno\u015bci\u0105 serwera<\/h2>\n
Autoptimize dobrze wsp\u00f3\u0142gra z wtyczkami od cache stron statycznych, ale nie warto dublowa\u0107 tych samych zada\u0144. Je\u015bli inny dodatek ju\u017c \u0142\u0105czy i minimalizuje CSS oraz JS, wy\u0142\u0105cz to w jednym miejscu. Zostaw jedno narz\u0119dzie odpowiedzialne za optymalizacj\u0119 zasob\u00f3w i drugie za cache strony.<\/p>\n
Je\u015bli korzystasz z CDN, mo\u017cesz wskaza\u0107 jego adres w ustawieniach, aby po\u0142\u0105czone pliki by\u0142y serwowane z globalnej sieci dostarczania tre\u015bci. W po\u0142\u0105czeniu z kompresj\u0105 serwera daje to szybki start tak\u017ce dla u\u017cytkownik\u00f3w spoza Twojego kraju.<\/p>\n
Dla kogo ta wtyczka ma sens a kiedy odpu\u015bci\u0107<\/h2>\n
Autoptimize jest dobrym wyborem dla stron z rozbudowanym frontem, sklep\u00f3w i serwis\u00f3w opartych o kreatory. Zmniejsza liczb\u0119 zasob\u00f3w, porz\u0105dkuje ich \u0142adowanie i ogranicza migotanie wygl\u0105du. Dla prostych witryn z lekkim motywem korzy\u015b\u0107 bywa mniejsza, ale nadal mo\u017cna zyska\u0107 kilka cennych punkt\u00f3w w metrykach szybko\u015bci.<\/p>\n
Sprawd\u017a wtyczk\u0119 w praktyce<\/a><\/p>\nNie ma sensu uruchamia\u0107 kilku narz\u0119dzi robi\u0105cych to samo i liczy\u0107 na kumulacj\u0119 efektu. Je\u015bli hosting lub inna wtyczka zapewnia podobne funkcje, wybierz jedno miejsce do \u0142\u0105czenia i minimalizacji. A gdy Twoja strona jest ju\u017c bardzo lekka i wynik ogranicza si\u0119 do czasu odpowiedzi serwera, skup si\u0119 raczej na cache ca\u0142ej strony i optymalizacji zapyta\u0144 do bazy.<\/p>\n","protected":false},"excerpt":{"rendered":"
Strona na WordPressie potrafi wczytywa\u0107 si\u0119 zbyt d\u0142ugo nie dlatego, \u017ce serwer jest za s\u0142aby, ale przez dziesi\u0105tki osobnych plik\u00f3w CSS i JS, kt\u00f3re…<\/p>\n","protected":false},"author":1,"featured_media":215,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-214","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wtyczki-wordpress"],"_links":{"self":[{"href":"https:\/\/projektwordpress.pl\/index.php\/wp-json\/wp\/v2\/posts\/214","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/projektwordpress.pl\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/projektwordpress.pl\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/projektwordpress.pl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/projektwordpress.pl\/index.php\/wp-json\/wp\/v2\/comments?post=214"}],"version-history":[{"count":0,"href":"https:\/\/projektwordpress.pl\/index.php\/wp-json\/wp\/v2\/posts\/214\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/projektwordpress.pl\/index.php\/wp-json\/wp\/v2\/media\/215"}],"wp:attachment":[{"href":"https:\/\/projektwordpress.pl\/index.php\/wp-json\/wp\/v2\/media?parent=214"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/projektwordpress.pl\/index.php\/wp-json\/wp\/v2\/categories?post=214"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/projektwordpress.pl\/index.php\/wp-json\/wp\/v2\/tags?post=214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}