Optimalizálása javascript és css-fájlok drupal, drupal bloggerek

Ez az oldal egy kísérlet, hogy javítsa a kommunikációt a legaktívabb fejlesztő a CMS Drupal - bloggerek. Ha fut a blog Drupal, így készen áll, hogy ossza meg tudását és segíteni másokon. Nem mindig a tudás eljut a fogyasztóhoz. A célja ennek a honlapnak, hogy összesítik a tudás a különböző blogok egyetlen szalagot, és vezet, hogy a blog aktív felhasználó.

Aktív felhasználók az oldalon lesz további ösztönzést ad a további munkához.

Sok szerencsét minden erőfeszítést!

Hogyan kezdjük el a honlap?

• Böngésző oldalon kezdődik a GET-kérelmet oldalt.
• A szerver küld egy kérést, hogy ezt a HTML-kódot oldalain.
• A böngésző értelmezi a kódot, és megkezdi a letöltést minden külső fájlokat (JS, CSS, Flash, stb) abban a sorrendben jelennek meg a kódot.
• Normális esetben a böngésző nem használ több mint 2 stream betöltésére külső fájlokat, és a CSS és a JS-e töltve minden egy patak.
• Itt az ideje minden kérés méretétől függ a visszaküldött válasz szerver terhelését és tevékenysége minden gépen egészen a böngésző és a szerver.
• Minél nagyobb a fájl mérete - annál tovább fogják szállítani a böngésző.
• Minél nagyobb a fájlok számát - annál tovább fog betölteni az egész oldalt.

Így, hogy növelje a letöltési sebesség miatt szükséges:

1. modules / comment / comment.js
2. modules / profile / profile.js
3. modules / openid / openid.js
4. modules / taxonomy / taxonomy.js
5. modules / system / system.js
6. modules / block / block.js
7. modules / szín / color.js
8. modules / user / 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

Nos, ők nem mind ugyanazon az oldalon zagruzayutsya, és néhány nem használt. A lelkiismeret a fejlesztő modul helyesen beállítani csatlakozás feltételeit JS és CSS-fájlok az oldalon, hogy haszontalan kód nem csökkentette az oldal betöltése sebesség.
CSS-fájlok
A projekt száma és teljes mérete más lesz.
A csapat önellenőrző CSS fájl mérete:
találni. -name '* .css' -exec ls -l # 123; # 125; \; | awk 'END'

A mi projekt, amellett, hogy a core fájlok, még mindig mintegy 450 további modulok és sminkek.
A teljes mérete az összes CSS-fájlok - 1'674'793 bájt.
Ami a CSS-fájlok Drupal 6 mag, itt vannak:

1. modules / locale / locale.css
2. modules / aggregátor / aggregátor-rtl.css
3. modules / aggregátor / aggregator.css
4. modules / update / update.css
5. modulok / frissítés / update-rtl.css
6. modules / poll / poll.css
7. modules / poll / poll-rtl.css
8. modules / megjegyzés / comment-rtl.css
9. modules / comment / comment.css
10. modules / tracker / tracker.css
11. modules / forum / forum-rtl.css
12. modules / forum / forum.css
13. modules / könyv / book.css
14. modules / könyv / book-rtl.css
15. modules / profile / profile.css
16. modules / search / search-rtl.css
17. modules / search / search.css
18. modules / openid / openid.css
19. modulok / node / node-rtl.css
20. modules / node / node.css
21. modules / taxonomy / taxonomy.css
22. modules / system / system-menük-rtl.css
23. modules / system / admin-rtl.css
24. modules / system / admin.css
25. modules / system / maintenance.css
26. modules / system / defaults-rtl.css
27. modules / system / defaults.css
28. modules / system / rendszerszintű rtl.css
29. modules / system / rendszerszintű menus.css
30. modules / system / system.css
31. modules / block / block.css
32. modules / szín / color.css
33. modules / színes / színes-rtl.css
34. modules / help / help.css
35. modules / help / help-rtl.css
36. modules / dblog / dblog.css
37. modules / dblog / dblog-rtl.css
38. modules / user / user.css
39. modules / user / felhasználó-rtl.css
40. misc / print-rtl.css
41. misc / farbtastic / farbtastic.css
42. misc / print.css
43. témák / bluemarine / style.css
44. témák / bluemarine / style-rtl.css
45. témák / koszorú / print.css
46. témák / koszorú / style.css
47. témák / koszorú / Minnelli / minnelli.css
48. témák / koszorú / color / preview.css
49. témák / koszorú / style-rtl.css
50. témák / koszorú / fix-ie.css
51. témák / koszorú / fix-ie-rtl.css
52. témák / nyomógomb / style.css
53. témák / nyomógomb / style-rtl.css
54. témák / kaméleon / common-rtl.css
55. témák / kaméleon / style.css
56. témák / kaméleon / Marvin / style.css
57. témák / kaméleon / Marvin / style-rtl.css
58. témák / kaméleon / common.css
59. témák / kaméleon / style-rtl.css

A teljes mérete a CSS-fájl egy nagyságrenddel kisebb, mint a JS-fájlt. De meg kell jegyeznünk, hogy a CSS-fájl az oldalon sokkal több, mint JS-fájlok - körülbelül 2-szer nagyobb. Ezen túlmenően, a stílusok hajlamosak betöltött összes oldalt (ez a stílus a téma), és csak modulok stílusok lehet letölteni bizonyos oldalakon. Így és stílus fájl, és a szkriptek szüksége van a figyelmet egyaránt.
Limited Internet Explorer
IE 6-8 Browser korlátozza a száma és mérete CSS-fájl:

