Ideálne nastavenie automatického optimalizácie + Cloudflare / StackPath CDN (2020)

Autoptimize je skvelý doplnok, ale pre ukladanie do vyrovnávacej pamäte je WP Rocket zvyčajne v prieskumoch verejnej mienky na prvom mieste.


Tak prečo by ste to používali??

Pretože niektorí hostitelia majú radi Choď oci a WP Engine zakázať väčšinu doplnkov pre vyrovnávaciu pamäť (pretože majú svoj vlastný vstavaný systém ukladania do vyrovnávacej pamäte), ale nerobia veci ako optimalizácia HTML, CSS, JavaScript, písma Google alebo CDN (sieť na doručovanie obsahu). Aj keď systém ukladania do vyrovnávacej pamäte vášho hostiteľa môže na ukladanie do vyrovnávacej pamäte dobre fungovať, Autoptimize vám pomôže urobiť „zvyšok“ vecí (opravenie položiek v GTmetrix + Pingdom). Vyhnite sa nástrojom PageSpeed ​​Insights Google nemeria ani časy načítania.

Dokonca aj vývojár aplikácie Autoptimize na svojej stránke doplnkov hovorí, že najlepšie funguje v kombinácii s doplnkom cache. Ak idete po bezplatnej trase, odporúčam Swift a WP Rocket ak dokážete urobiť 49 dolárov ročne, pretože je to jednoduchšie konfigurovať (je to tiež to, čo používam a mám 100% skóre v GTmetrix), pretože prichádza s mnohými funkciami, ktoré väčšina doplnkov cache nemá (čistenie databázy, hosťovanie kódu Google Analyitcs lokálne, srdcový rytmus) riadenie a integrácia s oboma Cloudflare + ďalšími CDN). Mám návody pre WP Rocket, rýchly, Najrýchlejšia vyrovnávacia pamäť WP, W3TC a dokonca aj super vyrovnávacia pamäť WP.

Takže nakonfigurujme nastavenia automatického optimalizácie. Ukážem vám tiež, ako pridať CDN (ideálne oboje CloudFlare a StackPath), pretože každé z nich má svoj vlastný súbor dátových centier a viac dátových stredísk = rýchlejšie doručovanie obsahu. CDN sa odporúča v roku 2008 Sprievodca optimalizáciou WordPress.

Automatické dopĺňanie doplnku

1. JS, CSS, & HTML

Povoľte všetky tieto možnosti na optimalizáciu súborov JavaScript, CSS a HTML, potom si pozrite pokyny nižšie.

Automatické nastavenie JS CSS HTML

Optimalizujte kód JavaScript

  • Agregovať súbory JS: enable, kombinuje to súbory JavaScriptu podľa odporúčaní GTmetrix. Ak je zakázaná, jednotlivé súbory sa načítajú a nebudú sa kombinovať.
  • Agregujte tiež vložené JS: enable, kombinuje to súbory JavaScript, ktoré sa nachádzajú v súboroch HTML. Automatické optimalizovanie dáva upozornenie, ktoré v podstate znamená, že ak na vašom webe niečo poruší, vylúčte súbory JavaScript alebo to zakážte.
  • Vynútiť JavaScript vo formáte : deaktivujte, pokiaľ nemáte chyby jazyka JavaScript. Je lepšie sa snažiť nájsť problematické súbory a vylúčiť ich, než zvoliť túto možnosť, pretože to blokuje vykreslenie JavaScriptu (nie je optimálne pre rýchlosť).
  • Vylúčiť skripty z automatického dopĺňania: ak sa po povolení určitých nastavení jazyka JavaScript vyskytnú chyby, vyhľadajte problematický kód JavaScript a vylúčte súbory tu.
  • Pridajte olovené balenie: deaktivujte, pokiaľ nemáte chyby jazyka JavaScript. Toto je ďalší spôsob, ako opraviť chyby JS bez toho, aby ste museli povoliť vynútenie JavaScriptu v hlave.

