De vreo două zile încoace, așa, m-am tot jucat cu o unealtă foarte utilă, și anume GTmetrix. Unealta asta e grozavă pentru că permite analizarea unui site și-ți spune cam ce ar trebui să faci pentru a-l îmbunătăți: începând de la numărul de fișiere, încadrarea și mărimea lor, ordinea încărcării în pagină, stiluri nefolosite și multe altele.
Nu vreau să vă încarc mintea cu cuvinte, mai bine vă arăt niște grafice.
Timpii de încărcare reprezintă viteza cu care o pagină apare completă în browser după click-ul dat. Am îmbunătățit această valoare, reducând timpii de încărcare ai site-ului de la 4-7 secunde la ~2 secunde.
Cu cât un site este mai dinamic, cu cât are mai multe elemente pe el – cu atât acesta devine mai mare. Ideal este ca un site dinamic să fie construit astfel încât să aibă toate elementele grupate și micșorate. Jucându-mă un pic, am ajuns de la aproape 1 Mega, la aprox. 500 kb. Adică jumate. Ceea ce e uber.
Sunt două unelte de măsurare a vitezei unui site: Yslow (al Yahoo-ului) și Page Speed (al Google-ului). Scorul este de la 0 la 100. Am fost pe la 75/87 am ajuns la 91/92.
Cei de la Google (cât și cei de la Yahoo), au spus că viteza de încărcare a paginilor este unul din factorii luați în considerare atunci când motoarele de căutare hotăresc care pagini să fie afișate primele. Contează foarte puțin, dar eu zic că merită efortul. De ce? Oferind viteză mai mare îi permiți utilizatorului ca în aceeași unitate de timp să facă mai multe lucruri.
Din pură curiozitate am comparat DarkQ cu 3 alte site-uri de nișă din România (Vezi smog? Să le spui la doamne că pe lângă consiliere psihologică trebuie să facă și treabă de… bărbați). Să fiu sincer, m-am bucurat să observ că Ideea se ține pe metereze binișor.
Bine, știu că nu vă interesează chestiile astea dar am simțit nevoia să scriu acest articol pentru mine (ca să văd io peste 20 de ani ce făceam în urmă cu 20 de ani).
Ce să mai zic? Happy… browsing? (merci de păreri grid & Pompieruțu :-D)
P.S.: Probabil că ați observat că am scos fundalul acela cu steluțe și cu cristale de gheață, rainbow. Sincer… m-am săturat de el (și în plus era și prea mare). Îmi pare rău pentru aceia dintre voi cărora le plăcea mai mult acela (sorry Tomitza).
Se pare că cineva a făcut pe furnica!
Interesate informaţii, interesante rezultate.
La mai bine!
Bun articolul și aștept mai multe articole tehnice de la tine 🙂
Cât despre background, ce să mai fac, oftez și merg mai departe. Oricum, arată bine și așa, nu poți mulțumi pe toată lumea.
Robert vezi ca e posibil sa te dau in judecata cu riscul ca ma vei lua cu matura de pe blog . “Pompierutu” e apelativul pe care eu l-am adresat prima data, numai eu am exclusivitate, ok? 😎
Essentials, ce furnică măăă… dita’ bondaru’.
Tomitzel, nu vreau să încarc p-aci cu prea mult tehnic dar… vedem… mai demult am reușit să instalez pe un server de la Rackspace niste chestii tare faine de la 0, doar din linie de comanda. Moamă ce m-am bucurat. 😀 Atunci am zis că scriu, mi-a trecut euforia și n-am mai scris.
Apoi când mi-am luat S II-ul, am zis ca fac un revie despre cum face video, poze, viteză… n-am mai făcut că l-am butonat 3 zile și mi-a trecut.
Dar… vedem.
Adi, bine, bine… numai tu. Gata, nu-i mai zic. Bine-i?
Nu totul se rezuma la viteza. Mai sunt bune si frane, si airbaguri. Just in case. Desi imi place noul design. Foarte septic. Congrats
Smog, si mie imi place. Ti-am povestit eu cum percep design-ul si chiar daca acest este unul de nisa cred, dupa ce am stat de vorba cu mine si cu inca cativa, ca elementele de identitate vizuala sunt arhisuficiente. De exemplu, parerea Norei relativ la tendinta gay-ilor de a se bloca in cliseul “barbati goi”, m-a ajutat mult. Doar de Tomi imi pare rau, ca stiu ca lui stelutele ii placeau.
Acum ma voi putea culca la 5 linistit 🙂 tencs
Somn usor, Adi.
Probabil că și uneltele de editare din fereastra de trimitere a comentariului reduceau viteza de afișare, dar eu zic că erau utile (ba încă ar fi trebuit suplimentată bara de unelte și cu un buton de link-are automată). Rândul de emoticoane, în schimb, ar putea să lipsească :-)) .
Chiar atunci când va deveni accesibilă tuturor (și dacă se va reuși acest lucru), editarea ulterioară a propriilor comentarii are dezavantajul major că întrerupe fluența scrisului, plus că uneori se răspunde deja la comentarii în timp ce autorul lor încă le editează.
Uneori, mai mult e mai putin… :laugh: .
Viteza prea mare (de afișare) predispune la accidente (de scriere), iar accidentul cel mai grav este ratarea peisajului (scrisul își ratează menirea).
Invers, o viteză prea mică de încărcare (ce permite contemplarea pe îndelete a peisajului) te face să ratezi drumul și să te gândești mai degrabă la un popas (eventual printre steluțe).
Ambele variante se soldează de obicei cu o ieșire în decor. Prima – deoarece peisajul ratat se răzbună, obligându-te în final să-l bagi în seamă, iar a doua – pentru că detaliile de peisaj (contextul) te fură și te transformă, din șofer (autor), mai degrabă într-un pasager (al scrisului).
😎
P.S.: Poate că n-ar strica un “Preview pane” înainte de postarea comentariilor, iar bara de unelte de editare să apară doar în acest panou de previzualizare. În felul ăsta cred că împăcăm și capra și varza.
Multumesc mult Robert 🙂
Chiar nu am stiut de GTmetrix până acum, de Page Speed și YSlow stiut și le folosec regulat. Este chiar fain GTmetrix m-am jucat și eu azi cu el.
Când mai ști de tool-uri intersante pentru SEO te rog să imi spui. 🙂
A și felicitări pentru design este foarte fain, imi place că mergi pe design Web 2.0 așa este fain clean and simple. 🙂
Keep up the good work!
Take care,
Alexander
@RobertG
Găsești tu un loc întunecat și ascuns pe blog unde să le publici 😛
@smog
Singura problemă cu mașina e marca, Citroen? Nu te vedeam cu Citroen pe tine 😀
E foarte fain noul skin 😛
Multumesc. Pun’te si dormi ca iesim la fasion.
Pai inainte de Sauvage mai ies putin prin oras, asa ca nu e vreme de somn! =))
Ooo … deci deaceea acum se incarca mai repede.
Fb Robert si oricum se vede ca DarkQ prinde pe zi ce trece, din ce in ce mai multa viata.
Frumos si noul Skin, desi ma obisnuisem cu, curcubeul:D
@Grid, singurul lucru, zic eu pe care am vrut sa il subliniez, este legat de Emoticoane.
Parerea mea este ca este foarte util, mai ales cand vrei sa colorezi putin un coment, sau un articol.
De ce? Pentru ca sunt foarte putini care stiu sa scrie in asa fel in cat sa te transpuna in spatele tabloului pe care el il creaza atunci cand scrie ceva.
Chiar daca scade sau nu din viteza bara de emoticoane, daca nu ar fi fost folositoare nu s-ar mai fi inventat zic eu:D!
Optinea de editare a comenturilor, era folositoare iar ideea timpului de doar 10 min sa il poti edita si pe urma gata, era oarecum buna.
Daca ar fi fost ca fiecare cititor sa isi poata modifica comentul oricand doreste, cred ca ar fi iesit o mare harababura, pentru ca ar fi posibil ca raspunsurile sa se dea in continuare la acelas coment, ca o adaugare, ceea ce te-ar ameti complet.
Cu toate ca 10 min este un timp destul de mare, dupa cum ai spus si tu, in timp ce omul isi editeaza comentariul, deja altcineva a raspuns.
Robert
Adresez aici intrebarea ca e mai apropiat topicul asta decat locul de joaca.
Am sesizat că pe site-ul asta toate link-urile externe au target-ul pe “frame”. Logica mea de blondă mi-a spus să le fac (_blank).
Exista vreo logica suplimentara care mi-a scăpat?
Hai zi-mi şi mie in 2 vorbe cand ai timp, că mă ia capul să caut explicaţii pe site-uri din domeniu 😀
Nora, cu drag.
Când faci o hyperlink depinde pentru ce îl faci. Dacă sunt link-uri către paginile propriului site, atunci varianta preferata este link-ul simplu, fără tag-ul “target”. By default un asemenea link se va deschide in aceeași fereastră. Adică așa cum trebuie să fie. Exemplu:
<a href="http://www.google.com">Ancora</a>Dacă faci o legătură externă, către un alt site, o sursă din care ai citat, blogroll etc, e de preferat să folosești target-ul
_blankastfel:<a href="http://www.google.com" target="_blank">Ancora</a>Pe DarkQ nu pot controla link-urile care se trimit prin comentarii (trimiteri catre youtobe, diverse ziare, surse, site-uri), când cineva le dă simplu copy/paste, nu au nici un atribut target, așa că se deschid în aceeași pagină. dar tu, pe site-ul tău, link-urile externe fă-le cu
_blank, cum am descris mai sus.Dacă te mai pot ajuta cu ceva, cu cea mai mare plăcere.
Pai asta ziceam Robert, ca la tine am gasit link-uri externe fara target si nu pricep de ce. Spre exemplu, cel catre Accept si am mai nimerit cateva. M-am gandit ca ai avut o logica anume care mi-a scapat mie.
Da, eu asa le-am facut pe-ale mele dar vazand la altii mai priceputi altfel, am zis hait, tre’ sa stiu si eu de ce 😀
Aha, am înțeles. Efectiv nu pot (nu am timp) să editez fiecare link pe care îl pune cineva. Din punct de vedere al funcționalității e ok, dar din puct de vedere al “user experience”-ului … mai puțin. Dar nu e stress.
Noh, bun, deci n-am gresit cu _blank-ul la externe. Multumesc mult 🙂
N-ai de ce. Indiferent de ce sfaturi, codare, plugin-uri ai nevoie, apelează cu încredere.
Danke again 🙂
Robert, cand ai timp si energie (da-i omului un deget si-ti ia tata mana, of course)
Intrebare: in ce masura schimbarea temei afecteaza posturile, paginile si categoriile?
Am vreo varianta online/offline (poate intr-un subdomeniu – desi nu m-am jucat niciodata cu subdomeniile) de a ma juca cu tema inainte de a o face praf pe cea actuala? (nu ma refer la verificarea temei in browsere, ci la optiunile ei + ce mi se nazare mie sa schimb prin css)
Banuiesc ca si la pluginuri ar trebui sa umblu major, in functie de optiunile noii teme? Update-ul la ultima varianta de wp se face cumva inainte de alegerea temei ptr a verifica compatibilitatea?
Nu reusesc sa-mi dau seama ce naiba de rezolutie sa folosesc la crearea imaginilor in PS ptr ca ele sa se vada impecabil (eu stiam simplu ca 72 e recomandat ptr net si 300 ptr print. cu toate astea, cand le uploadez, wp parca mai baga un filtru ceva, nu stiu ce le face de le blureaza. ai idee unde naiba gresesc la setarile de photoshop?)
As mai avea vreo 4589 de intrebari, dar le mai caut si eu raspunsuri.
Nora dragă,
păi schimbatul temelor e simplu, că doar o activezi pe asta noua the la Preferences » Themes. Și vezi cum arată.
Bine ar fi să îți notezi într-un fișier, ceva, ce plugin-uri ai momentan active, si să le dezactivezi si pe alea că unele din ele s-ar putea să nu îți fie utile la noua temă. Deci, le dezactivezi, și le activezi una câte una în funcție de necesitățile temei noi.
Upfate-ul WP-ului nu afectează nicicum tema sau plugin-urile dar io îți recomand să începi cu update-ul WP-ului, și apoi schimbă tema.. Poți merge liniștită pe update-ul automat, dacă hosting-ul tău e setat cum trebuie, va merge. Dacă, cumva din întâmplare, nu va merge ar trebui urcate fișierele noi peste cele vechi.
Bun. Deci, actualizezi WP-ul, dezactivezi plugin-urile active dar nu înainte ca să le fi notat care ce fac si care o fo’ alea active (că majoritatea-s pasive, lol… bine, bine… glumesc), mergi la Preferences » Themes și schimbi tema activând-o pe cea nouă.
Vezi cum arată, și în funcție de ce mai ai nevoie activezi plugin-urile pe rând și plasezi widget-urile la locurile unde dorești să apară (Appearence » Widgets). Efectiv pui șoarecele pe un Widget și tragi în ce Sidebar-uri dorești de p-acolo. Io de exemplu am mai multe.
Ce te intereseaza pe tine este ca site-ul să fie vizibil pe rezolutia 1024×768 (click dreapta pe monitorul tău și schimbi rezoluția). Apoi, ar fi bine să testezi, să vezi dacă totul se vede bine in internet Explorer, Firefor, Opera, Chrome, eventual Safari. Astea le pot eu verifica pentru că eu le am instalate toate.
Așadar, tema actuală nu ai cum să o faci praf, ea nu se distruge dacă activezi altă temă. Oricând o poți activa la loc dacă asta nouă are ceva erori. Nu-ți fă griji.
Toată treaba ar trebui să dureze puțin. Acuma depinde ce schimbări vrei să îi faci prin stiluri… acolo te joci, efectiv, salvează fișierul mamă undeva, în caz că ceva merge rău și nu știi ce-ai schimbat să ai cu ce înlocui la loc.
Ok, imaginile. Cand esporți imaginile cu PS, exporta-le ca si JPG/JPEG, calitatea până maximă 8 sau 80%. depinde cum ti-e setată scala aceea. Schimbări semnificative mai în sus de acea valoare nu sunt decât la mărimea lor, ceea ce e total nerecomandat. doar nu vrei ca pagina să aibă 100KB si imaginile de pe ea câte 500, nu?
Cam atât. Aci sunt dacă ai nevoie. Fug să legalizez niște acte, da’ revin repede.
Robert, big trouble.
Nu pot face upgrade automat pe ultima varianta de WP (3.2) ptr ca nu-mi corespunde versiunea de PHP. Mai exista varianta sa incarc manual varianta WP 3.1, numai ca a verifica care fisiere tb inlocuite si care NU, e o sarcina la care eu nu ma inham, mai bine raman gravida decat sa fac giumbuslucul asta. Asadar, raman eu frumos la WP 3.
Si ba daaaa, fac varza tot site-ul ptr ca tema aleasa are alte optiuni, printre care home page-ul customizabil si pagina distincta de blog (care, neexistand setari pre instalare, la preview vad cel mult niste dude)
It’s coaptă my friend! Asa 2 pumni mi-as da cand ma zgandare talentuuuu.
Ia sa vezi cum raman io fara par in cap dupa schimbarile astea, cu toate backup-urile mele 😀
Vreau să mă apuc și eu de website building. Ce îmi recomandați ca primă lectură, măi specialiștilor?
Că sunt așa multe limbaje de programare, concepte și idei, că nu știu de unde să mă apuc.
Nora,
Mdap. Păi atunci ai următoarele variante:
Faci un subdomeniu si instalezi acolo o versiune de WP nouă, imporți baza de date pe care o ai acil la alpha-coaching ȘI tema nouă pe care vrei să o pui. Astfel ai un loc de joacă. Când esti multumita cu rezultatele, doar iei fisierul de stiluri de la ala si pui la site-ul tau…
Deci, ori așa, ori… pui tema noua si te joci pe site-ul părinte câteva ore… nu e un site cu trafic (inca), nu ai ce pierde.
Daca vrei, WP-ul eu ti-l pot upgrad-a, imi trebuie doar datele de FTP prin mesaj privat.
🙂
So, Robert, ai idee cum ies din urmatorul răhăţel?
Nu stiu cum sa scap de marele cearşaf alb de sub footer (si care nu apare in toate paginile). Tot verificand diverse stiluri de pagina, am observat ca are legatură cu paginile în care am niste toggles inserate in text. Am făcut jdemii de incercari in style.css. Nu stiu de unde s-o apuc sa o rezolv. Daca ai vreo idee, da-mi te rog de veste. Multumesc!
1. Scoate pop-up-ul ala cu site în lucru. E primul lucru pe care il vad motoarele de cautare si nu e bine deloc.
2. Ok. Scoate widget-ul de facebook. Ăla cauzează problema. Uite (click dreapta, view image ca să vezi mare):
Scos FB widget. Nicio modificare.
Ideea e că ceva de pe margine are un stil de hight setat ca si fix. ceva gen
height: 300px;Scoate tot ce îi pe margine, și adaugă-le pe rând. Cand scoți toate widgeturile de pe margine, chestia aia unde apar numarul paginilor 1, 2, 3… 47 ar trebui sa fie jos, aproape de bara neagra. Apoi, re-adaugă widget-urile una cate una, să vezi care face buba. Se poate ca acel author widget să fie problema.
ia vezi, și zi-mi.
Nu stiu de ce, dar nu vrea site-ul tau sa ma mai recunoasca, degeaba ma log in, ca tot nu mă vrea.
Deci, daaaa. Robeeeeeeeeert, sidebar-ul n-avea nicio problema mânca-l-ar mama sa-l mănânce. Vaca de pop up era baiul, ‘tu-i mama lui de pop up. Ma chinui de vreo 5 ore, nici firebug-ul şi nici toate modificarile mele prin css-uri nu-mi fura de folos.
Doamneee, cata munca degeaba cand puteam sa te intreb direct si tu-mi raspundeai la fel de direct ca acu’: scoate soro popup-ul ala ca se supără goagăl.
Daca n-as fi unde sunt şi dacă n-as vorbi cu cine vorbesc, as spune ca “stau o dată” ptr ajutorul de mi l-ai ofetit, dar cred ca mai rau te jignesc. Asa ca MULTUMEEEEEEEEEESC ptr inspiraţia minune! 🙂
Sterge cache-ul browser-ului (din cand in cand) – asta pentru DarkQ.
Mă bucur că s-a rezolvat într-un final cu site-ul tău. 🙂 Nu ai de ce să îmi mulțumesti, imi face plăcere.
Taci ca si-a revenit si cucoana asta de pagina. Daca as fi supersitioasa as zice ca nu-i lucru curat. Dar nu-s, asa ca mai bine visez la ziua in care voi avea si eu internet ca tot omu’ si scap de vodafonul asta mobil 🙂
Nora, așa se întâmplă si la mine cand lucrez. Oricum, când cureți un cache, închide toate paginile si ramâi pe google doar… ca nu se vor sterge cache-urile la o pagina care e deschisa in vreun tab. 🙂
Ai dreptate, am curatat cache-ul cu pagina deschisa si i-am dat si cu flit cand m-a intrebat ce face cu scriptul actual. Faza nasoala e ca eram pe deplin constienta, nici beata, nici drogata, nici indragostita, nici alea alea, dar nah, ma grabeam ca fata mare la măritat si viteza de reactie a netului mobil e mult inferioara vitezei mele de comanda. Ma rog, e inferioara si vitezei melcului, da’ e-al meu mah si-mi canta mereu popularul imn
Walk on, walk on
With hope in your heart
And you’ll never walk alone
You’ll never walk aaaaaloooooone…
Somn usor la lumea care e 🙂
Oh, dac-ai ști câte țepe din astea am luat până am învățat toate prostiile astea… pe care nu ai unde să ce citești… pentru că nici un tutorial sau how to din ăla “în 5 pași” nu va mege ever cu scrie ‘colo.
Mă bucur că s-a rezolvat și la tine.