• Minden hozzátéve szerű tag után az első 31 tag figyelmen kívül hagyja.
• Minden CSS-szabályok az első 4095 szabályok figyelmen kívül hagyja.
• Az oldalak, amelyek @import szabály importálni külső stíluslapok, hogy importálni más külső stíluslapok, stíluslapok, több mint 3 szint mélységig - figyelmen kívül hagyja.

Korlátozások a HTTP protokoll
Kíváncsi vagyok, hogy a korlátozás a számos böngészők AJAX kapcsolatok?
Szerint a HTTP 1.1 specifikáció böngésző kell állítani akár 2 egyidejű kapcsolat (és ez spravedlivao az IE6 / 7) egyetlen host. A Firefox és az Opera, ez az opció testreszabható, és nem kevesebb, mint 4 alapértelmezés szerint. Egyes jelentések szerint IE8 - 6 kapcsolatok egy fogadó.
Forrás: Raising network.http.max-persistent-kapcsolat-per-server?

• Firefox 2: 2
• Firefox 3 béta 4: 4
• Opera 9.26: 4
• Opera 9.5 beta 4
• Safari 3.0.4 Mac / Windows: 4
• IE 7: 2
• IE 8: 6

• A legtöbb JS és CSS-fájlok nem optimalizált.
• Sok kép és a teljes mérete jelentősen.
• Van probléma az IE böngészőt, amely korlátozza a CSS-fájlok az oldalon.
• Gondok vannak az oldal betöltése sebesség miatt a nagy számú külső fájlok és korlátozza a több egyidejű kapcsolatot böngésző a szervernek.

Kérést a szerver és a szerver küld tömörített tartalmat

• CSS optimalizálás nem történik, amikor a hely a Maintenance Mode ( „Szolgáltatás”), vagy indítsa el a frissítést (update.php).
• Az optimalizált fájlok kerülnek a húr, mint a paraméter, amely lehetővé teszi, hogy ellenőrizzék a böngésző cache fájlokat. Amikor fut update.php vagy állítsa vissza a gyorsítótár megtelik - én ezt a vonalat, amely arra kényszeríti a böngészőt újra az új változat a fájl, mivel úgy vélik, hogy az URL megváltozott.
• Részt vesz Fájloptimalizálás megoldja a 4. érv drupal_add_css function () - $ preprocess, amely meghatározza, hogy a fájl, hogy részt vegyenek az optimalizálás, ha engedélyezve van. Alapértelmezésben a fájl lesz részt optimalizálás.
• 2 elsőként kialakuló fájlok listáját, amelyek nem vesznek részt a optimalizálása CSS - egyedül az (1) modulok és külön-külön (2) azok.
• Ezután hozzon létre egy fájlnevet, amely tárolja az optimalizált CSS és a hívott drupal_build_css_cache () függvényt. amely összesítve és optimalizálja CSS fájlok.
• Az eredményül kapott fájl tárolja a sites / default / files / css mappában található (több gépen telepítés másik módja, de - úgy gondolom -, hogy te és tudja, hol lesznek tárolva).

Ez magában foglalja az optimalizálási?

Így az optimalizálás kínálunk Drupal core valójában egy minimalizáló összesítés egyetlen fájlba.
Hátrányai a módszer optimalizálására a magban Drupal
optimalizálási módszer, mellyel a lényege Drupal biztonságos, azaz, hogy nem vezet a kódon. De a módszer nem olyan hatékony, mint amilyennek látszik.
Az a tény, hogy az oldal lehet egy tucat 2 különböző szkriptek, amelyek gyűjtik egy egyedi fájl cache ehhez az oldalhoz. Scripts az oldalon lehet betölteni függően a felhasználói hozzáférési jogokat vagy akár olyan körülményt, amely növeli a számos lehetőség egy oldalt.

• Ha úgy dönt, hogy használja a forgalom tömörítési teljesítmény tuning oldal
• Expansion PHP zlib) jelen van a rendszerben,

CSS-hack, hogy a munka:

Tesztelés az oldalak betöltési sebessége
Mértem az oldalak betöltési ideje végeztek, hogy megtudja, hogyan kell változtatni az átlagos letöltési időt a különböző optimalizálási módszerekkel JS-fájlokat. A vizsgálati terület több mint 1300 JS-fájlok és csaknem 450-CSS-fájlokat. BERENDEZÉSEK modulok 227 (beleértve a rendszermag modulok). különböző optimalizációs technikák is vizsgálták:

vizsgálati körülmények
böngésző beállításait

• Tesztelt: Nyitólap A vizsgálati helyszín
• Böngésző: Firefox 3.6.13
• A böngésző cache: 500M
• Mérőszerszám: YSlow 2.1.0
• Proxy szerver: nem használt

• A szerver használ: Accelerator
• Operációs rendszer: Linux
• Kernel verzió: 2.6.29-5
• Építészet: x86_64

Beállítások Drupal

• Felhasználó Drupal: Super User
• Tárolt üzemmódban: Normál
• Minimális gyorstár élettartam: nincs
• Oldal tömörítés: engedélyezve
• Blokk cache: engedélyezve
• Optimalizálja CSS fájlok: engedélyezve

teszteredmények
Az oldal átlagos betöltési ideje

Diagram időt az oldal betöltése különböző módban

Elemzés a vizsgálati eredmények

hasznos linkek
szkriptek kompresszorok

Az, hogy a terhelési eleme a böngésző oldal