weboldalunk

A PageSpeed ​​Insights egy Google-eszköz egy weboldal betöltési sebességének elemzésére és értékelésére, és ami a legfontosabb, nagyon hasznos sorozatokat is kínál javaslatok Y kapcsolódó eszközök ennek a rakodási sebességnek a javítása érdekében.

Weboldalunk terhelésének és megvalósításának értékeléséhez a Page Insights a bevált gyakorlatok ezen dokumentumán alapul, amely kiterjed mind a kezelőfelület szintjére (képek, JavaScript fájlok, CSS betöltése stb.), Mind a szerver konfigurációjára.

Nagy vonalakban és anélkül, hogy sok részletességgel foglalkoznánk, e jó gyakorlatok céljait főként a következő háromban foglalhatjuk össze:

  • Minimalizálja az előforduló HTTP kérések számát,
  • Csökkentse a válaszok méretét ezekhez a HTTP-kérelmekhez,
  • és optimalizálja az oldal megjelenítését a böngészőben.

A PageSpeed ​​elemzi a weblistánkat és hozzárendel a központozás vagy pontszám 100-ból, amely azt értékeli, hogy mennyivel gyorsabb lehet a weboldal betöltése. A nagyon magas, 100-hoz közeli pontszám azt jelzi, hogy kevés fejleszteni való van (vagyis az oldal már olyan gyorsan betöltődik, amilyen gyorsan csak tud, vagy közel van hozzá), míg az alacsony pontszám azt jelzi, hogy jó néhány fejlesztést megtehetünk. Fontos megjegyezni, hogy ez a pontszám igen relatív arra az oldalra, amin éppen vagyunk, vagyis nem az oldal betöltéséhez szükséges idő alapján érkezik, ha nem az alapján, hogy hány jó gyakorlatok mielőtt kommentáltuk, követtük és végrehajtottuk.

A PageInsight-ot online szolgáltatásként használhatjuk, ha megadjuk az értékelni kívánt oldal URL-jét:



Ezenkívül egy nyílt forráskódú bővítmény elérhető a Chrome fejlesztői eszközök számára a Chrome böngészőben, valamint a Firebug számára is azok számára, akik hűek maradnak a Firefoxhoz. Ebben a cikkben a bővítményre fogunk alapozni Chrome fejlesztői eszközök Mac-en, de a művelet gyakorlatilag minden verzióban megegyezik.

A Chrome Developer Tools kiterjesztés használata

A bővítmény telepítése után, a weboldalunk megnyitásával a Chrome-ban, először a Chrome Dev Tools programot nyitjuk meg:


Eszközök -> Fejlesztői eszközök vagy Ctrl + Shift + I (Mac-en: ⌥⌘I)

Amint megnyílik a felület, látni fogjuk, hogy megjelenik egy új PageSpeed ​​fül, amelyen cselekvésre ösztönzést találunk:

Ha rákattint bármelyik piros elemzésre vagy az elemzés megkezdésére szolgáló gombra, az oldalunk újratöltődik, és rövid elemzés után egy pontszámtól kezdve megmutatjuk az elemzés eredményeit. PageSpeed ​​Score amely értékelni fogja azokat az intézkedéseket, amelyeket webhelyünkön a rakodási sebesség javítása érdekében végrehajtottunk.

Megvalósítás: A rakodási sebesség javítása lostiemposchange.com

Házának esetében lostiemposchange.com Eleinte a következő értékelést kaptuk:


Kezdeti PageSpeed ​​pontszám lostiemposchange.com: 86 (összesen 100-ból)

Pontszám: 86 pont a 100-ból lehetséges egyáltalán nem rossz, de nyilván sok mindenen kell még javítanunk.

Szerencsére a bal oldalon a javaslatok listája hogy a plugin felajánlja számunkra a betöltési sebesség javítását. Ezek a javaslatok 3 színben kategorizálva jelennek meg: piros, sárga és kék, ahogy figyelembe veszi őket Magas prioritás, Közepes prioritású Y Alacsony prioritású illetőleg. Ezenkívül minden egyes javaslatban részleteket kapunk arról, hogyan tudjuk megvalósítani azt weboldalunk adott esetben.

Nyilvánvaló, hogy először meg kell próbálnunk alkalmazni a következőként megjelölt javaslatokat: Magas prioritás piros színnel, mivel ezek jelentik a legnagyobb hatást a rakodási sebességre. A helyes gyakorlatok, amelyeket már helyesen alkalmaztunk, zöld színnel jelennek meg és kevésbé hangsúlyosak.


A bal oldali panelen a PageSpeed ​​Insights javaslatokat ad arra, hogyan javíthatnánk weboldalunk betöltési sebességét

Elemezzünk néhányat ezekből a javaslatokból és hogyan lehet ezeket megvalósítani az oldalunkon példaként véve esetünket lostiemposchange.com, természetesen különös hangsúlyt fektetve a legfőbb prioritásra, de a legegyszerűbbre is figyelve, és hogy kevés erőfeszítéssel azonnali javulást eredményezhet a weboldal betöltési sebessége.

