Mindannyian ismerjük a Google PageSpeed ​​Insights sebességtesztjét. Valamint megtapasztaltad, 100-as osztályzat megszerzése ezen a Google-teszten nem könnyű feladat. Valójában sok vállalat kétségbeesetten igyekszik emelni a teszt fokozatát, sok siker nélkül. A Google ugyanis meglehetősen magas követelményeket támaszt a jó pontszám szempontjából.

pagespeed

Ebben a cikkben elmondjuk hogyan lehet 100-as jegyzetet szerezni. Ezenkívül lehetséges, hogy nem egy egyszerű és alapvető weboldalon, túl sok funkció nélkül, de egy meglehetősen teljes weboldalon megtalálhatjuk: ezt a most látottat

Mi a Google PageSpeed ​​Insights teszt és mire szolgál?

A PageSpeed ​​Insights a Google által kifejlesztett eszköz, amely megmutatja egy oldal vagy egy webhely teljesítményét. Az eredményeket két részre osztjuk: a mobil verzióra (Mobile) és az asztali verzióra (Desktop). Amellett, hogy pontszámot ad a weboldalunknak, a Google megmutatja nekünk az okait, hogy miért pontoz minket ilyen módon, és egy sor tippet ad a pontszám javításához.

A Google a webhely rangsorolásakor három nagy kategóriába sorolja az optimalizálásokat:

  • Gyors web: a teszt pontszáma azt mutatja, hogy az internet a leggyorsabb oldalak felső harmadában van.
  • Normál web: a web az internet leggyorsabb oldalainak közepén található.
  • Lassú web: a web az internetes oldalak leglassabb harmadában található.

A a Google által mutatott pontszám 0 és 100 közötti érték. A 100-hoz közeli pontszám azt jelenti, hogy az oldal rendkívül gyors, és nincs mit optimalizálni. A 0-hoz közeli pontszám azt jelenti, hogy sok munkát kell elvégezni a weboldalon.

A jegyzetet illetően a Google a következőképpen osztja fel a pontszámot:

  • jegyzet jó: 80-as vagy annál magasabb pontszám.
  • jegyzet fél: Pontszám 60 és 79 között.
  • jegyzet lejön: Pontszám 0 és 59 között.

Miért fontos a gyors weboldal

A Google szerint a felhasználók 53% -a elhagy egy weboldalt, ha annak betöltése több mint 3 másodpercig tart. Vagyis, ha a webhelye nem töltődik be kevesebb, mint 3 másodpercen belül, akkor a felhasználók több mint fele egy másik webhelyre megy (és lehetséges, hogy ezt a verseny valamelyikénél megteszik).

És mintha ez nem lenne elég, a tanulmány is ezt mutatja a weboldal minden másodpercére a konverziók is csökkennek. Pontosabban, 20% -kal kevesebb konverzió minden másodpercenként.

Amellyel van egy gyors és optimalizált weboldal, ez nagyszerű felhasználói élményt nyújt a felhasználók számára. Ez pedig még sok konverziót jelent.

Ha egy weboldal betöltése több mint 3 másodpercet vesz igénybe, a látogatók több mint 53% -a elvész, és a betöltési idő minden egyes másodpercével az oldal konverziós aránya több mint 20% -kal csökken.

Forrás: Google

A weboldal sebessége nemcsak az online áruház számára szükséges. Mivel nyilvánvalónak tűnik, hogy a gyors e-kereskedelem lehetővé teszi számunkra az eladások növelését. Szükség van a vállalati weboldalakra is. Mivel minden weboldal konverzióra vágyik, akár vásároljon tőlünk, lépjen kapcsolatba velünk, vagy hívjon minket. Vagy egyszerűen, hogy hatékonyan megmutassuk, kik vagyunk vagy mit csinálunk. Mindezekben az esetekben gyors és hatékony weboldalra van szükségünk.

Tippek 100-as osztályzat megszerzéséhez a Google PageSpeed ​​Insights-ban

A Számos tényező befolyásolja a jegyzetek Google tesztbe történő felvételét. Itt bemutatunk néhány példát, amelyek segítenek az érdemjegy javításában.

Az itt részletezett összes technika a WPO része: Web Performance Optimization, vagyis a weboldalak sebességének optimalizálása.

Amikor a WPO-ról beszélünk, akkor alapvetően a web-optimalizálásról beszélünk a betöltési idő és a sebesség szempontjából. Ezek egy sor stratégia, amelyek jelenleg nélkülözhetetlenek, mivel hiába lesz nagyon vonzó a tervezés, ha a weboldalt nem optimalizálják a sebesség szempontjából.

Optimalizálja a képeket

A kép optimalizálása elengedhetetlen hogy jó minősítést szerezzen a teszten. A látni szokott alacsony hangok egyik fő oka. A képek optimalizálásának egyik legjobb technikája tömörítse őket. Ha tömöríti, átlagosan 50% -kal csökkentheti a képek súlyát.