Optimalizujte kód CSS

  • Agregovať súbory CSS: enable, to isté ako agregovanie súborov JS iba pre CSS.
  • Agregujte tiež inline CSS: enable, to isté ako agregovanie vložených súborov JS iba pre CSS. Umožňujú oboje ďalej zlepšovať časy načítania + skóre GTmetrix.
  • Generovať údaje: URI obrázkov: deaktivujte, ak používate CDN. MaxCDN (StackPath) varuje vás že povolenie tejto možnosti spôsobí, že obrázky sa budú zobrazovať z vášho pôvodu, namiesto vášho CDN. Ak to povolíte, môže to spočiatku viesť k menšiemu počtu žiadostí HTTP, pravdepodobne to však nie je po nastavení CDN a prostredníctvom toho prostredníctvom zobrazovania obrázkov.
  • Inline a Defer CSS: enable, môžete povoliť iba túto možnosť alebo „vložiť všetky CSS“, ktoré funkcia Autoptimize v ich častých otázkach neodporúča. Hovorí sa: „Aj keď vložením všetkých CSS dôjde k zablokovaniu CSS bez vykreslenia, bude to mať za následok to, že vaša základná stránka HTML sa výrazne zväčší, takže bude potrebné viac„ spiatočných okien “..
  • Vložené všetky CSS: disable, Autoptimize neodporúča povoliť toto.
  • Vylúčiť CSS z automatického dopĺňania: ak po povolení určitých nastavení CSS uvidíte chyby, vyhľadajte problematické súbory CSS a vylúčte ich tu. Poznámka: možnosť „minifikovať vylúčené CSS a JS“ v položke Rôzne možnosti musí byť vypnutá.

2. Možnosti CDN

To je miesto, kde si URL CDN ide (pokyny nižšie). Cloudflare vám neposkytuje URL CDN (namiesto toho zmeníte nameservery). Základná webová adresa CDN je špecificky pre StackPath, KeyCDN a ďalšie CDN – nie pre cloudflare. Navrhujem používať StackPath + Cloudflare, pretože vaše CDN budú mať viac dátových centier a viac dátových centier = rýchlejšia webová stránka.

Krok 1: Prihláste sa na odber CDN. Používam StackPath, ktorý má viac ako 34 dátových centier, ktoré sa nachádzajú v USA a kde je väčšina mojich návštevníkov. Bezplatná 30-dňová skúšobná verzia je 10 USD mesačne.

StackPath-data-center

Krok 2: Na paneli StackPath kliknite na kartu CDN a vytvorte StackPath CDN Site.

StackPath-CDN-Tab

StackPath-CDN-Domain

StackPath-Server-IP-Address

* Skopírujte adresu IP servera podľa potreby v kroku 5 tejto časti.

StackPath-CDN-URL-Autoptimize

Krok 3: Vložte svoju adresu URL CDN do automatického dokončovania pomocou http: // alebo https: // (podľa toho, čo používate).

Autoptimize URL CDN

Krok 4: V StackPath prejdite na CDN → Nastavenia vyrovnávacej pamäte, potom kliknite na „Vymazať všetko“.

StackPath-Purge-Cache

Krok 5: Zoznam bielych adries servera na serveri StackPath (WAF → Firewall).

StackPath-Whitelist-IP

Krok 6: Spustite svoje stránky v GTmetrix a „sieť na doručovanie obsahu“ by mala byť v YSlow zelená.

CDN GTmetrix YSlow

3. Rôzne nastavenia

Tu sú rôzne nastavenia:

Automatické nastavenie rôznych nastavení

Uložte agregovaný skript / css ako statické súbory – ak je povolený, znamená to, že súbory CSS a JS sa ukladajú do vyrovnávacej pamäte a zobrazujú sa prostredníctvom servera, takže ak ich hosť nezvládne, povoľte ho.

Minifikujte vylúčené súbory CSS a JS – ak vylučujete určité súbory CSS a JavaScript, je to preto, že pri ich optimalizácii je problém a nechcete, aby boli zmenšené..

Optimalizujte tiež pre prihlásených editorov / správcov – vypnúť, zvyčajne chcete vypnúť výkonnostné funkcie v správcovi WordPress, vrátane výkonnostných funkcií Cloudflare.

4. Nastavenia obrázkov

Automatické optimalizovanie môže tiež pomôcť zrýchliť načítavanie obrázkov.

Automatické nastavenie obrázkov

Optimalizujte obrázky – Adresy URL na vašom webe sa zmenia tak, aby ukazovali na ShortNixel’s CDN. Nemalo by to ovplyvniť to, ako vyzerajú, pokiaľ ide o bezstratovú kompresiu, ale načítajú sa rýchlejšie.

Kvalita optimalizácie obrazu – nájdite svoju vlastnú jedinečnú rovnováhu medzi kompresiou a kvalitou (používam lesklý). Tu sú rozdiely v každej úrovni kompresie od ShortPixel:

Úrovne kompresie obrazu ShortPixel

  • stratová: najviac kompresie, najvyššia strata kvality.
  • lesklý: stredná kompresia, malé straty kvality.
  • Lossless: nízka kompresia, najnižšia strata kvality.

Načítať webovú stránku v podporovaných prehľadávačoch – povolené, ak používate obrázky WebP a obrázky s lenivým načítaním.

