Wordpress

Nola konfiguratu Autoptimize zure WordPress gunerako

Autoptimize WordPress optimizatzeko doako plugina da. HTML, CSS eta JavaScript optimizazioaz gain, Autoptimizek WordPress gune modernoen beste alderdi batzuetara zuzendutako optimizazio funtzioak ere biltzen ditu.

Argitalpen honetan, Autoptimize plugin-en ezarpen onenak partekatuko ditugu zure WordPress gunearen errendimendua eta orriaren abiadura hobetzeko.

Zergatik automatizatu?

Autoptimize ezarpen onenetan murgildu baino lehen, ikus ditzagun azkar Autoptimize optimizazio-plugin bikaina den hiru arrazoi.

  1. Autoptimize-ren doako bertsioak zure WordPress gunea optimizatzeko funtzio multzo osoa du.
  2. Autoptimize zorrozki optimizazio-plugin bat da eta ez du HTML orrialdeen cachea egiten. Horrek esan nahi du web ostalari guztiekin bateragarria dela, baita orrialdeen cachearen konfigurazio pertsonalizatuekin ere Behmaster.
  3. Autoptimize-k milioi bat instalazio aktibo baino gehiago ditu WordPress biltegian eta etengabe eguneratzen da funtzio berriekin eta akatsen konponketekin.

Automatizatu JS, CSS eta HTML ezarpenak

HTML, CSS eta JavaScript da Autoptimize-ren ogia. Beste optimizazio-plugin batzuekin gertatzen den bezala, Autoptimize-ren funtzio multzo eta ezarpen zabalean sakontzea lan izugarria izan daiteke. Gauzak errazteko, zure gunearen errendimendua hobetzeko Autoptimize ezarpen onenak bildu ditugu.

JavaScript aukerak

JavaScript optimizazioa Autoptimize-n.
JavaScript optimizazioa Autoptimize-n.

Optimizatu JavaScript kodea

Aukera hau gaitzea gomendatzen dugu. "Optimizatu JavaScript kodea" gaituta dagoenean, Autoptimize-k zure JavaScript fitxategiak txikituko ditu.

JS fitxategiak gehitu

Autoptimize-ren "JS fitxategiak agregatu" aukerak zure JavaScript fitxategi guztiak fitxategi bakarrean konbinatuko ditu. Iraganean, JS eta CSS fitxategiak konbinatzea funtsezko urratsa zen WordPress optimizatzeko. At Behmaster, deskarga paraleloak eta multiplexazioa onartzen duten HTTP/2 zerbitzari modernoak erabiltzen ditugu; horrek esan nahi du fitxategiak konbinatzea ez dela lehen bezain garrantzitsua, HTTP/2-k hainbat fitxategi aldi berean deskargatzeko aukera ematen duelako. Hori esanda, CSS eta JS fitxategiak batuz gero, WordPress-eko gune mota batzuetarako abiadura-berobia eragingo da, beraz, zure orriaren abiadura probatzea gomendatzen dugu aukera hau gaituta eta desgaituta.

Era berean, Agregate Inline JS

"Barneko JS ere agregatu" aukerak lerroko JS ateratzen du zure HTMLn, eta Autoptimize-ren JS fitxategi optimizatuarekin konbinatzen du. Aukera honek Autoptimize-ren cachearen tamaina azkar handitzea eragin dezakeenez, aukera hau desgaituta mantentzea gomendatzen dugu gaitzeko arrazoi zehatzik ez baduzu.

Behartu JavaScript sartu

Kasu gehienetan, ez dugu gomendatzen JavaScript fitxategiak zure guneko HTMLan kargatzera behartzea elementua. JS goiz kargatzera behartzeak zure orriaren abiadura moteldu dezaketen errendatzeko blokeo-elementuak sor ditzake. Hemen kargatu behar diren JavaScript fitxategiak badituzu elementua, script horiek Autoptimizetik kanpo uztea gomendatzen dugu.

Baztertu scriptak Autoptimize-tik

Aukera honek direktorio eta JavaScript fitxategi zehatzak agregaziotik baztertzeko aukera ematen du. Lehenespenez, Autoptimize-k honako script hauek baztertzen ditu.

  • wp-includes/js/dist/
  • wp-includes/js/tinymce/
  • js/jquery/jquery.js

