Share
Una dintre criticile comune ale cadrelor, cum ar fi Twitter Bootstrap, este că acestea includ codul mult mai mult decât utilizați de fapt în site-ul dvs., lăsându-vă o bază de coduri umflate și o performanță slabă a site-ului. Acesta este un pericol posibil, însă pagina de personalizare a lui Bootstrap oferă un instrument excelent pentru rezolvarea problemei. Permiteți-mi să vă trec prin procesul de personalizare a fișierelor CSS și JavaScript pentru a reduce foarte mult dimensiunea fișierului.
Asta se ocupă de primul videoclip, în cel de-al doilea vă voi trece printr-un alt pas important: stoarcerea biților din fișierele dvs. de imagine, folosind instrumentul Yahoo!'S Smushit. Împreună, acești doi pași (optimizarea codului și optimizarea imaginilor) vor reduce considerabil amprenta site-ului dvs..
Vom folosi pagina personalizată Twitter Bootstrap pentru a selecta și descărca doar componentele CSS și JavaScript de care avem nevoie, rezultând mult dimensiuni mai mici ale fișierelor.
Alternativ, descărcați videoclipul sau abonați-vă la programele de distribuție Webdesigntuts + prin iTunes sau YouTube!
Următoarele sunt capturi de ecran ale selecțiilor pe care le-am făcut în ecran.
Odată ce ați descărcat și implementat fișierele personalizate CSS și JS, puteți alege să obțineți câștiguri suplimentare utilizând un plugin cum ar fi Dust Me Selectors pentru a identifica selectorii rămași neutilizate, pe care le puteți edita manual din fișierul CSS. Aceasta va fi mult mai ușor cu fișierul personalizat mai mic decât cu fișierul original.
În timp ce optimizăm fișierele, putem menționa și un pas suplimentar care vă va ajuta cu cele mai mari fișiere din site-ul mediu: fișierele imagine. Trebuie să vă gândiți la optimizarea imaginilor pentru web. S-ar putea să fiți surprins să știți că nu toate instrumentele de compresie sunt egale. Dialogul "Salvați pentru web și dispozitive" din Photoshop se dovedește a fi unul dintre instrumentele de compresie mai puțin eficiente acolo.
Aici vom folosi instrumentul Yahoo!'S Smushit pentru a ne ajuta să realizăm ceea ce Photoshop nu poate.
Alternativ, descărcați videoclipul sau abonați-vă la programele de distribuție Webdesigntuts + prin iTunes sau YouTube!
Accentsconagua