Optimizarea JavaScript și CSS-fișiere în drupal, bloggeri drupal

Acest site este o încercare de a îmbunătăți comunicarea dintre cei mai activi dezvoltatori în CMS Drupal - bloggeri. Dacă rulați blog-ul dvs. pe Drupal, astfel încât sunteți gata să împărtășească cunoștințele și de a ajuta pe alții. Nu întotdeauna cunoștințele ajunge la consumator. Scopul acestui site de a agrega cunoașterea diferitelor blog-uri într-o singură bandă și să conducă la utilizatorii activi blog.

utilizatori activi pe site-ul dvs. va fi un stimulent suplimentar pentru continuarea lucrărilor.

Mult noroc în toate eforturile tale!

Cum de a începe un site web?

  • site-ul browser-ul începe cu pagina GET-cerere.
  • Serverul trimite o cerere către acest cod html pagini.
  • Browserul analizează codul și începe descărcarea toate fișierele externe (JS, CSS, Flash, etc.), în ordinea în care apar în codul.
  • În mod normal, un browser nu folosește mai mult de 2 fluxuri pentru încărcarea fișierelor externe, și CSS și JS încărcate într-un singur flux.
  • Timpul pentru fiecare cerere depinde de mărimea răspunsului, incarcarea serverului a revenit și activitatea pe fiecare mașină pe toată distanța dintre browser și server.
  • Cu cat mai mare dimensiunea fișierului - mai mult va fi livrat în browser.
  • Cu cât numărul de fișiere - cu cât se va încărca întreaga pagină.

Astfel, pentru a crește viteza de descărcare a paginii este necesară pentru:

  1. module / comentarii / comment.js
  2. module / profil / profile.js
  3. Module / OpenID / openid.js
  4. module / taxonomie / taxonomy.js
  5. module / sistem / system.js
  6. module / bloc / block.js
  7. module / color / color.js
  8. module / utilizator / user.js
  9. misc / autocomplete.js
  10. misc / drupal.js
  11. misc / collapse.js
  12. misc / batch.js
  13. misc / farbtastic / farbtastic.js
  14. misc / form.js
  15. misc / tableselect.js
  16. misc / ahah.js
  17. misc / tabledrag.js
  18. misc / textarea.js
  19. misc / progress.js
  20. misc / tableheader.js
  21. misc / teaser.js
  22. misc / jquery.form.js
  23. misc / jquery.js
Ei bine, ei nu sunt toate pe aceeași pagină zagruzayutsya, iar unele nu sunt utilizate. Pe conștiința modulului de dezvoltator pentru a configura în mod corespunzător condițiile de conectare JS și CSS-fișiere de pe pagină pentru codul inutil nu a redus viteza de încărcare a paginii.
CSS-files
În proiectul dumneavoastră, numărul și dimensiunea totală va fi diferit.
Echipa de mărime fișier CSS auto-verificare:
găsi. -name '* .css' exec ls -l # 123; # 125; \; | awk 'END'

În proiectul nostru, în plus față de fișierele de bază, există încă aproximativ 450 de module și teme suplimentare.
Mărimea totală a tuturor CSS-files - 1'674'793 bytes.
În ceea ce privește CSS-fișiere în Drupal 6 de bază, aici acestea sunt:

  1. Module / locale / locale.css
  2. Module / agregator / agregator-rtl.css
  3. Module / agregator / aggregator.css
  4. module / actualizare / update.css
  5. Module / update / update-rtl.css
  6. Module / sondaj / poll.css
  7. module / sondaj / poll-rtl.css
  8. module / comentariu / comment-rtl.css
  9. module / comentariu / comment.css
  10. Module / tracker / tracker.css
  11. Module / forum / forum-rtl.css
  12. Module / forum / forum.css
  13. module / carte / book.css
  14. module / carte / carte de-rtl.css
  15. Module / profil / profile.css
  16. Module / Căutare / search-rtl.css
  17. Module / căutare / search.css
  18. Module / OpenID / openid.css
  19. Module / nod / nod-rtl.css
  20. Module / nod / node.css
  21. Module / taxonomie / taxonomy.css
  22. module / sistem / system-meniuri-rtl.css
  23. module / sistem / admin-rtl.css
  24. module / sistem / admin.css
  25. module / sistem / maintenance.css
  26. Module / system / defaults-rtl.css
  27. module / sistem / defaults.css
  28. Module / sistem / system-rtl.css
  29. Module / sistem / system-menus.css
  30. module / sistem / system.css
  31. Module / bloc / block.css
  32. module / culoare / color.css
  33. module / culoare / culoare-rtl.css
  34. Module / help / help.css
  35. Module / help / help-rtl.css
  36. Module / dblog / dblog.css
  37. Module / dblog / dblog-rtl.css
  38. Module / utilizator / user.css
  39. module / utilizator / user-rtl.css
  40. misc / imprimare-rtl.css
  41. misc / farbtastic / farbtastic.css
  42. misc / print.css
  43. teme / bluemarine / style.css
  44. teme / bluemarine / stil rtl.css
  45. teme / Garland / print.css
  46. teme / Garland / style.css
  47. teme / Garland / Minnelli / minnelli.css
  48. teme / Garland / culoare / preview.css
  49. teme / Garland / stil rtl.css
  50. teme / Garland / repara-ie.css
  51. teme / Garland / repara-adică-rtl.css
  52. teme / buton / style.css
  53. teme / buton / stil rtl.css
  54. teme / cameleon / common-rtl.css
  55. teme / cameleon / style.css
  56. teme / cameleon / marvin / style.css
  57. teme / cameleon / marvin / stil rtl.css
  58. teme / cameleon / Common.css
  59. teme / cameleon / stil rtl.css