Kontuan izan baztertu beharreko script bat gehitzeak agregazioari soilik eragiten diola lehenespenez. Baztertutako JavaScript fitxategiak txikitu egingo dira, "Hainbat aukerak" atalean "Miniatu baztertutako CSS eta JS fitxategiak" markatuta ez badago.

Gehitu Try-Catch Wrapping

"Gehitu try-catch wrapping" aukera gaituz gero, zure JavaScript kodea try-catch blokeetan bilduko da. Aukera hau erabilgarria da JS minifikazioak eta agregazioak eragindako arazoak arazketarako. Zure webguneak "gehitu try-catch wrapping" gaituta soilik funtzionatzen badu, garatzaile batekin lan egitea gomendatzen dugu zure JavaScript fitxategiak aztertzeko arazoa eragiten duena identifikatzeko, try-catch blokeak gehiegi erabiltzeak JS errendimendua murriztu dezakeelako.

Autoptimize: behar zenik ez zenekien WordPress optimizatzeko doako plugina... baina horrek zure webgunea azkar egingo du ⚡️Gida honek zergatik behar duzun zehatz-mehatz azaltzen du 🚀Tweet klik

CSS aukerak

Automatizatu CSS optimizazioa.
Automatizatu CSS optimizazioa.

Optimizatu CSS kodea

Aukera hau gaitzea gomendatzen dugu. "optimizatu CSS kodea" gaituta dagoenean, Autoptimize-k zure CSS fitxategiak txikituko ditu.

CSS fitxategiak agregatu

Autoptimize-ren "CSS fitxategiak agregatu" aukerak zure CSS fitxategi guztiak fitxategi bakarrean konbinatuko ditu. Lehen aipatu dugun bezala, baliteke eginbide honek HTTP/2 onartzen duten guneei ez onuragarria izan. A/B aukera hau zure webgunean probatzea gomendatzen dugu orriaren abiaduran eragin positiborik dagoen zehazteko.

Era berean, gehitu CSS linean

Aukera honek lerroko CSS Autoptimize-ren CSS fitxategira eramango du. Sareko CSS arakatzailean cachean dagoen CSS fitxategi batera mugitzeak orriaren tamaina murriztu dezakeen arren, aukera hau desgaituta uztea gomendatzen dugu kasu gehienetan.

Sortu datuak: Irudietarako URIak

Aukera hau gaituta dagoenean, Autoptimize-k atzeko planoko irudi txikiak 64 oinarrian kodetuko ditu eta CSS-n txertatuko ditu. Aukera hau probatzea gomendatzen dugu orriaren abiaduran duen eragina neurtzeko. Irudiak base64 formatuan kodetzeak HTTP eskaera-kopurua murrizten duen arren, base64 irudikapen-fitxategiak normalean bere pareko bitarrak baino % 20-30 handiagoak dira.

Inline eta Defer CSS

CSS kritikoa barneratzeak gune batzuen abiadura handitu dezake. Hemen ideia lerroko estiloak dira, "tolesturaren gainean" dauden elementuetarako beharrezkoak direnak. Praktikan, lineako CSSak elementu estrukturalak, letra-tipo eta tamaina globalak eta nabigazio-estiloa bezalako elementuak bideratzen ditu.

Elementu gako hauek barneratuta, CSS fitxategi osoa handiagoa geroago kargatu daiteke orriaren itxuran eragin gabe. Estilo kritikoak eskuz ateratzea posible den arren, estiloak sortzeko moduko tresna bat erabiltzea gomendatzen dugu abiapuntu gisa.

Sortu CSS kritikoa.
Sortu CSS kritikoa.

CSS kritikoa sortu ondoren, kopiatu eta itsatsi Autoptimize ezarpenetan.

Sartu eta atzeratu CSS Autoptimize-n.
Sartu eta atzeratu CSS Autoptimize-n.

Hurrengo urratsa zure webgunearen frontend esperientzia probatzea da. Estilorik gabeko edukiaren (FOUC) distira bitxi batzuk nabaritzen badituzu, ziurrenik estilorik gabeko elementu horiek identifikatu beharko dituzu eta dagozkion estiloak gehitu Autoptimize-n barneratzeko.