Ha WordPress-t használ, az egyik legjobb plugin erre a WP Smush Image alkalmazással, anélkül, hogy sok időt töltenék manuálisan. Ez egy olyan plugin, amelynek számos verziója van az ingyenes verziójában.

a használata automatikus képoptimalizálási plugin Elengedhetetlen különösen azoknál a weboldalaknál, ahol több olyan kiadó van, akik rendszeresen publikálnak. Ily módon nem mindegy, hogy melyik szerkesztő tölti fel a tartalmat képekkel, mivel a plugin automatikusan optimalizálja az összes webre feltöltött képet.

Ezen felül konfigurálhatjuk a beépülő modult úgy, hogy az csak a kép maximális méreteit engedélyezze. Vagyis, ha a kép mérete nagyobb, mint az általunk megadott pixelek, akkor a plugin automatikusan átméretezi a képet.

Ha nem szeretne új plugint használni, vagy egyszerűen csak a webhelyét nem fejlesztette ki a WordPress vagy más CMS, például a Drugal, amely rendelkezik hasonló pluginnel, akkor használjon online eszközöket a képek tömörítésére és optimalizálására mint az Optimizilla vagy bármely más eszköz. Ez egy ingyenes eszköz, amely egyszerre legfeljebb 20 kép feltöltését teszi lehetővé.

Csökkentse és optimalizálja a HTML-kódot

A betöltési sebesség javításának másik tippje a HTML-kód optimalizálása lenne. Bár jól kell csinálni, mivel ha nem megfelelően végezzük, ez a művelet teljesen dekonfigurálhatja a webprojekt kezelőfelületét.

A HTML-kód tömörítése a felesleges vagy ismétlődő adatok kiküszöbölése a weboldal forráskódjában. A rosszul programozott kód okozza ezt a problémát, és a kód auditálásával megoldható.

Ismételten sok olyan beépülő modul található a WordPress számára, amelyek lehetővé teszik webhelye HTML-kódjának kicsinyítését.

Optimalizálja a CSS kódot

Egy másik fontos tényező a CSS kód optimalizálás. A CSS fájlok általában külső fájlok, amelyeket be kell tölteni.

Sokszor ezek a CSS fájlok olyan kódot tartalmaznak, amelyet valójában nem használnak az oldalak. Ha egy oldal csak 10% kódot használ egy CSS fájlból, akkor valójában feleslegesen tölti be a fennmaradó 90% -ot abból a fájlból.

Az első tennivaló:

  • Elemezze, milyen kódot és/vagy CSS fájlokra valóban szükség van
  • Hibaelhárítás a kódot hogy megpróbálja lefogyni a súlyát
  • Sok esetben, közvetlenül illessze be a CSS kódot HTML kódban érvényes opció lehet

Optimalizálja a JavaScript (JS) kódot

Többek között, A JavaScript lehetővé teszi hatékony funkciók és interaktív oldalblokkok engedélyezését. A probléma az, hogy ezek a szkriptek nagyon lelassítják a weboldalt, és vigyáznod kell, nehogy túl sok mindent visszaélj velük.

Az első tennivaló ellenőrizze a weboldalt, és távolítsa el az összes JavaScript-kódot ez nem szükséges a weboldalunkon támasztott követelményekhez. Ha már csak az alapvető szkriptek állnak rendelkezésünkre, alkalmazhatjuk ezt a 3 tippet:

  1. A nem kritikus fontosságú szkripteknek azoknak kell lenniük utólag feltöltve, ahelyett, hogy először betöltenék.
  2. Töltse be az összes külső JavaScript fájlt aszinkron, inkább szinkron módon. A szinkron módon betöltött szkriptek szüneteltetik az oldalmegjelenítési folyamatot, míg az aszinkron módon betöltött szkriptek lehetővé teszik a böngésző számára, hogy egyszerre több elemet töltsön be.
  3. Megfontolni tegyen néhány JS-funkciót (sorba) maga az oldal. Ez lehetővé teszi számunkra, hogy csökkentse a böngészője által benyújtandó kérelmek számát.

A szerver optimalizálása (tárhely)

Talán ez az egyik legfontosabb szempont, amelyet figyelembe kell venni a sebesség szempontjából. A szerver, ahol webprojektünket tároljuk, létfontosságú.

A szerver válaszideje közvetlenül befolyásolja a Google PageSpeed ​​Insights pontszámát. Ez a válaszidő a Google szerint számos tényező szerint lelassulhat:

  • Az adatbázis lekérdezéseinek száma
  • Lassú útválasztás
  • Bizonyos keretek használata
  • Bizonyos könyvtárak használata
  • Alacsony CPU erőforrások
  • Alacsony RAM-erőforrások

Ezen tényezők mellett nagyon fontos, hogy egy jó rendszergazdával rendelkezzen a tárhelyünk kezeléséhez. Így konfigurálhatja és telepítheti azokat a szoftvereket, amelyek lehetővé teszik az internet sokkal gyorsabb betöltését. Például statikus és dinamikus gyorsítótár-rendszerek felhasználásával.

