Share
Știm cu toții că există nenumărate motive pentru care timpul de încărcare a paginii web crește, însă identificarea problemei poate fi costisitoare atât în timp, cât și în bani. Deci, de ce pierdeți efortul atunci când altcineva - sau altceva - poate să facă toată munca murdară pentru dvs.?
Întâlni Yahoo YSlow, un analizator de pagini web gratuit pentru Firefox.
YSlow are două cerințe:
YSlow se retrage pe Firebug, deci va trebui să instalați add-on-urile în ordinea enumerată mai sus înainte de a continua.
Designerii web, dezvoltatorii și copywriterii se străduiesc să aibă un conținut cel mai unic și mai interesant în comparație cu concurenții lor.
S-ar putea să fi petrecut zile pentru a vă perfecționa postarea de blog și aproape că ați căzut din scaun cu entuziasm atunci când l-ați vizionat pentru prima dată. Dar, după ce un torrent de vizitatori inundă site-ul dvs., observați că lucrurile nu mai funcționează bine. Sub presiune, noul dvs. site ar putea răspunde ca un Commadore 64.
Instrumentele de analiză a site-urilor apar în general în două categorii:
YSlow se potrivește în cel de-al doilea. Utilizează seturi de reguli predefinite pentru a evalua performanța unei pagini Web și a unor instrumente de la terțe părți (cum ar fi Smush.it și minifierele JS) pentru a ajuta la rezolvarea oricăror probleme.
Există trei vizualizări:
YSlow include șase instrumente utile: acestea variază de la testarea codului JavaScript la optimizarea imaginii prin Smush.It (o altă aplicație web gratuită de la Yahoo). Întreaga aplicație este înfășurată în fereastra pop-up Firebug, care poate fi deschisă și închisă cu o pictogramă la îndemână din bara de activități a browserului.
Să mergem imediat cu o privire mai atentă la vederea "Grad".
Folosind pagina de pornire a Envato ca exemplu, care este un site de trafic relativ scăzut, vedem că scorul general de performanță este evaluat la 74 din 100, cu un grad "C" galben. Dar ce înseamnă cu adevărat acest lucru? La urma urmei, pagina web se descarcă perfect în browser. Trebuie să aruncăm o privire mai atentă la regulile din stânga punctului de vedere, pentru a ne da seama.
Regulile sunt împărțite în categorii: conținut, cookie-uri, CSS, imagini, JavaScript și server. Pe măsură ce YSlow a inspectat elementele DOM, ea a clasat fiecare pe un set predefinit de reguli (în acest caz YSlow V2). Cu cât un element este mai aproape de reguli, cu atât este mai mare. După ce au fost colectate toate scorurile, a fost acordat clasa finală.
În cazul Envato, toate regulile interfeței cu utilizatorul au fost foarte bune, dar regulile serverului au fost mai puțin eficiente. Acest lucru a redus gradul final.
Din fericire, fiecare regulă explică unde se află problema și oferă o explicație detaliată cu privire la rezolvarea problemei. Această caracteristică va oferi o ușurare uriașă oricui nou pentru a optimiza site-urile web.
Pentru unii, anumite reguli sunt mai importante decât altele. YSlow vă oferă un set de reguli prestabilit, dar, de asemenea, vă permite să treceți la "clasic", "mic site sau blog" sau creați-vă propriul. Dacă nu vă interesează utilizarea Rețelelor de difuzare a conținutului, pur și simplu editați un set de reguli și eliminați acea funcție. Chiar nu ar putea fi mai ușor.
Vizualizarea componentelor listează elementele dintr-o analiză într-un tabel de date curate și extinse.
În timp ce această secțiune oferă o analiză mai aprofundată, datele cum ar fi data de expirare a fișierului sau timpul de răspuns, pot fi utile pentru a înțelege zonele problematice. Dacă aveți activată compresia GZIP, puteți vedea aici diferența de dimensiune a fișierului.
Toată lumea iubește un grafic. YSlow face și el.
Pagina cu statistici este o modalitate rapidă și simplă de a înțelege greutatea totală a cererilor HTTP. Puneți pur și simplu, există două grafice: memoria cache goală și memoria cache primate. Aceste grafice încalcă site-ul web în HTML, JavaScript, imagini și așa mai departe. Dimensiunile fiecărui fișier sunt apoi afișate ca segmente de plăcintă. Empty Cache reprezintă prima vizită a browserului la pagina web. Prime Cache indică ce componente ar fi sau nu ar fi în memoria cache a browserului atunci când revizuiți. Curățată, clară și eficientă.
În cele din urmă, avem instrumente. Imediat, veți observa o lipsă de specificitate față de pagina web analizată, dar nu vă lăsați păcăliți. Fiecare instrument este un economizor de timp puternic atunci când vine vorba de micșorarea, micificarea și comprimarea conținutului. Dacă sunteți familiarizat cu conceptul de optimizare, atunci este posibil să fi întâlnit instrumente similare înainte.
Când reduceți timpul de încărcare a paginilor, este important să eliminați spațiul alb și comentariile din documente și să optimizați imaginile.
Din fericire, aceste unelte îndeplinesc toată munca grea pentru dvs., pentru că făcând acest lucru cu mâna vă va duce, fără îndoială, adânc în noapte. Nici o cantitate de băuturi energizante nu vă va împiedica să mergeți la nebunie după ce ștergeți o funcție JavaScript din întâmplare pentru a cincea oară.
Există în total opt instrumente; acoperind toate acestea ar lua câteva articole. Deci, mă voi concentra pe Yahoo! Smush.it ca exemplu.
Yahoo! Smush.it este o aplicație web mică, care poate fi folosită cu YSlow sau direct de pe browserul dvs..
Destul de simplu, Smush.it este un optimizator de imagine fără pierderi. YSlow încarcă imaginile pentru dvs., care sunt "smushed" și prezentate într-un tabel în care puteți vizualiza noul procent de economii de imagini, dimensiuni și compresie.
Puteți chiar să păstrați fișierele în aceeași structură de directoare și să le descărcați pe toate ca un fișier zip la îndemână.
Există o mulțime de aplicații gratuite cu instrumente similare, dar cele ambalate cu YSlow sunt o completare binevenită.
După cum am menționat mai devreme, scorul de performanță al lui Envato YSlow este de 74 cu un grad de C. Să luăm ceva timp pentru a analiza rezultatele YSlow și ce s-ar putea face pentru a îmbunătăți scorul final.
Iată îmbunătățirile propuse, începând de la început:
Această regulă continuă să detalieze faptul că există șase scripturi JavaScript externe și 17 imagini de fundal externe. Sugestia lor este să combine fișierele și să utilizeze sprite de CSS pentru a rezolva problema.
Primul lucru pe care trebuie să-l faceți este să aruncați o privire la Vizualizarea componentelor și, în special, la fișierele JS.
După cum arată adresele URL, numai un singur fișier JavaScript este găzduit pe același server ca și pagina analizată, acesta conține JavaScript personalizat pentru WordPress. Două sunt necesare pentru JQuery, iar Google Analytics, iar ultimele trei sunt de la formspring.com.
Dacă fișierele JavaScript ar fi propriile mele, aș putea lua în considerare combinarea fișierelor custom applications.js și formspring JS într-una și găzduirea lor la nivel local. Cu toate acestea, numai fișierul application.js pare să fie personalizat. Deci, chiar nu vreau să mă joc cu munca altcuiva. Mai ales că unele dintre aceste fișiere nu conțin informații privind licența / drepturile de autor.
Utilizarea găzduirii Google pentru jQuery este, de asemenea, considerată a fi o practică bună, dar ar trebui să se actualizeze la cea mai recentă versiune a jQuery: 1.4.2.
Deci, în acest caz, este probabil cel mai bine să ignorați această regulă, deoarece orice modificare a metodelor curente ar putea duce la apariția unor probleme în continuare. Singura mea preocupare reală este timpul de răspuns pentru două dintre fișierele FormStack, în acest moment fiecare vorbește peste 360 ms pentru a răspunde. Dacă aceasta continuă, ar fi bine să găsiți o metodă pentru a le găzdui pe plan local.
Apoi examinăm imaginile; toate sunt găzduite la nivel local, răspund în termen de 40 ms și sunt destul de mici în dimensiune. Acest lucru ne spune că, în mod individual, aceste fișiere sunt deja optimizate pentru această pagină. YSlow sugerează că combinăm aceste imagini și folosim spritele CSS pentru a ne îmbunătăți nota.
Dacă nu sunteți familiarizați cu spionii CSS, puteți face clic pe linkul "Citește mai mult", care vă va duce la cele mai bune practici ale Yahoo! Pentru a urca pagina dvs. de web.
În acest caz, utilizând o imagine optimizată ar trebui să vedem o îmbunătățire a timpului de răspuns al imaginii. CSS sprites lucrează prin combinarea imaginilor de fundal cu unul și apoi cu ajutorul CSS pentru a alinia imaginea cu imaginea de fundal și poziția de fundal. Nu este nimic deosebit cu privire la CSS folosit, deci ar trebui să fie compatibil cu toate browserele majore.
Multe site-uri web vor avea un grad F pentru această regulă, datorită faptului că este nevoie de un pic de lucru pentru a configura; cu toate acestea, beneficiile sunt mai mult decât merită costul de timp. În plus, serviciile precum Amazon oferă surse surprinzător de ieftine. În timp ce Envato utilizează absolut CDN-uri pentru site-urile cu trafic ridicat, cum ar fi Nettuts +, s-ar putea să fi decis că nu este necesar pentru un site de trafic mai mic.
Din nou, ne confruntăm cu o regulă care se referă la cererile HTTP. Termenul de expirare a anteturilor este comun, deoarece permite componentelor să devină cacheabile. Componentele cache (imagini, JavaScript, etc) economisesc timp și lățime de bandă pentru vizitele repetate pe o pagină Web. Prin urmare, merită implementate datele de expirare pentru conținutul dvs..
YSlow a găsit 55 de componente "fără o dată de expirare de viitor" după analizarea Envato.com. Majoritatea componentelor sunt imagini de fundal. Știm de la prima sugestie "Faceți mai puține cereri HTTP", că putem folosi sprite de CSS pentru a reduce numărul de imagini de fundal, îmbunătățind automat acest grad.
Configurarea anteturilor "Expires" este, în general, un proces simplu și de obicei necesită doar o adăugare rapidă la fișierul .htaccess. Odată aplicate, toate componentele dvs. ar trebui să aibă în prezent antete corespunzătoare fără alte manipulări sau modificări ale fișierelor. Pentru a obține o înțelegere completă în lucrul cu fișierul .htaccess și anteturile dvs., este nevoie de un articol în sine. Mai degrabă decât să intrăm în detaliu aici, am inclus un set de linkuri utile pentru citirea ulterioară:
YSlow a găsit o foaie de stil în afara elementului Head pentru Envato. Din fericire, aceasta este cea mai simplă regulă de rectificat. Prin păstrarea foilor de stil în partea de sus a paginii dvs. web, creșteți automat viteza cu care va încărca pagina dvs. web. Odată mutat, YSlow ar trebui să raporteze o notă A pentru această regulă.
Eliminarea spațiului alb neutilizat din documente reduce dimensiunea documentului și, prin urmare, crește viteza cu care fișierul este descărcat. După cum am menționat mai devreme, YSlow ne oferă un instrument de minificare, astfel încât toată munca grea poate fi făcută pentru noi.
Treceți la ecranul Instrumente și selectați Compresor YUI CSS. Într-o clipită, fișierele CSS sunt minime și sunt disponibile pentru descărcare. Rapidă, curată și simplă.
Etichetele oferă o modalitate de a valida o versiune specifică a unei componente a paginii web (imagini, JavaScript, etc). Aceștia lucrează cu serverul web pentru a se potrivi cu conținutul memorat în cache al browserului în raport cu conținutul de pe serverul web. Din păcate, YSlow a preluat două eșantioane lipsă pentru fișierele găzduite pe formspring.com. Din acest motiv, ar fi mai bine să urmați sugestia YSlow și să eliminați ETAG-urile în totalitate. Acest lucru se poate face adăugând "Nu există niciun fișier"în fișierul dvs. de configurare Apache. Ar trebui să vedeți acum o îmbunătățire a acestui grad de reguli.
Există multe alternative atunci când vine vorba de analiza site-ului, și nu aș fi surprins dacă ai preferat. Împreună cu YSlow, folosesc alți patru analizatori liberi. Așa cum vă puteți aștepta, fiecare oferă caracteristici unice și, din acest motiv singur, cred că este important să rețineți că niciunul dintre instrumentele nu poate oferi un raport absolut împotriva bullet-proof.
Pentru a vă oferi o imagine a modului în care fiecare dintre acestea generează un rezultat final, am inclus o scurtă descriere și scorul dat site-ului Envato.
Furnizat de AOL, această aplicație adaugă o varietate de setări analizei dvs. Puteți simula versiunea browserului, viteza conexiunii și puteți efectua comparații vizuale cu alte adrese URL. Este o caracteristică excelentă dacă doriți să începeți testarea A / B.
Scor: N / A. Oferă o listă de verificare a optimizării și timpul de încărcare.
PageSpeed este un alt add-on pentru Firefox și Firebug. Acest lucru apare chiar în același meniu ca YSlow și oferă o analiză similară. Ca și YSlow, utilizează reguli și rapoarte privind performanța fiecărui component. Acesta va optimiza și chiar va minimiza conținutul.
Scor: 76/100
Încă în versiune beta, această aplicație web gratuită vă va verifica conținutul, clasamentul Alexa, traficul, optimizarea motorului de căutare, metadatele geografice și multe altele. Din nou, cu fiecare analiză se adaugă sugestii utile. Puteți adăuga chiar și un widget pe site-ul dvs. web, arătând "scorul dvs. de woorank".
Scor: 65,8 / 100
Grader este o altă aplicație web gratuită, disponibilă și pentru iPhone. Acest instrument este destul de similar cu WooRank, cu o interfață curată și detaliată. Există chiar și un instrument dedicat pentru analizarea blogurilor: o caracteristică unică din cele cinci enumerate în acest articol.
Scor: 99/100
Aplicații precum YSlow oferă o analiză rapidă și eficientă a paginilor web. Ele pot genera rapoarte detaliate din informațiile pe care le adună, oferă sugestii sau instrumente pentru rezolvarea problemelor și pot sfârși prin a vă învăța ceva de-a lungul drumului. Dar YSlow și alternativele sale vor avea întotdeauna concurență: un dezvoltator web dedicat, condus și calificat sau un analist SEO.
Nimic nu învinge cunoștințele și practica; după cum am văzut, mai multe instrumente de analiză vor veni întotdeauna cu mai multe rapoarte diferite.
Nu există o soluție adevărată atunci când vine vorba de optimizarea motorului de căutare sau de creșterea timpului de încărcare a paginii web. Cu toate acestea, o mână de ajutor cum ar fi YSlow vă poate ușura volumul de muncă și vă poate salva pe dvs. sau pe clientul dvs. mult timp și, mai important, bani, pe termen lung.
Accentsconagua