Obrázky s menším zaťažením – Ja osobne svoje obrázky nezaťažujem, pretože neustále načítavanie obrázkov pri posúvaní stránky nadol môže byť pre používateľov nepríjemné. Áno, vedie to k menšiemu počtu žiadostí a je odporúčané spoločnosťou Google pre rýchlejšie načítanie, ale je to nepríjemné. To je úplne na vás.

5. Kritické CSS

Týka sa to Autoptimize doplnok na spustenie criticalcss.com.

Vyžaduje si to prémiu platený program z criticalcss.com ($ 7 / mesiac).

Doplnok vytvára kritické pravidlá CSS, aby sa zaistilo, že stránky sa vykreslia pred načítaním úplného CSS, čím sa zlepšuje čas začiatku vykresľovania. Všetko, čo musíte urobiť, je nainštalovať doplnok, zaregistrovať sa do plánu, zadať kľúč API Critical CSS API do časti „Critical CSS“ programu Autoptimize a doplnok urobí všetko ostatné. Skontrolujte doplnok FAQ podrobnosti o vlastných konfiguráciách.

Osobne ich nepoužívam a radšej by som použil ďalších 7 dolárov mesačne na výkonnejšom serveri.

Automatické optimalizovanie zapnutia kritického súboru

Automatické nastavenie kritických nastavení CSS

6. Extra nastavenia

Autoptimize-extra-Nastavenia