A Kiwopnál optimalizáljuk a szervereket az Nginx, a Varnish, a Redis Server, a memcache stb. Használatával.

Már azt mondják, hogy az olcsó drága. És igaz, hogy az olcsó tárhely nagyon költséges lehet az optimalizálás és a websebesség szempontjából.

Figyelje a külső beépülő modulok használatát

Mindenekelőtt, ha WordPress-t használunk, éberen kell figyelnünk a külső beépülő modulok használatára. A Kiwop-nál minden új funkciót, amelyre egy webfejlesztés szükséges, már jóval a megvalósítás előtt elemeznek. Ahelyett, hogy minden új követelményhez új külső beépülő modult használnánk, lehetőség szerint testre szabjuk. Mivel amikor mérésre programozzuk, akkor csak azokat a funkciókat vesszük figyelembe, amelyekre valóban szükségünk van. Másrészt a külső beépülő modulok sok olyan funkciót tartalmaznak, amelyekre nincs szükség, és ami késlelteti az oldal betöltési idejét.

A tartalom rangsorolása az oldal tetején

Bár furcsának tűnik, az oldal sebessége nem csak attól függ, hogy milyen gyorsan töltődik be. Ez az észlelt teljesítményhez is kapcsolódik. Az észlelt teljesítmény úgy határozható meg, hogy "milyen gyorsan töltődik be egy web". Ez eltérhet a tényleges töltési időtől. Az észlelt teljesítmény a felhasználó perspektívájához kapcsolódik.

Ennek az észlelt teljesítménynek a fontossági sorrendbe állítása szempontjából nagyon fontos a felhasználó számára fontos tartalom rangsorolása. Például az oldal tetején lévő szöveget a lábléc előtt kell betölteni. Egy rosszul programozott webhely elkezdhet olyan funkciókat és láblécblokkokat betölteni, amelyeket a felhasználó első látásra nem lát.

Végezze el az AMP-t

Az AMP a Google által létrehozott technológia, amely sokkal gyorsabb oldalbetöltési élményt kínál a mobileszközökön. Az AMP korlátozza a HTML és a JS használatát, jelentősen növelve az oldalak sebességét és mellesleg, helyzetének javítása.

Az AMP alkalmazása lehetővé teszi számunkra a Google Page Insights pontszámának növelését, különösen mobileszközökön. Bár ez egy olyan technológia, amelyet nagyon körültekintően kell fejleszteni, mivel teljesen dekonfigurálhat minden weboldalt.

Az AMP technológia szakértői vagyunk. Valójában a teljes weboldalunk érvényes AMP:

Milyen osztályzatot kaptunk Kiwopért a Google tesztben

Az összes elméleti tanács után, amelyet neked adtunk, feltételezzük, hogy ami igazán érdekel, az az, hogy tudjuk, működnek-e ezek a tippek. Igen, működnek. Kiwopban kapunk néhányat a mobil verzióban a 89-es, az asztali változatban a maximális, a 100-as megjegyzés a Google PageSpeed ​​Insights szolgáltatásban. Nem hiszed el? Itt van a teszt az asztali verzióban:

És itt megmutatjuk a mobil verzióban megszerzett érdemjegy igazolását is, mivel a legtöbb ember mindig elfelejtette megjeleníteni ezt a jegyzetet, mivel az sokkal alacsonyabb, mint az asztali verzió megjegyzése:

Tedd meg magad a tesztet: menj a Google PageSpeed ​​Insights oldalra, az URL mezőbe írd be a https://www.kiwop.com oldalt, és a saját szemeddel látni fogja 🙂

Szeretné, hogy a Kiwop optimalizálja webhelyét a Google teszt pontszámának javítása érdekében? Figyelmeztetnünk kell, hogy ha ugyanazokkal a jegyzetekkel szeretne rendelkezni, mint mi, akkor új weboldalt kell terveznünk Önnek.

Következtetések

Bizonyára rengeteg erőfeszítést tett (időben és erőforrásokban) a webhelye fejlesztése érdekében. Amellyel azt szeretné, hogy a lehető legtökéletesebb legyen. A nagy sebesség pedig fontos tényező.

A Google teszt mellett vannak más oldalak is, amelyek lehetővé teszik az oldalunk sebességének felmérését, például a GTMetrix (a megjegyzés a PageSpeed ​​és az YSlow kombinációja) vagy a WebPageTest. Mindkét tesztben oldalunk is kiváló eredményeket ért el:

Amint láttuk, minden képet, elemet stb ... figyelembe kell venni a jó osztályzat megszerzésénél. Ezért fontos, hogy szakértő fejlesztők legyenek a weboldal fejlesztésekor.

Ha eléri a 100-at a Google PageSpeed ​​Insights sebességteszten, akkor lendületet adhat a webhelyének ahhoz, hogy sikeres legyen. A Kiwop-nál szívesen segítünk!