Amintiți-vă cât de mult timp ai petrecut anterior pe optimizarea elementelor active ale proiectului (imagini, CSS, etc.)? Ei bine, utilizatorii de astăzi au la dispoziție un internet mult mai rapid, iar acum se pare că suntem în cele din urmă posibilitatea de a utiliza imagini mari, sau fișiere mari Flash.
Cu toate acestea, odată cu apariția de dezvoltare mobile, suntem înapoi la aceeași problemă. Este extrem de important pentru a optimiza site-ul pentru dispozitive mobile, astfel încât o aplicație care afișează o pagină Web, alerga mai repede: mai puține informații și descărcate imediat să răspundă la acțiunile utilizatorului.
imagine
Asigura dimensiunea dorită
folosim de multe ori aceleași imagini pentru diferitele secțiuni ale site-ului nostru. De exemplu, magazinul online toate produsele au o imagine comună. Să presupunem că avem trei pagini care afișează această imagine: o pagină - aceasta este o listă comună de mărfuri, care include acest produs, al doilea - de fapt, o descriere detaliată, iar al treilea - imaginea produsului de ieșire în dimensiunea originală.
Deci, avem nevoie de aceeași imagine în trei dimensiuni diferite, și dacă vom folosi același fișier pentru toate cele trei pagini, browser-ul se va descărca în mărime completă, chiar și pentru pagina lista de mărfuri.
În cazul în care, de fapt, ar fi de ajuns, iar imaginea 200 cu 200 pixeli. Dacă fișierul sursă are o dimensiune de aproximativ 1 MB, și vom enumera zece poziții acolo, este doar atunci când imaginile sunt descărcate la utilizatorul va trebui să pompa 10 MB.
Acest lucru nu este foarte bun. Dacă ați încercat să creați o imagine diferită pentru diferite pagini de pe site-ul dvs., v-ar economisi o mulțime de kbs. De asemenea, ar fi corect să acorde o atenție la rezoluția ecranului dispozitivului utilizatorului.
De exemplu, dacă cineva vine la site-ul dvs. de pe un dispozitiv mobil, nu este nevoie să se descarce o imagine imens în antet, pe care le-ar folosi în mod normal. Prin utilizarea interogări media CSS pot fi trimise la utilizator pentru a descărca imaginea mai mici:
Descărcați imagini folosind setările de dimensiune corecte nu sunt întotdeauna suficiente. Unele formate de fișiere pot fi presate în jos în mod semnificativ, cu nici o pierdere de calitate. Există mai multe programe care vă pot ajuta cu asta. De exemplu, Photoshop acceptă funcția de excelenta „Salvare pentru Web și alte dispozitive“:
În acest panou există mai multe opțiuni, dar unul dintre cele mai importante - „Calitate“. Dacă setați valoarea sa în regiunea de 80%, este posibil să se reducă în mod semnificativ dimensiunea fișierului.
Desigur, acesta poate fi utilizat pentru a comprima fișierele de cod, dar eu personal prefer Photoshop. L folosesc ori de câte ori este posibil. Aici este un simplu exemplu de cod PHP:
De asemenea, pentru a crește performanța aplicației dumneavoastră, puteți reduce numărul de cereri de server. La urma urmei, fiecare imagine nouă este o nouă cerere.
Soluție excelentă - combina diferite imagini într-una singură. Complexul rezultat este numit o imagine sprite, și prin schimbarea stilului de imagine de fundal de cazare, puteți afișa doar o parte din sprite cu fragmentul dorit.
De exemplu, pagina de start Twitter Bootstrap de pornire utilizează sprite pentru pictogramele lor interne:
Apoi, prin CSS, vă puteți înregistra aici despre acest cod pentru a afișa porțiunea sprite care aveți nevoie:
cache
Există mai multe moduri de a cache-ul de management, și vă sugerez să citiți acest articol mare. pentru a afla mai multe despre ele. În general, puteți controla procesul de creare a antetului, după cum urmează:
prefetching
HTML5 evoluează în fiecare zi. Ea are o caracteristică utilă numită prefetching. Cu browser-ul de ajutor este raportat că, în viitorul apropiat, veți avea nevoie de unele resurse, și ar trebui să încarce informații cu ei acum - pentru viitor. De exemplu:
Scheme URI- de date / Imagini Construit
Un cuplu de ani în urmă a existat o sarcină în fața mea pentru a proiecta o pagină web simplu. care ar consta doar dintr-un singur fișier HTML.
Și, desigur, a trebuit să fie construit în codul unor imagini. Schemele URI- date m-au ajutat pentru a rezolva această problemă. Ideea a fost de a transforma imaginea unui Base64 codificat și plasat într-un atribut tag-ul IMG SRC.
Cu această metodă, imaginea ta va fi de fapt o parte din codul HTML și întreaga pagină va fi încărcată într-un singur HTTP-cerere. Desigur, dacă aveți o imagine mare, o linie de cod va fi foarte mult timp. Aici este un exemplu de un simplu script PHP. care convertește imaginile în șir de cod base64:
În unele cazuri, poate fi util pentru tine, dar rețineți că IE nu se ocupă de aceste coduri.
Îmi place să cred că descrierea în stil CSS este similar cu codul de compilare. Ai descrie o varietate de stiluri pentru blocuri site și relațiile dintre ele. Deci, eu cred că managementul CSS este într-adevăr cel mai important lucru.
Fiecare pagina ar trebui să aibă propriul său stil, și acestea ar trebui să fie separate în mod clar. stiluri de stocare pentru diferite elemente în fișiere diferite oferă o bună organizare. Dar ridică anumite probleme.
Știm cu toții că, folosind operatorul @import nu este o idee bună. Pentru că fiecare nou operator de @import înseamnă o nouă cerere către server. Și dacă aveți, de exemplu, există 20 de fișiere CSS diferite, înseamnă că browser-ul va executa 20 HTTP-cereri.
Și browser-ul nu se poate încărca / afișa pagina înainte nu va fi încărcat cu toate stilurile. Dacă unele dintre fișierele CSS sunt șterse sau au o dimensiune mare, înainte de a vedea pagina de pe ecran, poate dura mult timp.
Utilizați CSS-preprocesorul
Cu CSS-Preprocessor poate rezolva toate problemele descrise mai sus. De asemenea, aveți posibilitatea să partajați toate fișierele pentru stiluri diferite, dar în preprocesorul final le compilează într-un singur fișier CSS-. În plus, software de procesare a CSS oferă mult mai multe caracteristici foarte rece: variabile, blocuri imbricate, Mixins și moștenirea.
Codul apare în continuare în format CSS, dar acum el este deja bine formatate și structurat. Există mai multe preprocessor comune pe care le puteți încerca pe site-ul tau: Sass. Mai puțin și stylus. Aici este un exemplu simplu de cod CSS-preprocesor mai puțin:
În cele din urmă, aceasta duce la următorul grup de stiluri:
Sau, de exemplu, dacă aveți un stil de buton, și doriți să trageți același buton, dar cu o alta culoare. Apoi, puteți utiliza următorul cod:
eficiente CSS
Foarte des, dezvoltatorii nu cred că despre eficiența CSS. CSS determină eficiența vitezei paginii de ieșire, iar în cazul în care stilurile nu sunt eficiente, cererea va fi procesată de către browser-ul este foarte lent. Este interesant faptul că browserele analiza selectori CSS de la dreapta la stânga. Aceasta înseamnă că următorul cod:
ineficiente în principiu. sarcină a motorului toate etichetele și va trebui să evalueze fiecare dintre elementele-mamă care, în cele din urmă, aduna toate stilurile necesare. Ar trebui, de asemenea, știți că, în ceea ce privește eficiența tipurilor de selectoare sunt clasificate în ordinea următoare: ID-ul, clasa, tag-ul și universal.
Acest lucru înseamnă că elementul cu SET ID-ul va fi afișat mai repede decât doar un element al unui selector de etichete. Desigur, nu are nici un sens pentru a adăuga ID-uri la toate elementele din arborele DOM. dar ar trebui să fie sigur de a inspecta codul și pentru a îmbunătăți-l acolo unde este posibil. De exemplu, dacă aveți un record de genul:
Trebuie să eliminați o parte din ul. pentru că aveți pe pagina este doar un element de #navigation. Sau în următorul selectorul:
Se înțelege că elementul .content este un corp tag copil. De fapt, toate elementele sunt copii ale acestuia.
Aici sunt două link-uri utile pe acest subiect: developers.google.com și css-tricks.com
mărime fișier
După cum sa menționat mai sus, codul sursă necesar pentru a reduce dimensiunea cât mai mult posibil. Deoarece browser-ul nu afișează pagina până când încărcați toate CSS. Iată câteva sfaturi pentru a vă ajuta să reduceți dimensiunea fișierului.
Se combină stiluri similare:
pot fi convertite în:
Utilizați contracții. în schimb:
Puteți scrie următorul cod:
Minimizarea CSS-cod. Puteți face acest lucru prin utilizarea de instrumente care sunt proiectate pentru a elimina spații suplimentare și linii. De exemplu, CSSOptimiser sau Minifycss.
Este o practică comună, atunci când astfel de instrumente sunt folosite pe servere, sau pentru a optimiza aplicațiile care au o cerere scrisă în aceeași limbă pe care el însuși motor site-ul. De obicei, aceste componente ajuta la minimizarea codul și face mai convenabil pentru aplicația utilizator.
Postați linkuri către fișierele CSS sunt între tag-uri
.Ar fi util să se includă link-uri către dvs. CSS-fișiere între tag-uri
. În acest caz, browser-ul le va descărca mai întâi.Reducerea numărului de cereri HTTP-
minimiza codul
Cele mai multe dintre aceste instrumente folosesc redenumirea variabilelor, precum și conversia mai multor rânduri într-una singură. Este ceea ce face practic imposibil să urmeze depanarea codului.
Încercați CommonJS. AMD. RequireJS
Într-un scenariu, vă puteți înregistra main.js solicita () pentru a încărca orice alt script care aveți nevoie de:
Utilizarea nume de secțiune
Dacă lăsați codul de mai sus așa cum este, în primul rând poate fi copiat de cineva, și, în al doilea rând, există posibilitatea ca în timpul utilizării va fi adesea conflicte cu alte biblioteci din proiectul dumneavoastră. Cu toate acestea, gruparea ca pe un obiect (nume de secțiune) independentă, poate oferi o protecție:
Utilizați șabloane de design
Folosind unele dintre acestea vor ajuta să creați o serie de aplicații funcționale și robuste. Dacă am încerca să le acopere cel puțin pe scurt toate, am să scrie o carte întreagă. Cu toate acestea, aici sunt exemple de unele dintre ele:
designer de șablon
Acest model poate fi folosit pentru a crea un obiect de un anumit tip. De exemplu:
modul șablon
șablon modul ne oferă posibilitatea de a crea metode private și publice. De exemplu, următorul cod, variabila și metoda _index privateMethod sunt private. O creștere și getIndex - publice:
șablon de monitorizare
Ori de câte ori aveți un abonament sau nevoie de moderare de evenimente, ați văzut, probabil, imaginea de mai jos. Există oameni care păstrează evidența modificărilor asociate cu un anumit obiect.
De îndată ce există o anumită acțiune, obiectul notifică observatorilor. Următorul exemplu arată modul în care putem adăuga un observator la obiect utilizator:
lanț funcții de șabloane
Acest șablon este o modalitate buna de a organiza interfața publică a modulului. Acest lucru economisește timp și îmbunătățește lizibilitatea:
Active-Pack
De multe ori, unele dintre elementele sale sunt declanșate în timpul cache, dar toate operațiunile sunt efectuate în mod direct în timpul criptei. logica Astfel, codul este verificat prin care procesarea cererii JS sau fișiere CSS. In timpul acestui proces, și sunt compilate, minimizarea și eficientizarea elementelor structurale ale site-ului.
În ultimul meu proiect am folosit un instrument numit active-pack. Acesta este un set de caracteristici foarte utile, iar mai jos voi explica în detaliu modul în care funcționează. Dar chiar mai interesant este modul în care l-am folosit. Această bibliotecă este destinat utilizării numai în timpul dezvoltării.
Acesta nu este destinat pentru introducerea în codul sursă al site-ului și nu prevede desfășurarea pe server. Acesta este utilizat numai atunci când lucrați pe elementele active (CSS, JS). Se urmărește modificări la anumite foldere și compilează / pachete de cod într-un fișier separat. Cu această abordare, nu mai este nevoie să aibă grijă de minimizarea sau compilare.
Tot ce trebuie să faceți este doar trimite fișierul static compilat pe dispozitivul utilizatorului. Acest lucru îmbunătățește performanța aplicației, deoarece aceasta servește numai fișiere statice, și, desigur, face ca întregul proces mai ușor. Nu aveți nevoie să configurați nimic pe server sau cere logica inutile.
Mai jos este o descriere a instalației și utilizarea activelor-pack.
utilizarea
Modulul funcționează în configurația JSON. Dacă rulați-l din linia de comandă, trebuie să aibă grijă de faptul că toate instalațiile au fost înregistrate în fișierul JSON. Tastați în următoarea linie de comandă emulare de comandă:
Creați fișiere assets.json și rula în același director pentru a executa următoarea comandă:
Setările trebuie să fie specificate în fișierul JSON / obiect existent. Ceea ce este pur și simplu o serie de obiecte:
obiect element de
Elementul obiect structura de bază, după cum urmează:
Setarea parametrilor de ambalaj opțiune nu este necesară. În mod implicit, instrumentul este configurat astfel încât să se reducă la minimum dimensiunea generală. Iată câteva exemple de setări:
Fișierele de optimizare .less
Fișierele de optimizare .less se face un pic diferit. Acolo și-a stabilit clar parametrii pachetului opțiuni, cum că, de regulă, punctul de intrare. Veți avea nevoie pentru a importa toate fișierele existente .less. Opțiunea excluse nu vor fi disponibile pentru procesare.
Dacă aveți probleme, vă rugăm să verificați fișierul de teste / ambalare-less.spec.js prin intermediul unui serviciu special pe GitHub.
Optimizarea alte formate de fișiere
Active-pack poate manipula fișiere de orice format. De exemplu, putem combina mai multe template-uri HTML într-un singur fișier. Pentru a face acest lucru, trebuie să configurați setările cu privire la acest lucru:
Cu toate acestea, ar trebui să aibă în vedere faptul că, în acest caz, codul nu va rula minimizarea.
concluzie
Ca dezvoltatori, ar trebui să depună eforturi pentru a oferi utilizatorilor noștri cea mai bună performanță a aplicațiilor și serviciilor.
Traducerea a articolului «materiale web - Sfaturi pentru o mai bună organizare și performanță» a fost pregătit de către echipa de proiect prietenos Web design de la A la Z.