Autoptimize-k zure WordPress orrietarako CSS kritikoa automatikoki sortzen duen "potentzia" eskaintzen du. Gure esperientziaren arabera, eginbide honek noizean behin zure webgunea moteldu dezake kanpoko API deiak erabiltzen dituelako CSS kritikoa sortzeko. Beraz, hasierako CSS kritikoaren sorrera kanpoko zerbitzari baten erantzunaren menpe dago. Kasu gehienetan, kanpoko API deirik behar ez duen aipatutako metodoa irtenbide garbiagoa da.

Sartu CSS guztiak

Gune gehienetarako, ez dugu gomendatzen CSS guztiak sartzea, orrialdearen tamaina izugarri handitu baitaiteke. Gainera, CSS guztiak barneratzeak ezinezko egiten du web-arakatzaileak CSS cachean gordetzea.

Baztertu CSS Autoptimize-tik

Lehenespenez, Autoptimize-k honako direktorio eta CSS fitxategi hauek baztertzen ditu agregaziotik. Autoptimize zure CSS fitxategiren bat gehitzea eragotzi nahi baduzu, zerrenda honetara gehi ditzakezu. JavaScript baztertzearen antzera, eginbide honen portaera lehenetsiak ez du CSS fitxategiak txikitzea eragozten, agregatuta soilik.

  • wp-content/cache/
  • wp-content/loads/
  • admin-bar.min.css
  • dashicons.min.css

HTML aukerak

Autoptimize-ren HTML optimizazioak zure orrien tamaina murrizten lagun dezake zuriuneak kenduz.

HTML optimizazioa Autoptimize-n.
HTML optimizazioa Autoptimize-n.

Optimizatu HTML kodea

"optimizatu HTML" kodea gaitzea gomendatzen dugu, orriaren tamaina murrizten duelako zure HTMLan beharrezkoa ez diren zuriuneak kenduz. Eginbide hau gune gehienekin bateragarria den arren, zuriuneak kentzeak akatsak sor ditzake gune batzuetan. Beraz, HTML kodearen optimizazioa ondo probatzea gomendatzen dugu ekoizpen-ingurunean erabili aurretik.

Mantendu HTML iruzkinak

Gaitu eginbide hau zure orrialde optimizatuetarako HTML iruzkinak gorde nahi badituzu.

CDN aukerak

bezalako CDN bat erabiltzen ari bazara BehmasterCDN aktibo estatikoak bizkortzeko, CDN URLa gehitu beharko duzu Autoptimize-ra. Cloudflare bezalako CDN gaitasunak dituen proxy zerbitzu bat erabiltzen ari bazara, ez duzu ezer konfiguratu behar Autoptimize-ren CDN aukeretan.

Konfiguratu CDN ezarpenak Autoptimize-n.
Konfiguratu CDN ezarpenak Autoptimize-n.

Cache informazioa

Autoptimize-ren "cachearen informazioa"-k informazio garrantzitsua bistaratzen du, hala nola, cache-karpetaren kokapena eta baimenak, baita cacheko estiloen eta scripten guztizko tamaina ere. "Ez" ikusten baduzu "Idatzi al dezakegu?" ondoan, zure ostalariarekin lan egin beharko duzu karpeta-baimenak konpontzeko.

Automatizatu cachearen informazioa.
Automatizatu cachearen informazioa.

Hainbat aukera

Autoptimize-k hainbat optimizazio-ezarpen ditu. Arazoak badituzu CSS eta JS fitxategi optimizatuak zure webgunean kargatzeko, baliteke beheko ezarpen batzuk berriro konfiguratu behar izatea.

Askotariko optimizazioak Autoptimize-n.
Askotariko optimizazioak Autoptimize-n.

Gorde Agregatutako Scripts/CSS Fitxategi Estatiko gisa

Aukera hau gaitzea gomendatzen dugu fitxategi agregatuak fitxategi estatiko gisa gordetzeko lokalean. Baliteke hori desgaitu behar izatea zure zerbitzaria fitxategien konpresioa eta iraungipena kudeatzeko konfiguratuta ez badago.

Murriztu baztertutako CSS eta JS fitxategiak

Aukera hau gaitzea gomendatzen dugu CSS eta JS fitxategi guztiak txikituta daudela ziurtatzeko. Hala ere, baztertutako CSS eta JS fitxategi batzuekin minifikazioarekin lotutako arazo batzuk ikusten badituzu, aurrera egin dezakezu aukera hau desgaitu.