Mărimea totală a CSS-fișier un ordin de mărime mai mică decât JS-fișier. Dar trebuie să observăm că CSS-fișier de pe pagina de mult mai mult decât JS-fișiere - de aproximativ 2 ori mai mare. În plus, stilurile tind să fie încărcate pentru toate paginile (această temă stil) și module numai stiluri pot fi descărcate pentru anumite pagini. Astfel, și stil de fișiere, și script-uri au nevoie de atenția noastră în mod egal.
Limited Internet Explorer
IE 6-8 Browser are o limită privind numărul și dimensiunea CSS-fișier:

  • Toate etichetele de stil adăugând după primele 31 de tag-uri sunt ignorate.
  • Toate CSS-reguli după primele 4,095 regulile sunt ignorate.
  • Pe paginile care utilizează regula @import pentru a importa foi de stil externe, care importă alte foi de stil externe, foi de stil, cu mai mult de 3 niveluri profunde - ignorate.

Limitarea protocolul HTTP
Mă întreb dacă restricția privind numărul de browsere conexiuni AJAX?
În conformitate cu HTTP 1.1 browser-ul caietul de sarcini trebuie să setați până la 2 conexiuni concurente (și acest spravedlivao la IE6 / 7) la o singură gazdă. În Firefox și Opera, această opțiune este personalizabil și nu este mai mică de 4 implicit. Potrivit unor rapoarte în IE8 - 6 conexiuni la o gazdă.
Sursa: Creșterea network.http.max-persistent-conexiuni-pe-server?

  • Firefox 2: 2
  • Firefox 3 beta 4: 4
  • Opera 9.26: 4
  • Opera 9.5 beta: 4
  • Safari 3.0.4 pentru Mac / Windows: 4
  • IE 7: 2
  • IE 8: 6
  • Cele mai multe dintre JS și CSS fișierele nu sunt optimizate.
  • Multe fișiere și dimensiunea lor totală este considerabil.
  • Avem probleme cu browser-ul IE, care limitează numărul de CSS-fișiere pe pagină.
  • Probleme cu viteza de încărcare a paginilor din cauza numărului mare de fișiere externe și limitarea numărului de conexiuni browser simultane la server.

Cerere de la server și serverul trimite conținut comprimat

  • Optimizarea CSS nu se face atunci când site-ul este în modul de întreținere ( „Serviciul“) sau de a începe actualizarea (update.php).
  • Prin fișierele optimizate sunt adăugate la un șir ca parametru, care vă permite să controlați fișierele browser-ul cache. Când executați update.php sau reseta cache-ul este plin - am această linie care forțează browser-ul pentru a reîncărca noua versiune a fișierului, deoarece ei cred că URL-ul sa schimbat.
  • Va participa la optimizarea fișier rezolvă al 4-lea argument funcția drupal_add_css () - $ preprocesa, care determină dacă fișierul pentru a participa la optimizarea, în cazul în care este activat. În mod implicit, fișierul va fi implicat în optimizare.
  • 2 este format mai întâi o listă de fișiere care nu sunt implicate în optimizarea CSS - singur (1) pentru modulele și separat (2) pentru cei care.
  • Apoi, creați un nume de fișier care va stoca funcția numită drupal_build_css_cache () CSS optimizat și. care sunt agregate și de a optimiza fișierele CSS.
  • Fișierul rezultat este stocat în site-uri / default / files / folderul css (în instalarea multisite este un alt mod, dar - cred - că tu și știi unde vor fi stocate).

Aceasta include o optimizare?

Astfel, optimizarea pe care le oferim de bază Drupal este de fapt o agregare minimizând într-un singur fișier.
Dezavantajele metodei de optimizare în miez Drupal
metode de optimizare, care este utilizat în nucleul Drupal este sigur, adică, aceasta nu conduce la erori în codul. Dar metoda nu este la fel de eficace ca se pare.
Faptul că pagina poate fi o duzină de 2 script-uri diferite, care sunt colectate într-un fișier unic, care este stocată în cache pentru această pagină. Script-uri de pe pagina poate fi încărcată în funcție de drepturile de acces ale utilizatorului sau chiar orice condiție care crește numărul de opțiuni pentru o singură pagină.

  • Dacă alegeți să utilizați trafic de compresie pagina performanță tuning
  • Expansion PHP zlib) prezent în sistem,

CSS-hacks care funcționează:

Testarea vitezei de încărcare a paginii
Am măsurat a fost realizat timpul de încărcare a paginii pentru a afla cum să modificați timpul mediu de descărcare pentru diferite metode de optimizare JS-fișiere. Site-ul de testare are mai mult de 1300 de JS-fișiere și aproape 450-CSS-files. Module INSTALAȚII 227 (inclusiv modulele de kernel). diverse tehnici de optimizare au fost investigate:

condiţii de testare
setările browser-ului

  • Testat pe: Pagina de pornire a site-ului de test
  • Browser: Firefox 3.6.13
  • Memoria cache a browser-ul: 500M
  • Instrumente de masurare: YSlow 2.1.0
  • Server proxy: nu este utilizat
  • Pe serverul utilizează: Accelerator
  • Sistem de operare: Linux
  • Kernel Versiune: 2.6.29-5
  • Arhitectura: x86_64

Setări în Drupal

  • Utilizator Drupal: Super utilizator
  • Mod Caching: Normal
  • durată de viață minimă cache: nici unul
  • compresie Pagina: activat
  • Bloc cache: activat
  • Optimizați fișiere CSS: activat

rezultatele testelor
Durata medie de încărcare a paginii

Diagrama de timp la încărcarea paginii în diferite moduri

Analiza rezultatelor testelor

Link-uri utile
scripturi compresoare

Ordinea elementelor de încărcare a paginii de browser

Pagina anterioară

Pagina următoare