Pierderea în greutate pentru site-urile Blogului Agenției de Marketing Grafic
Una dintre citatele mele preferate legate de dezvoltare este foarte apropiată de una dintre citatele mele preferate referitoare la design:
„Codul pe care îl scrieți te face programator. Codul pe care îl ștergeți vă face unul bun. Codul pe care nu trebuie să-l scrie te face unul excelent. ” - Mario Fusco
„Un designer știe că au atins perfecțiunea nu atunci când nu mai este nimic de adăugat, ci când nu mai este nimic de luat”. - Antoine de Saint-Exupery
Ambii pledează pentru o filozofie „mai puțin-este-mai mult” și reamintesc bine că în spatele design-urilor elegante ale interfețelor iconice de la Apple, Uber și Google există stive de tehnologie extrem de optimizate concepute pentru a obține rapid informațiile corecte persoanelor potrivite. Iată câteva domenii de luat în considerare atunci când depuneți eforturi pentru a obține un UX mai elegant:
Raport text-cod
Atunci când un motor de căutare accesează cu crawlere o pagină pentru conținut, trebuie să sorteze prin mai multe informații decât pare. Aceasta include toate structura, stilurile, comportamentul și imaginile care sunt asamblate de browserul dvs., rezultând o experiență web frumos orchestrată. Câștigul 22 este că unele dintre efectele mai frumoase și mai impresionante care pot fi utilizate de un site pentru a captiva publicul necesită, de obicei, mult mai mult cod pentru a le scoate. Acest lucru afectează unul dintre puținii factori de performanță ai paginii, numit „raport text-cod”. Această valoare este măsurarea cantității de conținut citibil de către om într-un bloc de cod.
Deși nu influențează direct clasarea paginilor în motoarele de căutare, este considerat un indicator cheie pentru oportunitățile în care performanța paginii poate fi îmbunătățită. Google recomandă un raport text-cod între 20% și 70% pe pagină. Deși la suprafață, acest lucru poate părea un obiectiv ușor de atins, examinarea mai atentă a stivei dvs. tehnologice ar putea dezvălui o abundență de complexitate inutilă și că paginile dvs. ar putea funcționa mai bine cu tipul corect de ajustări. Acesta este locul în care designerii și dezvoltatorii trebuie să colaboreze pentru a afla dacă aceste efecte au sens atunci când ținem cont de obiectivele cheie ale părților interesate.
Cum influențează stilurile performanța
În timp ce stilurile în linie pot economisi timp pentru implementare, în unele cazuri, ele sunt, de asemenea, unul dintre cei mai mari infractori atunci când raportul text-cod începe să scadă. Ca dezvoltatori, probabil că am făcut-o cu toții la un moment dat în cariera noastră și, în unele cazuri, este inevitabil. Indiferent dacă este inclus între etichetele de stil sau ca reguli inserate în atributul de stil al unui element, este important să minimizați aceste instanțe cât mai mult posibil.
În acest exemplu practic, vă voi arăta cum să vă îmbunătățiți raportul cu peste 10% cu foarte puțin efort.
Inainte de:
Dacă ne luăm ceva timp să lucrăm cu un designer pentru a veni cu stiluri reutilizabile care pot fi aplicate automat utilizând o foaie de stil reutilizabilă și prietenoasă cu memoria cache, putem începe să vedem câteva îmbunătățiri.
După:
În fișierul nostru CSS avem următoarele reguli:
| Inainte de | După |
| Lungime brută: 521 caractere Lungime numai text: 95 de caractere Raport final: 18,23% conținut | Lungime brută: 318 caractere Lungime numai text: 95 de caractere Raport final: 29,87% conținut |
Primul nostru exemplu nu a depășit raportul minim text-cod recomandat cu 20%. Cu toate acestea, efectuarea a doar câteva ajustări la modul în care aplicăm aceste stiluri a condus la un raport îmbunătățit cu mai mult de 11%. Deși Google nu va favoriza unul față de celălalt, este destul de clar să vedem că al doilea exemplu este mult mai curat, mai organizat și, deoarece sunt implicate mai puține caractere, va ajunge mai rapid în browserul unui utilizator.