Téma: PageSpeed Insights

Emphus eredeti hozzászólása

És?



He? Milyen "felső css"? És mi van akkor, ha 300 bájttal megnövelem a forrást? Az már 10 évvel ezelőtt sem volt gond.



WTF? A fejléc (= html head) nem jelenik meg, köze nincs a hajtás feletti részhez (kivéve a title). MINDIG beletartozik a tartalmi rész teteje, hisz a tartalmi rész görgetés nélkül látható része a hajtás feletti rész.

Ne is haragudj, de elég nagy badarságokat írtál / kérdeztél!
Így inkább részemről a válasz helyett lezártnak tekinten az ügyet, pláne mert oszti már úgy is elmagyarázta.

oszti eredeti hozzászólása

A Google picit másképp nézi. Szerinte az első 14.6kB-t jelenti (tömörítve persze). Ez az egyik oka, hogy a css fájlok betöltését is elhalasztaná.
https://developers.google.com/speed/...VisibleContent

Ez nem mond ellent annak, amit én írtam.

Janko eredeti hozzászólása

Ne is haragudj, de elég nagy badarságokat írtál / kérdeztél!
Így inkább részemről a válasz helyett lezártnak tekinten az ügyet, pláne mert oszti már úgy is elmagyarázta.

Ja, én írok hülyeségeket. Már több topicban bizonyítottad, hogy nulla olvasási képességed van, többszöri magyarázatra sem érted meg, hogy mi a feladat. Nem hogy a mgoldás. Amit Oszti "már úgy is elmagyarázott" az ugyan az, amit én is írtam, hogy egyértelműen az 1. lehetőséget választanám, tehát a head-be rakott sima CSS. Köszönöm. Leülhetsz, egyes.

Javascripteket defer vagy async módon töltsd be. Pl.: <script defer src="jquery.scrollUp.min.js" onload="myInit()"></script>

A mai nappal befejeztünk egy nagyobb átalakítást a fő oldalunkon, talán másokat is érdekelni fog a programozóm összefoglalója:

"A kiinduló probléma az volt, hogy nagyon sok http kérésünk volt az oldal töltésekor. A google page speed tesztjének tanúsága szerint ez a sok JS és CSS fájl, illtve kisebb képek sokasága miatt volt, tehát rengeteg különálló fájlt kellett betölteni, ehhez pedig rengeteg http kérésnekkellett lefutnia, ami nagyon lassított az oldalt.

Mivel a legszembetűnőbb első ránézésre a JS és CSS fájlok mennyisége volt és ezek közül volt a legtöbb olyan, amiről tudtuk, hogy vagy összevonhtóak egy fájlban, vagy pedik tölthetőek kondíciók alapján csak bizonos aloldalakhoz, így ezen fájlok optimalizálásval, rendezésével kezdtük. Így sikerült mind a css, mind a JS fájlok több mint felét vagy kiiktatni, vagy csak bizonyos aloldalakra korlátozni a betöltésüket, illetve összevonni, és az így keletkezett nagy fájlokt pedig minifyoltuk is gyorsabb töltés érdekében.

Ezek alapján, tehát azt vártuk, hogy mivel csökkent a betöltendő fájlok száma, így csökkenni fog a http kérések száma, és az oldal a page speed teszten is jól fog szerepelni. Bár az oldalon látható volt a gyorsulás, azonbn a page speed teszt pontértékei csak csekély mértékben nőttek. A teszt továbbra is problémásnak találta a http kérések nagy számát.

A probléma az volt, hogy nagyon sok különálló dizájn elemet és kis ikont, hátteret töltött az oldal. Hiába tüntettük el a sok JS és CSS fájlt, ezek még mindig akadályozták az oldalbetöltést. Így arra jutottunk, hogy Css sprite-ot alaklamazunk ott, ahol csak lehet. Ehhez sok helyen módosítani kellett az eredeti html kódot is, mert volt ahol képek img tagként kerültek be, de meg lehett oldani háttérként is, ott ezt megoldottuk.

Előzőleg már volt megoldás a képekre is, mert összefüggésben a mobil verzió kialakításával, megcsináltuk, hogy mobile-first elv alapján, először mindig a mobilra szánt kisméretű képek (mobilon meg nem jelenők esetében 1x1px-es kitöltőképek) töltődjenek be és JS-el megcsináltuk, hogy desktopon oldalbetöltés után ezek desktop méretre cserélődjenek. Ettől már eleve reméltünk pontszámjavulást a page speedben, s bár láthatón ettől is gyorsult az oldal, azonban pontszámban ez akor csekély változást hozott.

Amikor viszont kiiktattuk a sok kis kép különálló töltését ezzel minimalizálva a http kérések számát, akkor a pontszám is jelentősen javult."

Nos, annyit még hozzátennék, hogy a CSS és JS fájlok összevonásával a Google nem sokat törődött, olyan pár pontnyit javult az értékelés az oldalsebességet illetően. A képek, ikonok, hátterek, s más állandó elemek összevonásával, s a CSS sprite alkalmazásával azonban 20 pontot ugrott az oldal sebességének értékelése.

Valóban borzasztó, hogy a 100%-os felhasználói élményt nyújtó oldal sebességtesztje a http requestek számán el tud bukni. A képek töltődésekor megnéztük, hogy a kép lekérése a szerverről 1 ms-ot jelentett, az elküldése szintén 1 ms-ot, míg a várakozás a szerver válaszára 10 ms-ot is felemésztett. Most ezeket a várakozásokat sikerült kiküszöbölni.