Optimizatu saioa hasita dauden editore/administratzaileentzat ere

Hau gaitzea gomendatzen dugu saioa hasitako editore eta administratzaileentzako aktiboak optimizatuta daudela ziurtatzeko. Hau garrantzitsua da saioa hasitako erabiltzaile gisa Autoptimize ezarpenak probatzen ari bazara.

Zure merkataritza elektronikoko webgune berrirako ostatu goren, azkar eta seguru bat behar duzu? Behmaster zerbitzari azkar izugarriak eta WooCommerce adituen mundu mailako laguntza 24/7 eskaintzen ditu. Begiratu gure planak

Irudien optimizazioa Autoptimize-n

Autoptimize-k ShortPixel-ekin integrazio integratua dauka irudiak optimizatzeko. Irudiaren kalitatearen ezarpenaz gain, Autoptimize-ren integrazioak zure irudien WEBP bertsioak sortzeko eta hornitzeko aukera ematen du.

for Behmaster erabiltzaileek, ez dugu gomendatzen Autoptimize-n irudia optimizatzeko funtzioa erabiltzea. Horren ordez, ShortPixel edo Imagify-ren ezaugarri osoko pluginak zuzenean erabiltzea gomendatzen dugu. Plugin osoarekin, optimizazio-ezarpenen gaineko kontrol zehatzagoa izango duzu, irudiak berridaztea barne. etiketa, WEBP laguntza aktibatzeko beharrezkoa dena Behmaster.

Kargatu alferrak irudiak Autoptimize-rekin.
Kargatu alferrak irudiak Autoptimize-rekin.

Autoptimize-k irudiak kargatzeko funtzionaltasuna ere badu. Funtzio hau gaitzea gomendatzen dugu irudi askoko orrialdeetarako orrialdeen abiadura hobetzeko. Lazy-loading gaituta dagoenean, Autoptimize-k aukera ematen dizu zenbait irudi-klase eta fitxategi-izen alfer kargatzetik baztertzeko.

Bazterketa-ezarpena erabilgarria da logoak, ikono sozialak eta alferrak kargatu behar ez diren beste irudi garrantzitsu batzuentzat. Lazy-loading-en gaineko kontrol handiagoa eskaintzen duen irtenbide baten bila bazabiltza, begiratu gure gida WordPress-en alferrak kargatzeko irudiak eta bideoak.

Optimizazio gehigarriak Autoptimize-n

Optimizazio gehigarriak Autoptimize-n.
Optimizazio gehigarriak Autoptimize-n.

Google Fonts

Autoptimize-k hainbat aukera ditu Google Fonts optimizatzeko. Zuretzako aukerarik onena zure webguneak Google Fonts erabiltzen duenaren araberakoa izango da.

  • Utzi dagoen bezala.
  • Kendu Google Fonts.
  • Konbinatu eta lotu buruan.
  • Konbinatu eta aurrekargatu buruan.
  • Konbinatu eta kargatu letra tipoak modu asinkronoan webfont.js-ekin.

Ez dugu gomendatzen "utzi bere horretan" aukera erabiltzea, ez baitu abiadura onurarik eskaintzen.

Google Fonts ez bada zure gunean misio kritikoa den baldintza, horiek kentzeak eta sistemaren letra-tipo pila erabiltzeak eragin positiboa izan dezake orriaren abiaduran.

Google Fonts zure webgunean mantendu nahi baduzu, azken hiru aukerak probatzea gomendatzen dizugu zure gunerako zein funtzionatzen duen jakiteko.

Kendu emojiak

Autoptimize aukera honek WordPress core emojiekin erlazionatutako CSS eta JavaScript kentzen ditu. Aukera hau gaitzea gomendatzen dugu, zure orriaren tamaina murrizten lagun dezakeelako. Gainera, sistema eragile nagusi gehienek emojiak barne hartzen dituzten letra-pilak dituzte. Noski, badaude beste modu batzuk ere zure WordPress gunean emojiak desgaitzeko.

Kendu kontsulta-kateak baliabide estatikoetatik

