Share
Oferiți site-ului dvs. un impuls! Implementați tehnici esențiale de optimizare care vor îmbunătăți nu numai dvs. YSlow dar și rangul tău Google. În acest tutorial vom acoperi toate aspectele legate de cache-ul W3, ySlow, viteza paginii Google, regulile CSS sprites & htaccess, pentru a obține un scor ridicat ySlow cum am făcut pe blog-ul meu.
O notă rapidă înainte de a începe, deși acest tutorial va acoperi totul în detalii cât este necesar, vor exista (ori de câte ori este posibil) comenzi rapide, pentru a vă salva ceva timp.
Instalați un plugin Caching: În primul rând, indiferent de pluginul de cache pe care îl utilizați, opriți-l acum! Dacă nu este memoria cache W3 Total, cu atât vom lucra aici. (Ok, deci a venit un pic puternic, dar am folosit o mulțime de plug-inuri de caching și W3 este preferatul meu. Dacă folosiți altul din orice motiv, probabil că este bine - vom merge împreună cu W3 Recomandă totuși.) Conectați-vă la secțiunea "Adăugați noi" pluginuri în WordPress, căutați "W3 Total Cache" descărcați-o, instalați-o, dar nu o porniți ....
Instalați un plugin pentru Manager de baze de date: Apoi veți avea nevoie de un alt plugin numit "WP-DBmanager" din nou, căutați și instalați acest lucru, asigurându-vă că nu aveți instalate alte pluginuri baze de date.
Înainte de a începe și de a îmbunătăți site-ul dvs. vă permite să vedeți mai întâi ce se ocupă. Deschideți Google Chrome sau instalați-l dacă nu îl aveți deja. Odată ce ați instalat pluginul ySlow AIR odată instalat, veți vedea o nouă pictogramă în partea dreaptă sus a ecranului. Apasă-l. (Asigurați-vă că sunteți pe pagina de pornire a site-ului dvs.)
ySlow va verifica apoi site-ul dvs., vă spun ce este bun, ce este rău și totul între ele. Vrem să ne concentrăm mai întâi pe tot ceea ce este sub un grad B. Mai jos voi trece prin fiecare setare W3 de care aveți nevoie pentru a vă îmbunătăți timpul de încărcare a site-urilor dvs..
Odată ce W3 Total Cache este activată, veți vedea o nouă filă laterală denumită "Performance". Acum, evident, vom rula toate secțiunile diferite ale W3, dar pentru a vă salva ceva timp ați putea importa fișierul de setări W3, cuplat în "fișierele sursă" și săriți la pasul 2C.
Aici se află toate setările pentru W3. Să examinăm mai întâi "Setările generale", veți dori să bifați următoarele casete (pentru a activa):
Cache-ul pentru pagini (selectați "Disc: Enhanced" în meniul derulant) - Cache-urile vor reduce timpul de răspuns al site-ului dvs. și vor mări scara serverului dvs. web.
Minify (Selectați "Manual", lăsați celelalte setări) - Minificarea poate diminua dimensiunea fișierului HTML, CSS, JS și feed-uri cu aproximativ 10% în medie.
Nu bifați cache-ul bazei de date (vom mai sorta mai târziu printr-o metodă diferită)
Cache-ul de obiecte (selectați "Disk" din meniul derulant) - Cache-ul de obiecte crește foarte mult performanța pentru site-uri extrem de dinamice (care utilizează API-ul Cache-ului de tip Object).
Browser Cache - Activați compresia HTTP și adăugați antete pentru a reduce încărcarea serverului și a reduce timpul de încărcare a fișierului.
Lăsați CDN, Varnish & cloudflare neatins. (din nou pentru a face acest lucru încărcați rapid fișierul de setări inclus în "fișierele sursă", prin opțiunea din partea de jos a "Setări generale")
Faceți clic pe fila / Minify (Minificare) / link în partea de sus a panoului / paginii W3. În secțiunea "HTML & XML" asigurați-vă că sunt bifate primele trei casete. Apoi faceți clic pe butonul "Ajutor" din partea de sus.
După ce încărcați acest popup, vă veți confrunta cu o listă de fișiere javascript, urmată de foi de stiluri la care site-ul dvs. se leagă. În esență, vrem să încercăm și să bifăm totul, CU EXCEPȚIA:
Dosarele Jquery
Anunțurile Google (sau orice anunț care contează)
Orice fișiere stats.wordpress.js (veți avea aceste dacă aveți instalat jetpack
Cu toate acestea, pentru CSS puteți să le selectați cu siguranță în siguranță. Acum, aceasta nu este o știință exactă, deoarece aceasta minifică fișierele tematice (Nu vă faceți griji că nu este distructivă) și există multe tematici diferite, toate folosind o gamă largă de fișiere, plugin-uri și funcții diferite. Vizualizați-vă efectiv modificările înainte de a le trimite.
Minify este una dintre cele mai mari îmbunătățiri pe care le veți integra, odată ce ați selectat toate fișierele (și ați făcut același lucru cu fiecare temă, dacă utilizați mai multe), apoi faceți clic pe "Aplicați și închideți", urmat direct de "Salvați tot setări "(implementați-o dacă site-ul dvs. arată în continuare / funcționează la fel).
După ce vă aflați în fila "Browser Cache" (Cache Browser), va trebui să modificați durata de viață a antetului la 691200 secunde. Aceasta va crește imediat scorul ySlow.
Acum, mergeți înapoi la "Setări generale" și dați clic pe "gol toate cache-urile", apoi mergeți la pagina dvs. de pornire și executați din nou testul ySlow, ar trebui să vedeți o îmbunătățire plăcută.
Sub tab-ul bara laterală "Performanță" din backend-ul WordPress ar trebui să existe o altă filă cu numele "Baza de date" (dacă nu, atunci du-te înapoi și activați-o).
Acum, acest lucru este foarte simplu, trebuie sa faci trei lucruri, backup, reparare, optimizare.
Pentru a face backup faceți clic pe "Backup DB", apoi în partea de jos faceți clic pe "Backup" (Nu vă faceți griji despre gzipping).
Înainte de a vă repara baza de date (doar incase), mergeți la "Repair DB" în bara laterală. Faceți clic pe butonul "Reparare" din partea de jos.
În cele din urmă, optimizați-l. Faceți clic pe butonul "Optimize DB" bara laterală & yep ați ghicit-o, faceți clic pe butonul "Optimize" din partea de jos.
Pentru a evita ca acest proces să apară din nou în fila bara laterală "DB Opțiuni". În partea de jos va fi o secțiune "Programare automată". Asigurați-vă că backup-urile se fac în fiecare zi (nu puteți fi prea atenți), apoi setați-o pentru a optimiza spun la fiecare câteva zile și reparați o dată pe săptămână. Apoi salvați modificările.
Acum, în ySlow, probabil că ați observat în secțiunea "Efectuați mai puține solicitări HTTP" un șir de text care spune ceva de genul "Această pagină are 10 imagini de fundal externe. Încercați să le combinați cu spritele CSS. "
Imaginați-vă economiile în cazul în care toate aceste imagini mici ar putea fi doar o singură imagine ... Ar fi sigur că lucrurile vor urca. Pentru aceasta, vom folosi un instrument gratuit numit "Spriteme", astfel încât să mergeți pe site-ul AICI (faceți acest lucru într-o filă nouă, deși, asigurați-vă din nou site-ul dvs. este pe pagina de pornire).
După ce deschideți pagina dvs. de pornire într-o singură filă și deschideți spriteme într-un alt text trageți textul "SpriteMe" pe fila care are site-ul în el. O casetă va apărea în partea dreaptă sus a filei / ferestrei. Veți dori să faceți clic pe butonul "faceți sprite" care se află în caseta "Sugestii Sprites". Odată ce face acest lucru, descărcați imaginea pe care a creat-o și încărcați-o undeva pe site-ul dvs. (de preferință în cadrul temei pe care o utilizați). 
Acum, faceți clic pe butonul "export CSS" din partea dreaptă sus a ferestrei "SpriteMe", copiați și inserați codul css pe care vi l-ați dat (chiar pe toate) exact în partea de jos a temelor "style.css" acesta va fi folosit în locul codului implicit (deoarece nu vrem să suprascriem codul temei implicit). Va trebui să vă asigurați că a doua imagine "background-image: url" este schimbată de la "http://www.jaredhirsch.com" la locul în care ați salvat imaginea sprite de la mai devreme.
Odată ce ați făcut acest lucru, vă rugăm să reintroduceți "goliți toate cache-urile" din fila "Performance" din bara laterală.
În cea mai mare parte eu personal folosesc întotdeauna Photoshop pentru a comprima imaginile mele înainte de a încărca, dar pentru mulți dintre voi aceasta nu este o opțiune deoarece nu aveți Photoshop. Deci, aici vă voi ajuta în modul de a reduce dimensiunea fișierului imaginilor dvs..
În primul rând, veți dori să vă asigurați că imaginile tematice sunt optimizate și puteți face acest lucru cumpărați să le prindem pe toți și să le omorâți în această aplicație fantastică numită "ImageOptim"
Odată ce imaginile tematice sunt frumoase și comprimate, vă recomandăm să vă uitați la plugin-uri cum ar fi "Smush.it" pentru Wordpress, care va optimiza imaginile pe care le puteți utiliza în mesaje și altele.
Aceasta este, desigur, o tehnică crucială de optimizare. Pentru a activa compresia PHP GZIP, editați php.ini (locații exemplu, cum ar fi în / etc / sau / usr / local / lib) cu orice editor de text, cum ar fi vi și localizați următoarea directivă:
zlib.output_compression
Valoarea implicită este Dezactivată, modificați setarea la Activat pentru a face ca linia să pară mai jos:
zlib.output_compression = Activat
Reporniți serverul HTTPD Apache după modificare. Toate paginile web produse de PHP vor fi acum comprimate înainte de a trimite prin Internet browser-ul web pentru a decoda.
De asemenea, PHP are o directivă care poate fi folosită pentru a ajusta nivelul de compresie. Pentru a seta nivelul de compresie, utilizați următoarea linie în php.ini, cu valori valide între 1 și 9, unde 1 este cel mai mic comprimat și 9 este cel mai mare comprimat. Nivelul implicit de comprimare este 6, ceea ce oferă cea mai bună comprimare fără degradarea performanței serverului.
zlib.output_compression_level = 6
Anterior, compresia PHP este realizată prin introducerea cod la începutul fiecărui script PHP. Metoda nu este recomandată deoarece fiecare script trebuie schimbat. zlib care permite în php.ini se va aplica tuturor script-urilor PHP de pe serverul web fără excludere.
Dacă este imposibil să modificați fișierul php.ini sau nu aveți control asupra php.ini în special pe o partajare de găzduire, compresia PHP GZIP poate fi de asemenea instalată prin intermediul fișierului .htaccess, localizat în mod obișnuit pe rădăcina site-ului web. Pentru a permite compresia PHP GZIP prin Zlib, trebuie doar să adăugați următoarea linie în fișierul .htaccess. Rețineți că fiecare site web trebuie modificat individual.
php_flag zlib.output_compression pe
Dezavantajul de a permite compresia GZIP prin PHP este că doar paginile web generate de script-urile PHP vor fi comprimate prin codificarea GZIP. Toate fișierele externe CSS sau JavaScript nu vor fi comprimate. Pentru capacitatea de a activa compresia GZIP pe toate tipurile de fișiere, utilizează mod_deflate sau mod_gzip pe serverul web HTTPD.
Verificați și verificați dacă compresia GZIP rulează corect
Pe măsură ce vinăm spre sfârșitul acestui tutorial, vreau doar să trec prin ultimele lucruri. Acum că imaginile dvs. au fost zdrobite și sprite au fost făcute, puteți dori să ștergeți atât memoria cache a browserului, cât și "golirea tuturor cache-urilor" din fila bara laterală "Performanță".
Acum să mergem înapoi, să ieșiți din WordPress încărcați pagina de pornire a site-urilor dvs. și să faceți un test ySlow. Din nou ar trebui să fi crescut, în secțiunea CDN a ySlow aveți opțiunea de a "adăuga ca CDN" pe unele componente. A face acest lucru va crește gradul dvs. chiar mai departe.
Dacă doriți să adăugați în mod corespunzător un CDN dedicat, vă sugerăm să urmați acest TUTORIAL.
Acum, degetele încrucișate ar trebui să vă uitați la un scor A de test și dacă comparați acest lucru cu propriul test de testare a vitezei paginii Google, veți vedea un scor foarte sănătos.
O secțiune a ySlow pe care nu am acoperit-o este "domeniul fără cookie", care este momentul în care browserul face o solicitare pentru o imagine statică și trimite cookie-uri împreună cu cererea, serverul nu are nicio utilizare pentru aceste cookie-uri. Deci, ei nu creează decât trafic de rețea pentru niciun motiv bun. Ar trebui să vă asigurați că componentele statice sunt solicitate cu cereri fără cookie. Creați un subdomeniu și găzduiți toate componentele dvs. statice acolo.
Dacă domeniul dvs. este www.example.org, puteți găzdui componentele statice onstatic.example.org. Cu toate acestea, dacă ați setat deja module cookie pe exemplarul.org de nivel superior, spre deosebire de www.example.org, atunci toate solicitările către static.example.org vor include acele module cookie. În acest caz, puteți cumpăra un domeniu complet nou, găzduiți componentele statice acolo și păstrați acest domeniu fără cookie. Yahoo! folosește yimg.com, YouTube folosește ytimg.com, Amazon utilizează imagini-amazon.com și așa mai departe.
Un alt beneficiu al găzduirii componentelor statice pe un domeniu fără cookie-uri este acela că unii proxy-i pot refuza să cacheze componentele care sunt solicitate cu cookie-urile. Pe o notă asociată, dacă vă întrebați dacă ar trebui să utilizați example.org sau www.example.org pentru pagina dvs. de pornire, luați în considerare impactul cookie-urilor. Omiterea www nu vă lasă de ales decât să scrieți cookie-uri în * .example.org, deci din motive de performanță este mai bine să utilizați subdomeniul www și să scrieți cookie-urile către acel subdomeniu.
Nu voi intra în asta, dar cele de mai sus ar trebui să vă dea o idee corectă. Voi trece în detaliu într-un tutorial ulterior. Acest lucru îmbunătățește scorul dar nu este absolut esențial.
Aceștia sunt pașii pe care îi iau atunci când construiesc site-uri web și au o mare importanță atunci când vine vorba de îmbunătățirea vitezei și de timpul de răspuns rapid. Pentru cei care au nevoie de mai multe informații sau care ar dori un ajutor pentru îndeplinirea procedurilor, vă rugăm să comentați mai jos sau să-mi trimiteți un mesaj prin intermediul profilului meu de autor.
Accentsconagua