Una dintre citatele mele preferate legate de dezvoltare este foarte apropiată de una dintre citatele mele preferate referitoare la design:

blogului

„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.

Un alt motiv pentru care acest lucru devine important este pentru acele agenții care utilizează prețuri bazate pe utilități pentru găzduirea site-urilor, unde fiecare octet transmis de gazdă se traduce printr-o cheltuială. Deși acestea sunt doar mici exemple pentru a ilustra ideea, probabil că puteți începe să vedeți impactul la o scară mai mare.

Cum afectează scripturile performanța

JavaScript. Iubește-l sau urăște-l, merită respect. Fără JavaScript, web-ul nu ar fi același. Am fi bombardați cu reîmprospătarea paginilor, probleme legate de lățimea de bandă și limitări generale de utilizare. La Grafik, am standardizat pe jQuery pentru compatibilitatea cu versiunile anterioare și pentru polifillurile pentru browsere mai vechi, și anume IE11.

Agenția noastră utilizează un model de design numit „design atomic”, care transformă în esență caracteristicile paginii în aplicații individuale mai mici, care sunt integrate împreună în partea din spate. Aceste componente vizuale permit unui autor de conținut să construiască pagini de la zero fără a atinge o singură linie de cod. Acest lucru ajută la asigurarea controlului asupra proiectării, fără a aduce atingere proiectului general aprobat al șantierului.

Uneori, aceste componente atomice introduc interacțiuni controlate de configurație conduse de scripturi generate automat. În cazul în care acest lucru începe să devină problematic este atunci când aceeași componentă este utilizată de mai multe ori pe aceeași pagină, sau chiar împreună cu alte componente, adăugând o umflare inutilă documentului în sine.

Să aruncăm o altă privire la un exemplu practic care aproximează o componentă atomică, la fel ca ceea ce am folosi pe un site de producție. Aceasta ar putea include utilizarea unui buton care face ceva interesant atunci când spectatorul interacționează cu acesta, plasat pe pagină de câteva ori.

Inainte de:

Chiar dacă conținutul acestor componente este unic pe utilizare, este destul de ușor să vedeți că este creată o copie aproape identică a scriptului pentru a controla fiecare instanță a componentei atomice. Să facem câteva ajustări care ne permit să rulăm un singur script care poate face treaba ambelor, fără a sacrifica funcționalitatea.

După:

În loc să scriem JavaScript dinamic, ne structurăm scripturile pentru a genera în schimb sarcini utile JSON care conțin doar biți de informații care anterior făceau fiecare script unic pe utilizare.

Scriptul migrat pe care îl plasăm în /js/scripts.js devine apoi creierul unificat al operației, servind toate funcționalitățile fără a fi nevoie să fie generate dinamic. Numai HTML-ul necesar pentru a include scriptul este numărat în raport, nu întregul conținut al fișierului.

Inainte de După
Lungime brută: 644 caractere
Lungime numai text: 108 caractere
Raport final: 16,77% conținut		 Lungime brută: 492 caractere
Lungime numai text: 108 caractere
Raport final: 21,95% Conținut

Din nou, primul nostru exemplu a scăzut cu mult sub densitatea minimă recomandată, dar îmbunătățirile pe care le-am adus ne-au adus în raza de acțiune la aproape 22%. Efectele acestei abordări pot varia foarte mult, deoarece natura JavaScript este foarte diferită de la aplicație la aplicație. În exemplul nostru, avem un buton care își modifică propriul text atunci când faceți clic, care în comparație cu o aplicație din lumea reală este destul de simplu. Funcțiile mai complicate nu vor fi un beneficiu mai mare, deoarece în acest scenariu sunt implicate mai multe coduri.

Chei de luat masa

Paginile sunt la fel de bune ca și conținutul pe care îl conțin și nu cred că se va schimba în curând. Ceea ce va afecta clasamentul dvs. este numărul de persoane care părăsesc site-ul dvs. prematur din cauza frustrării sau a faptului că au fost nevoiți să treacă prin prea multă balonare și insuficiență de substanță. Acordarea atenției la raportul text-cod poate fi una dintre multele modalități de a atinge criterii de performanță mai ridicate pe paginile dvs.

De asemenea, este esențial să vă pregătiți pentru succes de la început. Una dintre cele mai bune modalități de a realiza acest lucru este de a avea designeri și dezvoltatori care lucrează și colaborează mai strâns, astfel încât provocările de proiectare să fie rezolvate cu cel mai mare nivel de atenție posibil. Aruncați o privire asupra raportului text-html, a stilurilor și a scripturilor.

Sperăm că veți avea câteva idei excelente despre cum să vă îmbunătățiți performanța paginii după ce ați citit aceste strategii. Dacă sunteți interesat să vedeți unele dintre aceste concepte în acțiune, vă rugăm să consultați ofertele noastre de tehnologie pentru a vedea cum putem să vă dăm viața viziunii sau puteți căuta prin studiile noastre de caz, care sunt toate exemple excelente de modul în care am ajutat alții își actualizează viziunile.