Baliabide estatikoetatik kontsulta-kateak (adibidez, ?ver=) kendu nahi badituzu, aukera hau gaitu dezakezu. Kontsulta-kateak kentzeak ez du eraginik izango karga-denboran, baina baliteke zure webgunearen puntuazioa hobetzen laguntzea GTmetrix, Google Pagespeed eta errendimendu-probaren beste zerbitzu batzuetan.

Aurrez konektatu hirugarrenen domeinuetara

Aurre-konexioaren zuzentarauari esker, arakatzailea zehaztutako domeinuetara konekta daiteke DNS bilaketak eta SSL esku-harremanen negoziazioak prozesatzeko HTTP eskaera osoa bidali aurretik.

Adibidez, zure webguneak hornitzen den logotipoaren irudia badu https://site.behmaster.cdn.com/logo.png, Autoptimizeri agindu diezaiokezu aurrekonexioaren zuzentarau bat gehitzeko hasierako DNS eta SSL konexioak kudeatzeko. elementua HTTP eskaera egin baino lehen zure HTML elementua.

Zure arakatzailearen garatzaile-tresnak edo ikuskatzailea erabil ditzakezu aurrez konektatzeko kanpoko domeinu garrantzitsuak aurkitzeko. Beheko adibideko orrian, honako domeinu hauetarako kanpoko eskaerak daude.

  • https://cdn.brianli.com
  • https://www.google-analytics.com
  • https://www.googletagmanager.com

Hiru domeinu hauek Autoptimize-ren aurrekonexioen zerrendara gehi daitezke.

Bilatu kanpoko aktiboak garatzaileen tresnekin.
Bilatu kanpoko aktiboak garatzaileen tresnekin.

Errendimendu-arrazoiengatik, Autoptimize-ren aurrekonexioen zerrendan sei domeinu baino gehiago gehitzea gomendatzen dugu, domeinu gehiegitarako aurrekonexioaren zuzentarauak zehazteak errendimenduaren arrakasta izan dezakeelako.

Aurrez kargatu eskaera zehatzak

Aurrekargatu zuzentarauek zure web-arakatzaileari aktibo bat deskargatzeko agintzen diote ahalik eta lasterren. Zuzentarau hau erabilgarria da orrialdea kargatzeko prozesuan behar diren aktiboak deskargatzeko. Praktikan, aurrez kargatzea erabiltzen da letra-tipo pertsonalizatuen karga-denborak bizkortzeko, orriaren CSSan eskatu aurretik kargatuz.

Garatzaile batekin kontsultatzea gomendatzen dugu zure WordPress gunean aldez aurretik kargatu behar diren aktiboei buruz. Errendimenduarekin lotutako beste hainbat doikuntzarekin gertatzen den bezala, aktibo gehiegi aldez aurretik kargatzeak zure gunea motelago kargatu dezake.

JavaScript fitxategi asinkronizatuak

Autoptimize-ren "JavaScript fitxategi asinkronizatuak" funtzioari esker, kanpoko JavaScript fitxategi jakin batzuk zehaztu ditzakezu modu asinkronoan kargatzeko. async HTML bandera. JS fitxategiak modu asinkronoan kargatzeak orrialdearen abiadura hobe dezakeen arren, proba egokiak egitea gomendatzen dugu gunearen funtzionalitaterik ez duela kaltetuta ziurtatzeko.

Dagoeneko Autoptimize erabiltzen ari ez bazara, gida hau irakurri ondoren WordPress optimizazio-plugin hau zure webgunean gehitu nahi duzu ASAP.Tweet klik

Laburpena

Bere ezarpenak nola moldatu badakizu, Autoptimize plugina aukera ona da gunearen errendimendua areagotu nahi duten WordPress erabiltzaileentzat.

HTML eta CSS optimizazioa bezalako oinarrizko funtzioekin eta aurreratuagoekin, hala nola CDN integrazioa eta aurrekonektatzeko eta aurrekargatzeko zuzentarauak zehazteko gaitasuna, Autoptimize-k zure WordPress gunearen frontend-aren errendimendua optimizatzeko behar duzun guztia dauka.

WordPress-en optimizazioari buruz eta zure gunearen backend-a nola optimizatu jakiteko interesa baduzu, ziurtatu gure WordPress-en errendimendu-gida osoa kontsultatzea.

Gaiarekin lotutako artikuluak

0 Comments
Lineako erantzunak
Ikusi iruzkin guztiak
Itzuli gora botoia