Sziasztok, én is "bűvölni szeretném" az eredményeket. A cache tárolást szeretném. htacces-be beállítani [wordpress], de nem tudom, hogy az alábbi kódban megfelelőnek számítanak-e az időértékek? Az oldalon Adsense is fut. Nem sok az 1 hónap?

Kód:

<IfModule mod_expires.c>
  ExpiresActive on
 
# Először mindenre engedélyezzük az 1 hónapos lejárati időt
  ExpiresDefault                          "access plus 1 month"
 
# FF 3.6 bugja, cache.appcache-t újra kell kérni
  ExpiresByType text/cache-manifest       "access plus 0 seconds"
 
# dokumentum html 
  ExpiresByType text/html                 "access plus 0 seconds"
 
# adat
  ExpiresByType text/xml                  "access plus 0 seconds"
  ExpiresByType application/xml           "access plus 0 seconds"
  ExpiresByType application/json          "access plus 0 seconds"
 
# rss
  ExpiresByType application/rss+xml       "access plus 1 hour"
 
# favicon (nem lehet átnevezni)
  ExpiresByType image/x-icon              "access plus 1 week" 
 
# media: képek, video, audio
  ExpiresByType image/gif                 "access plus 1 month"
  ExpiresByType image/png                 "access plus 1 month"
  ExpiresByType image/jpg                 "access plus 1 month"
  ExpiresByType image/jpeg                "access plus 1 month"
  ExpiresByType video/ogg                 "access plus 1 month"
  ExpiresByType audio/ogg                 "access plus 1 month"
  ExpiresByType video/mp4                 "access plus 1 month"
  ExpiresByType video/webm                "access plus 1 month"
 
# htc fájlok  (css3pie)
  ExpiresByType text/x-component          "access plus 1 month"
 
# webfontok
  ExpiresByType font/truetype             "access plus 1 month"
  ExpiresByType font/opentype             "access plus 1 month"
  ExpiresByType application/x-font-woff   "access plus 1 month"
  ExpiresByType image/svg+xml             "access plus 1 month"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
 
# css és javascript
  ExpiresByType text/css                  "access plus 2 months"
  ExpiresByType application/javascript    "access plus 2 months"
  ExpiresByType text/javascript           "access plus 2 months"
 
  <IfModule mod_headers.c>
    Header append Cache-Control "public"
  </IfModule>
 
</IfModule>

Valaki tudna esetleg ötletet adni, mennyi időre állítsam be az értékeket, vagy hagyjam így?

Benjamin eredeti hozzászólása

Sziasztok, én is "bűvölni szeretném" az eredményeket. A cache tárolást szeretném. htacces-be beállítani [wordpress], de nem tudom, hogy az alábbi kódban megfelelőnek számítanak-e az időértékek? Az oldalon Adsense is fut. Nem sok az 1 hónap?

Kód:

<IfModule mod_expires.c>
  ExpiresActive on
 
# Először mindenre engedélyezzük az 1 hónapos lejárati időt
  ExpiresDefault                          "access plus 1 month"
 
# FF 3.6 bugja, cache.appcache-t újra kell kérni
  ExpiresByType text/cache-manifest       "access plus 0 seconds"
 
# dokumentum html 
  ExpiresByType text/html                 "access plus 0 seconds"
 
# adat
  ExpiresByType text/xml                  "access plus 0 seconds"
  ExpiresByType application/xml           "access plus 0 seconds"
  ExpiresByType application/json          "access plus 0 seconds"
 
# rss
  ExpiresByType application/rss+xml       "access plus 1 hour"
 
# favicon (nem lehet átnevezni)
  ExpiresByType image/x-icon              "access plus 1 week" 
 
# media: képek, video, audio
  ExpiresByType image/gif                 "access plus 1 month"
  ExpiresByType image/png                 "access plus 1 month"
  ExpiresByType image/jpg                 "access plus 1 month"
  ExpiresByType image/jpeg                "access plus 1 month"
  ExpiresByType video/ogg                 "access plus 1 month"
  ExpiresByType audio/ogg                 "access plus 1 month"
  ExpiresByType video/mp4                 "access plus 1 month"
  ExpiresByType video/webm                "access plus 1 month"
 
# htc fájlok  (css3pie)
  ExpiresByType text/x-component          "access plus 1 month"
 
# webfontok
  ExpiresByType font/truetype             "access plus 1 month"
  ExpiresByType font/opentype             "access plus 1 month"
  ExpiresByType application/x-font-woff   "access plus 1 month"
  ExpiresByType image/svg+xml             "access plus 1 month"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
 
# css és javascript
  ExpiresByType text/css                  "access plus 2 months"
  ExpiresByType application/javascript    "access plus 2 months"
  ExpiresByType text/javascript           "access plus 2 months"
 
  <IfModule mod_headers.c>
    Header append Cache-Control "public"
  </IfModule>
 
</IfModule>

Benjamin eredeti hozzászólása

Valaki tudna esetleg ötletet adni, mennyi időre állítsam be az értékeket, vagy hagyjam így?

Szerintem kérdezz rá külföldi fórumokon, a .htaccess az egyik legkeményebb dió, legalább is számomra.

Értem. Esetleg van WP-hez ehhez kapcsolódó plugin, ami jó is? Valahogy meg kellene határozni a fájloknak a lejárati idejét