![\"Jak](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-180421-616f58516a344.png\")
<\/a><\/p>\nBrutto!<\/p>\n
Strony takie jak ta by\u0142y kiedy\u015b tworzone w ca\u0142o\u015bci za pomoc\u0105 HTML i kilku obraz\u00f3w. Jak wida\u0107, strony internetowe s\u0105 teraz odleg\u0142e od tego \u015bwiata.<\/p>\n
Jaki jest problem?<\/h2>\n
Cz\u0119sto, gdy odwiedzam jedn\u0105 z witryn mojego u\u017cytkownika motywu, widz\u0119 ponad 100 plik\u00f3w \u0142adowanych na ka\u017cdej stronie. W przeciwie\u0144stwie do tego, witryna Space Jam \u0142aduje tylko 7 plik\u00f3w, a ta witryna zosta\u0142a stworzona dla przeboju filmowego!<\/p>\n
Wi\u0119c co si\u0119 tutaj dzieje?<\/p>\n
C\u00f3\u017c, nowoczesne strony internetowe \u0142aduj\u0105 pliki CSS do stylizacji, maj\u0105 pliki JavaScript, aby doda\u0107 skrypty interakcji z u\u017cytkownikiem i analizy, i maj\u0105 zwykle znacznie wi\u0119cej obraz\u00f3w.<\/p>\n
A wiesz, co go pogarsza? Wtyczki.<\/p>\n
Mo\u017cesz mie\u0107 pi\u0119\u0107 wtyczek, z kt\u00f3rych ka\u017cda \u0142aduje w\u0142asne arkusze styl\u00f3w. Oznacza to pi\u0119\u0107 dodatkowych plik\u00f3w CSS do wys\u0142ania ka\u017cdemu odwiedzaj\u0105cemu witryn\u0119.<\/p>\n
Nie m\u00f3wi\u0119, \u017ce wtyczki s\u0105 z\u0142e<\/a>, ale witryny WordPress zwykle \u0142aduj\u0105 mn\u00f3stwo plik\u00f3w, poniewa\u017c ka\u017cda wtyczka \u0142aduje pliki niezale\u017cnie od innych.<\/p>\n WordPress czy nie, tworzenie nowoczesnej witryny, kt\u00f3ra \u0142aduje tylko siedem plik\u00f3w, jest nierealne, ale je\u015bli odpowiednio zoptymalizujemy nasze witryny, mo\u017cemy zrobi\u0107 znacznie lepiej ni\u017c 100.<\/p>\n WP Rocket<\/a> mo\u017ce bardzo skutecznie pom\u00f3c w rozwi\u0105zaniu tych problem\u00f3w i jest podstaw\u0105 naszej optymalizacji wydajno\u015bci tutaj w Compete Themes.<\/p>\n Zamierzam om\u00f3wi\u0107 trzy obszary, w kt\u00f3rych zobaczysz najwi\u0119kszy wzrost wydajno\u015bci dzi\u0119ki tej wtyczce. Udost\u0119pni\u0119 te\u017c zrzuty ekranu wszystkich menu na ko\u0144cu posta, aby\u015b m\u00f3g\u0142 przejrze\u0107 wszystkie dost\u0119pne ustawienia.<\/p>\n Zacznijmy od najwa\u017cniejszej funkcji, buforowania.<\/p>\n Aktualizacja:<\/strong> Zrobi\u0142em samouczek wideo krok po kroku, kt\u00f3ry przeprowadzi Ci\u0119 przez kroki, aby skonfigurowa\u0107 WP Rocket w Twojej witrynie.<\/p>\n [\u017ar\u00f3d\u0142o iframe=\/\/www.youtube.com\/embed\/aG5uFiWjsU4]<\/p>\n Subskrybuj motywy konkursowe na Youtube<\/a><\/p>\n Po przes\u0142aniu i zainstalowaniu WP Rocket uzyskasz dost\u0119p do pi\u0119knego pulpitu nawigacyjnego, w kt\u00f3rym mo\u017cesz rozpocz\u0105\u0107 optymalizacj\u0119.<\/p>\n WP Rocket w\u0142\u0105cza buforowanie w momencie jego aktywacji. Mo\u017cesz dos\u0142ownie aktywowa\u0107 wtyczk\u0119 i wylogowa\u0107 si\u0119 ze swojej witryny na zawsze, a nadal b\u0119dzie si\u0119 \u0142adowa\u0107 szybciej.<\/p>\n Trudno doceni\u0107 automatyczne buforowanie, je\u015bli nie masz pewno\u015bci, jak wp\u0142ywa to na Twoj\u0105 witryn\u0119.<\/p>\n Pomy\u015bl o buforowaniu w ten spos\u00f3b:<\/p>\n Wyobra\u017a sobie, \u017ce potrzebujesz dokumentu, aby znale\u017a\u0107 go w swojej szafce na dokumenty, a nast\u0119pnie zwr\u00f3ci\u0107 do szafki, gdy sko\u0144czysz. Nast\u0119pnym razem, gdy b\u0119dziesz potrzebowa\u0107 tego dokumentu, musisz ponownie pobra\u0107 go z szafki na akta.<\/p>\n Buforowanie jest jak trzymanie dokumentu na biurku po jego znalezieniu, dzi\u0119ki czemu mo\u017cna go natychmiast u\u017cy\u0107 ponownie. Podobnie jak pobranie dokumentu z biurka jest szybsze ni\u017c pobranie go z szafki na dokumenty, buforowanie zapobiega niepotrzebnym podr\u00f3\u017com do bazy danych.<\/p>\n Chodzi o to, \u017ce niezale\u017cnie od tego, ile plik\u00f3w \u0142aduje Twoja witryna lub jak du\u017ce s\u0105, wszystkie \u0142aduj\u0105 si\u0119 znacznie szybciej z w\u0142\u0105czonym buforowaniem.<\/p>\n Jak wspomniano, nie musisz zmienia\u0107 \u017cadnych ustawie\u0144, aby buforowanie dzia\u0142a\u0142o. Jest jednak kilka zmian, kt\u00f3re mo\u017cesz chcie\u0107 wprowadzi\u0107 w menu podstawowych ustawie\u0144 pami\u0119ci podr\u0119cznej.<\/p>\n Kliknij, aby zobaczy\u0107 obraz w pe\u0142nym rozmiarze<\/p>\n Ustawienia tutaj s\u0142u\u017c\u0105 g\u0142\u00f3wnie do dostosowania pami\u0119ci podr\u0119cznej, aby dzia\u0142a\u0142y najlepiej w Twojej witrynie. Na przyk\u0142ad, je\u015bli masz zupe\u0142nie inny projekt mobilny ni\u017c korzystanie z wtyczki takiej jak WPTouch<\/a>, WP Rocket mo\u017ce buforowa\u0107 te pliki osobno.<\/p>\n Mo\u017cesz r\u00f3wnie\u017c u\u017cy\u0107 pami\u0119ci podr\u0119cznej dla zalogowanych odwiedzaj\u0105cych, je\u015bli masz witryn\u0119 cz\u0142onkowsk\u0105 i w\u0142\u0105czysz buforowanie dla SSL (konieczne, je\u015bli Twoja witryna u\u017cywa \u201ehttps:\/\/").<\/p>\n Ponownie, tak naprawd\u0119 nie ma tu wiele do zrobienia poza aktywacj\u0105 wtyczki.<\/p>\n Sekcja optymalizacji plik\u00f3w to miejsce, w kt\u00f3rym zmniejszysz liczb\u0119 plik\u00f3w wczytywanych przez Twoj\u0105 witryn\u0119, a tak\u017ce rozmiar tych plik\u00f3w.<\/p>\n Kliknij, aby zobaczy\u0107 obraz w pe\u0142nym rozmiarze<\/p>\n Pierwsza opcja pozwala \u201ezminimalizowa\u0107” kod HTML witryny, wi\u0119c co to oznacza?<\/p>\n Deweloperzy pisz\u0105 kod z du\u017c\u0105 ilo\u015bci\u0105 odst\u0119p\u00f3w, formatowania i komentarzy, aby u\u0142atwi\u0107 czytanie. Kiedy \u0142adujemy te pliki na naszych stronach, nie musz\u0105 by\u0107 \u0142atwe do odczytania. Minifikacja usuwa wszelkie odst\u0119py mi\u0119dzy znakami i usuwa ca\u0142y tekst komentarza. To faktycznie zmniejsza rozmiar pliku, dzi\u0119ki czemu \u0142aduje si\u0119 szybciej.<\/p>\n Je\u015bli przejrzysz kod \u017ar\u00f3d\u0142owy dowolnej strony tutaj w Compete Themes, zobaczysz, jak minifikacja WP Rocket wp\u0142yn\u0119\u0142a na HTML:<\/p>\n Minifikacja jest niesamowita, poniewa\u017c zapewnia szybk\u0105 i \u0142atw\u0105 popraw\u0119 wydajno\u015bci i rzadko ma wp\u0142yw na dzia\u0142anie Twojej witryny.<\/p>\n Gotowy na nauk\u0119 kolejnego terminu technicznego?<\/p>\n Inn\u0105 fajn\u0105 funkcj\u0105 w podstawowych ustawieniach jest opcja \u0142\u0105czenia plik\u00f3w Google Fonts<\/a>. Wi\u0119kszo\u015b\u0107 motyw\u00f3w WordPress u\u017cywa czcionek Google, wi\u0119c prawdopodobnie \u0142adujesz jedn\u0105 lub dwie czcionki z tego miejsca. Ten proces \u0142\u0105czenia plik\u00f3w nazywa si\u0119 \u201ekonkatenacj\u0105”.<\/p>\n Og\u00f3lnie rzecz bior\u0105c, szybciej jest za\u0142adowa\u0107 jeden plik ni\u017c dwa, poniewa\u017c zmniejszyli\u015bmy liczb\u0119 \u017c\u0105da\u0144 HTTP, a nie potrzebujemy nic bardziej technicznego ni\u017c to?<\/p>\n Aby przejrze\u0107, minifikacja zmniejsza rozmiar plik\u00f3w, a konkatenacja \u0142\u0105czy je. Maj\u0105c mniej, mniejszych plik\u00f3w, Twoja witryna b\u0119dzie si\u0119 \u0142adowa\u0107 szybciej. Te dwa procesy s\u0105 niesamowite pod wzgl\u0119dem wydajno\u015bci i \u017cadna wtyczka nie obs\u0142uguje ich lepiej ni\u017c WP Rocket<\/a>.<\/p>\n Pami\u0119tasz m\u00f3j przyk\u0142ad pi\u0119ciu wtyczek, z kt\u00f3rych ka\u017cda \u0142aduje sw\u00f3j w\u0142asny arkusz styl\u00f3w? Tak to naprawisz.<\/p>\n Mo\u017cesz zminimalizowa\u0107 wszystkie pliki CSS, co da ci niewielki wzrost wydajno\u015bci, a nast\u0119pnie w\u0142\u0105czy\u0107 opcj\u0119 \u201epo\u0142\u0105cz”, aby po\u0142\u0105czy\u0107 je w jak najmniejsz\u0105 liczb\u0119 plik\u00f3w. Chocia\u017c podczas korzystania z tej opcji mog\u0105 wyst\u0105pi\u0107 problemy z wy\u015bwietlaniem w Twojej witrynie, zwykle nie stanowi to problemu.<\/p>\n Optymalizacja CSS dostawa<\/a> mo\u017ce r\u00f3wnie\u017c pom\u00f3c obci\u0105\u017cenie strony wizualnej szybciej ni\u017c bez niego.<\/p>\n Te same opcje minifikacji i \u0142\u0105czenia s\u0105 r\u00f3wnie\u017c dost\u0119pne dla plik\u00f3w JavaScript.<\/p>\n Nie chc\u0119 Ci\u0119 przestraszy\u0107, ale te opcje mog\u0105 czasami uszkodzi\u0107 cz\u0119\u015bci Twojej witryny (na interfejsie, a nie na pulpicie nawigacyjnym). Wa\u017cne jest, aby wypr\u00f3bowa\u0107 te ustawienia, a je\u015bli co\u015b przestanie dzia\u0142a\u0107, mo\u017cesz je po prostu wy\u0142\u0105czy\u0107. Wszystko jest odwracalne.<\/p>\n Zminimalizowanie plik\u00f3w JS zwykle nie stanowi problemu, ale kiedy je po\u0142\u0105czysz, czasami mo\u017cesz zepsu\u0107 funkcjonalno\u015b\u0107 swojej witryny. Oto, co robi\u0107\u2026<\/p>\n Aktywuj opcje minifikacji i \u0142\u0105czenia, a nast\u0119pnie wyczy\u015b\u0107 pami\u0119\u0107 podr\u0119czn\u0105 witryny za pomoc\u0105 WP Rocket. Nast\u0119pnie odwied\u017a swoj\u0105 witryn\u0119 i zr\u00f3b wszystko. Wypr\u00f3buj przyciski udost\u0119pniania spo\u0142eczno\u015bciowego, odwiedzaj posty i strony, przetestuj menu mobilne itp. Je\u015bli wszystko dzia\u0142a dobrze, mo\u017cesz i\u015b\u0107.<\/p>\n Istnieje r\u00f3wnie\u017c opcja \u201eodroczenia” plik\u00f3w JavaScript. Dzi\u0119ki temu Twoja witryna b\u0119dzie widoczna na ekranie przed zako\u0144czeniem \u0142adowania plik\u00f3w JavaScript. Je\u015bli w\u0142\u0105czysz t\u0119 opcj\u0119, przetestuj ponownie wszystkie funkcje witryny, aby sprawdzi\u0107, czy nie ma b\u0142\u0119d\u00f3w.<\/p>\n Wreszcie, odroczenie plik\u00f3w JavaScript w\u0142\u0105cza tryb awaryjny dla jQuery. Odznaczenie tego da ci niewielki wzrost wydajno\u015bci, ale mog\u0119 prawie zagwarantowa\u0107, \u017ce co\u015b zepsuje, wi\u0119c zalecam sprawdzenie tego.<\/p>\n WP Rocket ma kilka fajnych opcji optymalizacji multimedi\u00f3w w Twojej witrynie, w tym leniwe \u0142adowanie, kt\u00f3re mo\u017ce by\u0107 niezwykle skuteczne.<\/p>\n Kliknij, aby zobaczy\u0107 obraz w pe\u0142nym rozmiarze<\/p>\n Wyobra\u017a sobie, \u017ce masz bloga i na stronie g\u0142\u00f3wnej znajduje si\u0119 10 post\u00f3w, ka\u017cdy z obrazem. Po przybyciu go\u015bcia na ekranie widoczny jest tylko pierwszy wpis. Oto pytanie:<\/p>\n Po co \u0142adowa\u0107 wszystkie 10 zdj\u0119\u0107, je\u015bli u\u017cytkownik mo\u017ce zobaczy\u0107 tylko jeden? Co wi\u0119cej, dlaczego mia\u0142by\u015b \u0142adowa\u0107 wszystkie dziesi\u0119\u0107, skoro wi\u0119kszo\u015b\u0107 odwiedzaj\u0105cych mo\u017ce tylko przewin\u0105\u0107 drog\u0119 do trzeciego lub czwartego posta przed klikni\u0119ciem jednego?<\/p>\n Przy w\u0142\u0105czonym leniwym \u0142adowaniu WP Rocket<\/a> b\u0119dzie \u015bledzi\u0107, jak daleko przewin\u0119li si\u0119 odwiedzaj\u0105cy stron\u0119 i nie b\u0119dzie \u0142adowa\u0107 obraz\u00f3w, dop\u00f3ki odwiedzaj\u0105cy nie b\u0119d\u0105 blisko do nich dotrze\u0107.<\/p>\n Jak leniwie \u0142adowa\u0107 obrazy w WordPress (tylko 1 krok)<\/a><\/p>\n Zalet\u0105 jest to, \u017ce Twoja witryna \u0142aduje si\u0119 natychmiast szybciej, poniewa\u017c \u0142adujesz o wiele mniej obraz\u00f3w. Zmniejsza to r\u00f3wnie\u017c przepustowo\u015b\u0107 u\u017cywan\u0105 przez Twoj\u0105 witryn\u0119.<\/p>\n Mo\u017cesz tak\u017ce w\u0142\u0105czy\u0107 leniwe \u0142adowanie film\u00f3w i ramek iframe (ramki iframe s\u0105 u\u017cywane do osadzania tre\u015bci z innych witryn).<\/p>\n Dost\u0119pna jest r\u00f3wnie\u017c niesamowita funkcja, kt\u00f3ra pozwala wy\u015bwietla\u0107 miniatur\u0119 filmu z YouTube, dop\u00f3ki nie zostanie za\u0142adowany.<\/p>\n Lazy loading dzia\u0142a \u015bwietnie w przypadku witryn takich jak Pinterest<\/a> z du\u017c\u0105 ilo\u015bci\u0105 ma\u0142ych obraz\u00f3w, ale nie zawsze dzia\u0142a dobrze, je\u015bli masz du\u017ce obrazy. Problem polega na tym, \u017ce obraz nie \u0142aduje si\u0119, dop\u00f3ki odwiedzaj\u0105cy go nie przewin\u0105, a je\u015bli jest to du\u017cy obraz, by\u0107 mo\u017ce b\u0119d\u0105 musieli poczeka\u0107 sekund\u0119, a\u017c si\u0119 \u0142aduje. Mo\u017ce to by\u0107 denerwuj\u0105ce, je\u015bli dzieje si\u0119 to w przypadku ka\u017cdego obrazu na stronie.<\/p>\n W rzeczywisto\u015bci jedynym powodem, dla kt\u00f3rego nie mam w\u0142\u0105czonej tej opcji w Motywach konkursowych, jest to, \u017ce odwiedzaj\u0105cy lubi\u0105 bardzo szybko przewija\u0107 niekt\u00f3re posty, a obrazy nie s\u0105 gotowe, gdy do nich dotr\u0105.<\/p>\n WP Rocket ma r\u00f3wnie\u017c wygodne opcje wy\u0142\u0105czania obs\u0142ugi emoji i technologii osadzania WordPress. Ka\u017cda z tych funkcji \u0142aduje jeden ma\u0142y plik JS, wi\u0119c wy\u0142\u0105czenie ich obu spowoduje usuni\u0119cie dw\u00f3ch kolejnych plik\u00f3w z Twojej witryny.<\/p>\n Jak mog\u0142e\u015b si\u0119 domy\u015bli\u0107, lubi\u0119 emotikony, wi\u0119c w\u0142\u0105czam je ?<\/p>\n Zalecam jednak wy\u0142\u0105czenie osadzania, poniewa\u017c s\u0105 one bardziej irytuj\u0105ce ni\u017c przydatne. Je\u015bli kiedykolwiek wpisa\u0142e\u015b adres URL do edytora post\u00f3w, a WordPress zamieni go w pude\u0142ko przypominaj\u0105ce osadzony tweet \u2013 to jest to osadzanie, kt\u00f3re wy\u0142\u0105czasz. Ta opcja nie ma wp\u0142ywu na umieszczanie w YouTube ani Vimeo.<\/p>\n To s\u0105 g\u0142\u00f3wne kroki w celu optymalizacji witryny za pomoc\u0105 WP Rocket.<\/p>\n Pozosta\u0142e ustawienia s\u0142u\u017c\u0105 do dostrajania i naprawiania potencjalnych b\u0142\u0119d\u00f3w, chocia\u017c mo\u017cna uzyska\u0107 jeszcze wi\u0119cej korzy\u015bci w zakresie wydajno\u015bci.<\/p>\n Zgodnie z obietnic\u0105, oto zrzuty ekranu ze wszystkich pozosta\u0142ych menu w WP Rocket:<\/p>\n U\u017cywam WP Rocket<\/a> tutaj w Compete Themes i jest to jedna z pierwszych wtyczek, kt\u00f3re instaluj\u0119 na ka\u017cdej stronie, kt\u00f3r\u0105 buduj\u0119.<\/p>\n Je\u015bli jeste\u015b gotowy, aby zoptymalizowa\u0107 swoj\u0105 witryn\u0119, pobierz kopi\u0119 WP Rocket<\/a> i przyspiesz dzia\u0142anie witryny.<\/p>\n Kliknij tutaj, aby sprawdzi\u0107 WP Rocket teraz<\/a><\/p>\n A je\u015bli nie rozwa\u017ca\u0142e\u015b zmiany host\u00f3w, polecam zapoznanie si\u0119 z<\/a> t\u0105 recenzj\u0105 WP Engine<\/a>. Szybszy host mo\u017ce mie\u0107 ogromny i natychmiastowy wp\u0142yw na czas \u0142adowania witryny.<\/p>\n Kliknij tutaj, aby znale\u017a\u0107 inne sposoby na przyspieszenie witryny<\/a><\/p>\nJakie jest rozwi\u0105zanie?<\/h2>\n
1 Buforowanie<\/h2>\n
<\/a><\/p>\nJak pomaga buforowanie?<\/h3>\n
Skonfiguruj buforowanie<\/h3>\n
<\/a><\/p>\n2 Optymalizacja plik\u00f3w<\/h2>\n
<\/a><\/p>\nPodstawowe ustawienia<\/h3>\n
Minifikacja<\/h4>\n
<\/a><\/p>\nPowi\u0105zanie<\/h4>\n
Pliki CSS<\/h3>\n
<\/a><\/p>\nPliki JavaScript<\/h3>\n
<\/a><\/p>\nOptymalizuj bez b\u0142\u0119d\u00f3w<\/h4>\n
<\/a><\/p>\nCo to jest leniwe \u0142adowanie?<\/h3>\n
Filmy i ramki iframe<\/h3>\n
<\/a><\/p>\nWady leniwego \u0142adowania<\/h3>\n
Emoji i embedy<\/h3>\n
<\/a><\/p>\nCo jeszcze mo\u017cesz zrobi\u0107 z WP Rocket?<\/h2>\n
\n
Przyspiesz swoj\u0105 witryn\u0119<\/h2>\n