Magas prioritás

  • Használja ki a böngésző gyorsítótárának előnyeit

Kényelmes megakadályozni, hogy a böngésző olyan statikus erőforrásokat (például képeket) kérjen, amelyek már rendelkeznek letöltésekkel a korábbi látogatások során (más néven gyorsítótárban). Ezért elengedhetetlen az attribútumok értékeinek hozzáadása lejárati dátum vagy maximális életkor ezen elemek válaszainak HTTP fejlécében a jövőben bizonyos távolságú értékekre, hogy a böngészőnek szóljon, hogy használja a gyorsítótárazott verziót.

A Keep-Alive aktiválása

A Keep-Alive az Apache szerverek nagyszerű tulajdonsága, amely lehetővé teszi a szervernek és az ügyfélnek, hogy egyetlen HTTP-kérést tárgyaljon meg több erőforrás átvitele helyett erőforrásonként új kérést nyit meg. Könnyen belátható, hogy ez nagyon jól illeszkedik a HTTP kérések számának minimalizálására irányuló célunkhoz.

Mivel Ön a fenti javaslat, és ez a javaslat a következőktől származik szerver konfigurációja, a használata esetén apache szerver A weboldalunkon található .htaccess fájl módosításával konfigurálhatjuk őket. Például ezeket az irányelveket adtuk hozzá a szerveren a timeschange.com .htaccess fájlhoz, hogy mindkét javasolt funkciót megvalósítsuk:

Közepes prioritású

  • Képek egyesítése CSS Sprites-be

A szerverre is menthetünk kéréseket, ha ahelyett, hogy a CSS-ben felhasznált képeket egyenként háttérként töltenénk be, egy Image Sprite-be egyesítjük őket, és később a megfelelő részt CSS-kód szerinti áthelyezéssel mutatjuk meg. Ez a technika nem minden képre alkalmazható, és attól függ, hogy a CSS-szerkezet hogyan áll össze, attól függően, hogy ezeket a képeket vízszintesen vagy függőlegesen ismételjük-e, a képtartály mindig azonos méretű lesz-e, vagy annak tartalmától, stb.

Szerencsére a mi esetünkben losttimechange.com Felbecsülhetetlen támogatást kaptunk a nagyszerű Eli Padillától, a CSS minden dolgának tanárától, és négy olyan kis háttérképet sikerült csoportosítanunk, amelyekből a PageSpeed ​​azt jelezte, hogy egyenként vannak feltöltve, és egy ilyen Spritesheetbe illesztettük őket:


Spritesheet példa átlátszó háttérrel és kombinált elemekkel: a keresés gomb be- és kikapcsolt állapota, valamint az egyes üzenetek láblécében és a törzsben található listák felsorolási pontjai.

A be/ki állapotú gomb esete könyv, példa erre a technikára, túl sok bonyodalom nélkül. Az elemek golyóihoz A felsorolásokból az volt a bonyodalom, hogy a tartalom különböző magasságú lehet, ezért az eltolás az egyik és a másik között a spritesheet-ben.

A CSS módosításait illetően a kódot Image Sprite nélkül az eredeti ilyen volt:

És a CSS kód Sprite képpel így nézne ki:

És most ezekbe a CSS-szabályokba csak az image/sprites.png van betöltve, így négy HTTP-kérést egyre csökkentettünk.

Természetesen a PageSpeed ​​nem veszi figyelembe a CSS-ek vagy a tartalmunk struktúráját, ezért továbbra is javasolja a képek egyetlen Sprite-ben történő egyesítésének lehetőségét, még akkor is, ha nincs módunk kombinálni őket, vagy ha még nincs is ellenőrzés felettük, mivel külső webhelyektől függenek Twitter, Facebook, WordPress stb. Források kiszolgálása konzisztens URL-ről

A probléma itt az, hogy pontosan ugyanazt a statikus tartalmat szolgáltatjuk, de két különböző URL-ről töltjük be. Ez nagy hiba, mivel a böngészőnek két kérelmet kell benyújtania ugyanazon erőforráshoz, vagyis mindig tesszük egy kérés és több adatterhelés és nem kevesebbet spórolhatnánk meg, mint 68,7KiB, nem elhanyagolható súly.

Számunkra sajnos a "bűnös" petíciókat tanulmányozva azt látjuk, hogy azok a következők:

  • http: //platform.twitter.com/…/follow_button.1363148939.html és:
  • https: //platform.twitter.com/…/follow_button.1363148939.html

Úgy tűnik, hogy a tettes a nyomógomb a twitter widget! A Twitter egyik programozója használt egy webhelyet http és egy másikban https és ez a javaslat ebben az esetben süket fülekre fog esni.

Alacsony prioritású

Az összes következő pont kevésbé kritikus, mint a fent tárgyaltak, de sok közülük nagyon könnyen megoldható, ezért érdemes tanulmányozni. Minden homokszem számít!

    Optimalizálja a képeket

A PageSpeed ​​elemzi, hogy a kiszolgált képek jól vannak-e optimalizálva, és figyelmeztet bennünket, melyeket lehet tömöríteni, hogy kisebb súlyúak legyenek, nyilván veszteségmentes tömörítéssel, hogy ne veszítsünk el egy csomó minőséget.