Písma Google – povoliť, ak sa používa Písma Google ktoré spomaľujú čas načítania pri sťahovaní z externých zdrojov (knižnica písem Google). Dávam prednosť možnosti „kombinovať a prepojiť v hlave“, pretože to zlepšuje časy načítania bez viditeľnosti načítania písiem (čo sa zvyčajne stáva pri asynchrónnom načítaní. Taktiež vyskúšajte poslednú možnosť písma Google „asynchrónne kombinujte a načítavajte písma s webfont.js“A zistite, ktoré výnosy prinesú lepšie výsledky v GTmetrix.

Odstrániť Emojis – enable (emodži sú zlé kvôli časom načítania).

Odstráňte reťazce dopytov zo statických zdrojov – Reťazce dopytov sa zvyčajne generujú pomocou doplnkov a nedajú sa opraviť (v GTmetrix / Pingdom) to jednoducho umožňujú, ale môžete to skúsiť. Lepším riešením je skontrolovať, či na vašom webe nie sú pluginy s vysokým obsahom CPU, a nahradiť ich ľahkými pluginmi. Väčšina doplnkov s vysokým obsahom procesorov zahŕňa sociálne zdieľanie, galériu, tvorcov stránok, súvisiace príspevky, štatistiku a živé rozhovory. Mali by ste tiež odstrániť všetky nepotrebné doplnky a vyčistiť databázu (napríklad pomocou doplnku WP-optimalizácia) na vymazanie tabuliek, ktoré zostali po odinštalovaní doplnkov.

Predbežné pripojenie k doménam tretích strán – pomáha prehliadačom predvídať žiadosti z externých zdrojov (Fonty Google, Analytics, Mapy, Správca značiek, Amazon store atď.). Zvyčajne sa zobrazia ako „zníženie počtu vyhľadávaní DNS“ vo vašom prehľade GTmetrix, nižšie však uvádzame bežné príklady.

  • https://fonts.googleapis.com
  • https://fonts.gstatic.com
  • https://www.google-analytics.com
  • https://ajax.googleapis.com
  • https://connect.facebook.net
  • https://www.googletagmanager.com
  • https://maps.google.com

Predbežne načítať konkrétne požiadavky – nájdete viac informácií o predbežnom načítaní a rady pre prehľadávače z WP Rocket, ale v podstate to umožňuje, aby sa určité súbory sťahovali ako vysoká priorita.

Async Javascript-Files – to znamená, že niečo bráni rýchlemu načítaniu obsahu nad záhybom stránky. Tento tutoriál o vykreslenie blokovania JavaScriptov to vysvetľuje dobre, ale ak vidíte chyby JavaScript v GTmetrix a Pingdom, Async plugin JavaScipt môže urobiť trik.

Optimalizujte videá YouTube – ak vaše stránky obsahujú videá, WP YouTube Lyte lenivo ich načíta, takže sa načítajú iba vtedy, keď používatelia prejdú nadol a kliknú na tlačidlo Prehrať, čím sa eliminujú počiatočné požiadavky na servery YouTube. Vďaka videu môže dôjsť k oholeniu niekoľkých sekúnd načítania obsahu, pretože sú jedným z najťažších prvkov na stránke. WP Rocket a Swift Performance majú túto funkciu zabudovanú do svojich nastavení, takže ich nepotrebujete, ak jeden z nich používate ako doplnok do vyrovnávacej pamäte.

7. Optimalizujte viac

Ak chcete svoju stránku ďalej optimalizovať, odporúčame nasledujúce nástroje:

WP Rocket – hodnotila doplnok vyrovnávacej pamäte č. 1 vo viacerých prieskumoch verejnej mienky na Facebooku a má mnoho možností, ktoré nie sú súčasťou programu Autoptimize (vyčistenie databázy, kontrola srdcového rytmu, hosťovanie služby Google Analytics lokálne, nahradenie prvku iframe YouTube obrázkom ukážky, pridanie vyrovnávacej pamäte prehliadača do služby Facebook Pixel atď.). WP Rocket tiež spracováva takmer všetko, čo robí Autoptimize, takže na všetky tieto optimalizácie rýchlosti potrebujete iba 1 doplnok. Preto je to také skvelé. Môžete tiež získať 10% zľavu tu.

ShortPixel – populárny doplnok na optimalizáciu obrázkov a ten, ktorý používam.

StackPath – CDN s 30+ dátovými centrami. Veľmi ľahké nastavenie; stačí sa zaregistrovať pre plán (10 dolárov mesačne) a potom skopírovať / prilepiť svoju adresu CDN do možnosti Automaticky aktualizovať adresu URL CDN.

SiteGround – zvyčajne hodnotili hostiteľa č. 1 v anketách na Facebooku a tiež používa Yoast.

Yoast-on-Twitter We-just-prešiel k Siteground

2019 Prieskum hostingu

2017-WordPress-hosting-FB-Poll

Odporúčania hostiteľa Elementor

Odporúčanie hostenia z júla 2019

WordPress-hostiteľ-Poll-Aug-2018

Shared-hosting-Poll-2017

2019-hosting-Poll

Go-To-hosting-Company

WordPress-hosting-Poll-2017

Podarilo-hosting-Poll

WooCommerce-hosting-FB-Poll

2016-Web-hosting-Hlasovanie

Best-WordPress-hosting-Provider-Poll

Najlepšie Web-hosting-2019-Poll

Anketa o priateľskom hostovaní WP

2016-WordPress-hosting-FB-Poll

Obľúbený hosting pre spoločnosť Elementor

2018 Odporúčania týkajúce sa hostenia

Podarilo-WordPress-hosting-Poll-2017

2019-Hostitelia-Poll-1

Hosting-Poll-For-Speed

WordPress-hosting-Poll-jún-1

SiteGround-odporúčania

2014-Managed-WordPress-hosting-FB-Poll

Najlepšie Web-hosting-Provider-Poll

Hosting-Poll-Feb-2019

Hosting-Odporúčania-Poll

Bluehost vs SiteGround

Anketa webhostingu WordPress

Ľudia zvyčajne migrujú, pretože ich technológia rýchlosti je oveľa rýchlejší ako EIG alebo GoDaddy:

Prepína sa na SiteGround

Migrácia času načítania stránky

Bluehost to SiteGround GTmetrix

HostGator To SiteGround

Štatistiky stránok Google PageSpeed

100 Perfektné skóre na webe

Genesis SiteGround

Rýchlosť dosiahnutá prostredníctvom služby SiteGround

Znížené časy načítania pomocou funkcie SiteGround

Nové časy odozvy SiteGround

HostGator na migráciu na lokalitu

SiteGround Response Times On Joomla

Prepnuté na hosting na webe

SiteGround Rocket Imagify Combo

Štatistiky SiteGround PageSpeed

SiteGround On Joomla

SiteGround Znížené časy načítania

SiteGround Speedy Hosting

Nový čas odozvy SiteGround

Vylepšenie času odozvy SiteGround

SiteGround tiež bezplatné migrácie s GrowBig+.

Cloudways – rýchlejšia ako služba SiteGround (jedná sa o cloudový hosting, nezdieľa sa) a bola v anketách Facebook tiež vysoko ohodnotená. Ich cena začína na $ 10 / mesiac Plán DigitalOcean. Ponúkajú 1 bezplatnú migráciu (na ktorú som ich prevzal) a tu je to, čo sa stalo s mojím časom odozvy servera:

SiteGround-vs-Cloudways-Cloud-hosting

Odporúčania týkajúce sa hostenia Facebook

VPS Cloud Hosting WooCommerce Anketa

VPS Cloud Hosting Anketa

Návrhy na hosťovanie WordPress

Časy odozvy cloudových služieb

WP Engine do cloudway

Untitled

Časy načítavania pingdomov v cloude

Cloudways-Facebook-Review

Za prvé 2 mesiace služby Cloudways môžete získať zľavu 25% pomocou propagačného kódu OMM25.

KINŠTA – Prémiový hosting vo výške 30 dolárov mesačne a aj keď som ich ešte neskúšal, nepočul som nič iné ako skvelé veci o rýchlosti, podpore, prestojoch a takmer všetko, čo sa týka ich hostenia..

Perfmatters – doplnok od spoločnosti Kinsta, ktorý sa stará o to, čo by som rád nazval „rôzne optimalizácie“, ako napríklad selektívne vypnutie doplnkov, obmedzenie následných revízií, zakázanie automatických ukladaní, lokálne hosťovanie služby Google Analytics a oveľa viac. Postará sa o posledných 10% rýchlosti.

Niektoré z nich odporúča program Autoptimize, iné nie:

Automatické dopĺňanie pridaných položiek

8. Zákal

Automatické nastavenie nemá nastavenia, ktoré by bolo možné pridať Oblačnosť CDN, ale dá sa ľahko nastaviť. A určite by ste mali, pretože to dodáva 200 ďalších centier do vašej siete na doručovanie obsahu (CDN).

Dátové centrá pre cloudflare

Krok 1. Zaregistrujte sa do služby Cloudflare a budete vyzvaní na pridanie svojich stránok a začatie skenovania.

CloudFlare-začne-scan

Krok 2. Po dokončení skenovania vyberte bezplatný plán a služba Cloudflare vás prevedie sadou stránok. Nakoniec sa dostanete na stránku, kde vám Cloudflare pridelí 2 nameservery.

CloudFlare-NAME Servery Dashboard

Krok 3. Prihláste sa do svojho registrátora domény (napr. Namecheap) a vyhľadajte v službe Google výraz „ako zmeniť menné servery v Namecheap“ (vyhľadajte iba registra domén) a potom postupujte podľa ich pokynov. Skopírujete 2 menné servery, ktoré poskytuje Cloudflare, a prilepíte ich do vlastnej voliteľnej menovej služby vo vašom registrátorovi domény. Na rozmnožovanie nechajte 72 hodín.

Mená serverov Godaddy Cloudflare

To je všetko!

Čo bude ďalej?

Pozrite si moje video – jedná sa o 42-minútové video, ale do veľkej miery pokrývam všetko (časové značky v popise videa) a vy by ste sa mali dozvedieť veľa skvelých informácií o rýchlosti stránok WordPress:

Chcete vedieť, ako som získal 100% skóre v GTmetrix?
Pozrite si môjho úplného sprievodcu optimalizáciou rýchlosti WordPress, ktorý obsahuje viac ako 38 tipov na opravu položiek GTmetrix / Pingdom vrátane upgradu na PHP 7, zobrazovanie zmenšených obrázkov, určovanie rozmerov obrázkov, čistenie databázy, lokálne hosťovanie služby Google Analytics, deaktiváciu WP a ďalšie..

často kladené otázky

&# X1f680; Potrebujem okrem automatického dopĺňania ďalšie pluginy pre rýchlosť?

Áno, zvyčajne chcete použiť doplnok na ukladanie do vyrovnávacej pamäte, optimalizáciu obrazu, vyčistenie databázy, kontrolu srdcového rytmu a selektívne vypnutie doplnkov. Odporúčam WP Rocket, ShortPixel a Perfmatters.

&# X1f680; Ako nastavíte CDN pomocou automatického optimalizovania?

Vyberte si svoje CDN (používam StackPath), skopírujte svoju CDN URL a vložte ju do poľa UR CDN UR od Autoptimize.

&# X1f680; Ako optimalizujete písma Google pomocou automatického optimalizovania?

Odporúčam použiť možnosť Kombinovať a prepojiť v hlave a vopred prepojiť písma pomocou automatického optimalizovania.

&# X1f680; Postará sa o automatické ukladanie do vyrovnávacej pamäte?

Nie, na ukladanie do vyrovnávacej pamäte budete musieť použiť samostatný doplnok. Ak používate program SiteGround, odporúčam WP Rocket alebo SG Optimizer.

&# X1f680; Ako nakonfigurujete nastavenia automatického dopĺňania?

Všetko je uvedené v tomto návode – sledujte prehľad GTmetrix a konkrétne položky, ktoré je potrebné opraviť. Ak konfigurácia nastavení v službe Autoptimize problém nevyrieši, zvážte použitie ďalších doplnkov na opravu položiek.

Otázky? Napíš mi!
Tomáš

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map