A .bővítmény használatának előnye Chrome Dev Tools Az online szolgáltatás helyett az is az, hogy ha a kép optimalizálható, maga a PageSpeed ​​tömöríti és felajánlja nekünk letöltésre (kissé rejtve van, a link alatt megtalálhatjuk) lásd az optimalizált tartalmat). Bár erre vannak programok és webalkalmazások, a PageSpeed ​​valóban kényelmes, mivel azonosítja a sértő képet, és egyúttal már optimalizálva kínálja nekünk, anélkül, hogy további részünkre lenne szükség.

A lostiemposcambian.com oldalán található összes kép optimalizálása után azt tapasztaljuk, hogy néhányuk ismét nem áll rendelkezésünkre, mivel WordPress vagy Twitter.

Csökkentse a CSS és a JavaScript fájlokat

Mindig minimalizálnunk kell a CSS fájljainkat és a JavaScripteinket a gyártás során, hogy azok a lehető legkevesebb helyet foglalják el. Ahogy a képeken láthattuk, abban az esetben, ha CSS- és JavaScript-fájljaink minimalizálhatók, a PageSpeed ​​felajánlja, hogy töltsön le egy minimalizált fájlt, amelyet a gyártás során pótolni lehet. Nagy! 🙂

Kis CSS/JavaScript töredékek beillesztése külső fájlok helyett

Minden további fájl még egy HTTP kérést jelent. Nagyon kicsi fájlok esetében ennek a további kérésnek a költsége túlsúlyos a súlyukhoz képest, ezért be kell építenünk őket más CSS-be vagy JavaScript-be, vagy akár ugyanabba a HTML-fájlba. Az előzőekhez hasonlóan ez sem mindig függ tőlünk teljesen (WordPress, Téged nézlek!)

Kerülje a rossz kéréseket

Természetesen egy olyan kérés, amely a család HTTP állapotával végződik 4xx (kliens hiba) egy elpazarolt kérés. A leggyakoribb általában az 404 (erőforrás nem található) és ha ezek közül egy vagy több van, akkor kényelmes manuálisan javítani, eltávolítani vagy javítani.

Adja meg a képek méretét a HTML-ben

Mindig meg kell adnunk a képek méretét a címkén a szélesség és magasság attribútumok segítségével. Ennek az az oka, hogy különben a böngésző nem fogja tudni ezeket a méreteket, amíg a kép be nem töltődik, és ezért két átadást tesz az oldal tartalmának megjelenítéséhez: az egyik a kép betöltése előtt, a másik pedig azután, mivel az elrendezés a kép alapján teljesen megváltozhat méret.

Ha valamilyen esetben kihagyás vagy emberi tévedés miatt nincsenek meg ezek az attribútumok, a PageSpeed ​​megmondja nekünk, hová kell felvenni őket és milyen értékekkel kell rendelkezniük a nagyobb kényelem érdekében.

A képeket a megfelelő méretben tálalja

Az előző ponthoz kapcsolódóan fontos, hogy képeinket megfelelő méretben, a HTML-ben szereplő méretekkel megadva tálaljuk, hogy ne maradjon a böngésző feladata kép átméretezése. Olyan méretű képeket kell kiszolgálnunk, amelyekig meg fognak jelenni, mivel ha nem kényszerítjük a böngésző renderelő motorját extra munkára, és feleslegesen több bájtot is betölthetünk, ha a ténylegesnél kisebb képet mutatunk van.

E blog esetében a emberi hiba néhány méretet hibásan adtunk meg, és néhány képet átméretezett a böngésző. Nagyon nehéz hibát észlelni a PageSpeed ​​használata nélkül, mivel a rossz képek szabad szemmel tűntek rendben.

Miután ezeket a lépéseket végrehajtottuk, ellenőrizhetjük, hogy ha ismét futtatjuk a PageSpeed ​​Insights elemzőt, akkor azt látjuk, hogy a webhelyen 100-ból 86-os kezdeti pontszámot értünk el lostiemposchange.com megy egy kiemelkedő 100-ból 95 otthonra, és az egyes bejegyzések 100-ból 90-95 körül is lebeg. Az új szerverkonfigurációnak köszönhetően az ismétlődő látogatók profitálnak a legjobban, de az új látogatók javulást is észrevesznek a HTTP-kérelmek számának általános csökkenése és a feltöltött fájlok (optimalizált képek és CSS-fájlok, valamint JavaScripts) tömegének köszönhetően. minimalizálva).

Összefoglalva: egy csodálatos eszköz, amelyet teljesen ajánlunk a webfejlesztőknek és a webmestereknek, mivel ez jelentősen javíthatja weboldalunk betöltési sebességét. Biztosak vagyunk abban, hogy a felhasználók (ebben az esetben Ön, kedves olvasók) mindannyian köszönetet mondanak nekünk miliszekundum Y byte hogy megkaparjuk a HTTP kéréseket és az oldalak betöltési idejét! 😉