Seo

5 módszer a webhely optimalizálására a Google oldalsebesség kritériumai szerint

2018 májusában a Google kiadta a Lighthouse 3.0-t, a weboldalak minőségének és sebességének ellenőrzésére szolgáló nyílt forráskódú eszközének frissített változatát. A Lighthouse 3.0 új kimeneti lehetőségeket kínál a jelentések számára, de számos változást is tartalmaz a webhely sebességének és teljesítményének mérési módjában, például a First Contentful Paint bevezetése teljesítmény- és sebességmérőként, valamint új súlyozások a teljesítmény-auditoknál.

ember számítógépes képpel

És 2018 májusa óta? A Google még több változtatást tett közzé. Éppen ezért megosztunk öt módszert, amellyel ma optimalizálhatja webhelyét.

Lássunk neki.

Miért érdemes most optimalizálni webhelye sebességét?

A Lighthouse tovább fejlődött az év során, mióta a 3.0 leesett. A Google a közelmúltban bejelentette, hogy dolgozik a Lighthouse platformhoz készült platformcsomagokon, amelyek révén a tesztelők sebességoptimalizálási tippeket kaphatnak, amelyek kifejezetten a webhelyükön használt CMS-re és kódkönyvtárra vonatkoznak.

Tehát ha például Angular JavaScriptet használ a WordPress-szel, akkor szerencséje van, de a platformcsomagok további változatai már fejlesztés alatt állnak a GitHub közösség segítségével.

A Google Lighthouse frissítése a Page Speed ​​Insights szolgáltatással

Képforrás

A Google fokozatosan növeli a webhely sebességének, mint keresési rangsorolási kritériumnak a jelentőségét, amióta 2016-ban először bevezette a mobil-első indexet, ezért bölcs dolog ezekre a mutatókra és trendekre figyelni. A Google körülbelül 62 algoritmus-frissítést hajtott végre az átlag során hét 2018-ban, így a jó helyezés biztosítása egyre dinamikusabb gyakorlattá válik. És tekintettel a mobil-első index viszonylagos újdonságára, valamint a webhelyek forgalmára gyakorolt ​​aránytalan befolyására, logikus, hogy az algoritmus-finomítások többsége a mobilra összpontosítana.

Talán a legerősebb érv a Lighthouse szoros szemmel tartása mellett az, hogy ez az első alkalom, hogy a Google olyan önkiszolgáló sebességmérő eszközt épített ki, amely megpróbálja megismételni a valódi webhelylátogatók által tapasztalt késleltetési időket, szemben a robotokkal.

„A Lighthouse-ból vizsgált mérőszámok nagy része elsősorban a dolgok felhasználói oldalát tekintve jelenik meg” – magyarázta John Mueller, a Webmester Trends elemzője februárban az Office Hours Hangouts kérdezz-felelek szekciójában. „A mi szemszögünkből, keresési szempontból, ezeknek a mutatóknak a széles választékát vesszük alapul, hogy kitaláljuk, milyennek kellene látnunk ezt az oldalt a sebesség tekintetében.”

Mindezeket szem előtt tartva, összegyűjtöttünk öt tippet, amelyek segítségével webhelye sebességével a Google istenei kedvében járhat.

1. Végezze el a lusta betöltést

A nagy felbontású képek jelentősen lelassíthatják webhelye betöltési idejét, valamint növelhetik a memóriát és az oldal súlyát. Kivághatja őket teljesen a webhelyéről, de szükség lehet, vagy nagyon szeretné megtartani őket. A lusta betöltés az oldal betöltési idejének felgyorsításának egyik módja anélkül, hogy meg kellene szabadulnia az erőforrásigényes tartalomtól.

lusta betöltési példa a közepestől

Képforrás

Lusta betöltés esetén egyszerre csak a weboldal egy része töltődik be – az a rész, amelyet a néző abban a másodpercben néz, így a következő rész betöltését addig halasztja, amíg a látogató le nem görget hozzá. Ez csökkenti az olyan mérőszámok eléréséhez szükséges időt, mint a First Meaningful Paint és a First Content Paint, amelyek két olyan mérőszám, amelyet a Lighthouse a webhely sebességének és teljesítményének mérésére használ.

A lusta betöltés kötelező, ha bevezette a „végtelen görgetést”, amely népszerű a nagy tartalommal rendelkező webhelyeken, de minden típusú webhelyen segíthet. Valójában a Duda webdesign platform azt találta, hogy a lusta betöltés bevezetését követően a Duda által üzemeltetett webhelyeken ezek a tulajdonok átlagosan 10 pontot értek el a Lighthouse pontszámának emelkedésében – semmi sem rázta meg a pálcát.

2. Hozza ki a legtöbbet a következő generációs képformátumokból

A lassú First Contentful Paint idők egyik legnagyobb bűnöse a képei. Az a baj, hogy ha marketingről és értékesítésről van szó, egy kép valóban többet ér ezer szónál, így jogos, ha nem szabadulna meg azoktól a tervektől, amelyek a nagy hősképeket részesítik előnyben. A lusta betöltés mellett a következő generációs képformátumok jelentik a megoldást.

A következő generációs formátumok közé tartozik a JPEG 2000, a JPEG XR és a WebP. Ezek a formátumok tömörítik és konvertálják a képeket, hogy azok jóval kisebbek legyenek, mint a hagyományos PNG-k és JPG-k, de nincs negatív hatásuk a kép minőségére. Következő generációs formátumok használatával drasztikusan felgyorsíthatja az oldalak betöltési idejét, még a nagyobb pixelmérettel rendelkező látványelemek esetében is, anélkül, hogy a képminőség rovására menne. Tekintse meg ezeket az Insane Lab adatait, amelyek megmutatták, mennyivel kisebbek a WebP-fájlok, mint a PNG-fájlok:

WebP vs PNG fájlok grafikonja

A Google különösen arra ösztönzi a webmestereket, hogy használják saját új WebP-formátumát, amelyet a Chrome és az Opera böngészők támogatnak. A WebP olyan képeket készít, amelyek 26%-kal kisebbek, mint a PNG, és 25-35%-kal kisebbek, mint a JPG formátumok.

3. Használjon tartalomszolgáltató hálózatot

A tartalomszolgáltató hálózat (CDN) nagyszerű megoldás az oldalbetöltések felgyorsítására, amely a Lighthouse 3.0 jó teljesítményértékelésének második legfontosabb mutatója.

Alapvetően a CDN olyan szerverek hálózata, amelyek szerte a világon el vannak terjesztve, és együttműködnek a tartalom továbbításában. Mivel a CDN-ben található szerverek földrajzilag szétszórtan helyezkednek el, mindig van egy, amelyik a legközelebb van szinte minden felhasználóhoz, így lerövidül az idő, amíg a tartalom eléri a böngészőjét.

CDN magyarázat

Képforrás

A CDN-ek gyakran alkalmaznak fejlett tömörítési taktikákat is, például a kicsinyítést és a fájltömörítést, amelyek elősegítik a tartalomelemek gyorsabb átvitelét, jobb tartalomelérhetőséget és redundanciát kínálva, így a nagy forgalom nem zavarja meg webhelye teljesítményét. A CDN-ek kisebb valószínűséggel fognak leállni hardverhiba esetén. A nagy tartalomban gazdag webhelyek, amelyek szupergyors betöltési időkre támaszkodnak, mint például a Netflix, a Facebook és az Amazon, CDN-eket használnak.

4. Szabaduljon meg a felesleges bővítményektől

Ha olyan webhelye van, amely WordPress-en vagy hasonló platformon fut, amely extra funkciókat biztosít beépülő modulokra, akkor ezek a beépülő modulok csökkenthetik webhelye reagálóképességét, befolyásolhatják interaktivitási mutatóit, és lejjebb húzhatják a Lighthouse 3.0 teljesítménymutatóit.

Egyes beépülő modulok létfontosságúak lehetnek webhelye számára, például a fizetésfeldolgozó, de előfordulhat, hogy mások már nem szolgálnak túl sok célt. Sok beépülő modul harmadik féltől származó szervereket kér információkért, ami tovább lassíthatja a dolgokat. A DigWP legutóbbi felmérésében több mint 900 WordPress-szakember jelölte meg azoknak a bővítményeknek a számát, amelyeket általában a „túl sok” küszöbének tekintenek, és a válaszadók 75%-a egyetértett azzal, hogy 25 a határ. A válaszadók több mint egyharmada a 10-et javasolta határként.

bővítmények listája

Az extra beépülő modulok az adatbázis felfúvódásához vezethetnek, indokolatlanul növelve a webhely súlyát, így sokkal lassabban töltődik be, tehát minél kevesebb van, annál jobb.

5. Távolítsa el a nem használt CSS-szabályokat

Webhelyének CSS-szabályait a main.css fájl határozza meg. Külső stíluslapnak is nevezik, mert a webhely HTML-kódjától elkülönítve tárolja. Ahhoz, hogy webhelye betölthesse a First Contentful Paint alkalmazást, amely nagy hatással van a teljesítményre az új Lighthouse verzió szerint, a böngészőnek először le kell kérnie, elemeznie és feldolgoznia kell minden CSS-stíluslapot, hogy meghatározza a tartalom megjelenítési módját.

Ennek eredményeként elkerülhetetlen, hogy minden extra CSS-fájl lelassítja az oldal betöltési idejét, és egy kicsit jobban befolyásolja a teljesítményt. Minden egyes fájlhoz a böngészőnek hozzá kell férnie, le kell töltenie, és csak ezután tudja renderelni az oldalt.

CSS szabályok

Képforrás

A CSS-fájlok csökkentése egy olyan beépülő modullal, mint a Fast Velocity Minify, sokat segíthet a Lighthouse-pontszámokon, de többet is tehet annak érdekében, hogy a CSS-betöltési idők ne tartsák vissza. Az összes nem használt CSS-definíció eltávolítása tovább gyorsítja a folyamatot, és leegyszerűsíti a webhely teljesítményét a jobb Google-értékelések érdekében.

A Google sebességkritériumainak követése javítja a teljesítményt

A Lighthouse 3.0 bevezetése és folyamatos fejlesztése egy újabb emlékeztető arra, hogy mennyire fontos webhelyét a Google legújabb sebességi kritériumai szerint optimalizálni. Azáltal, hogy megszabadul a CSS-szabályoktól és beépülő moduloktól, amelyekre nincs szüksége, CDN-ek és új generációs képformátumok használatával, valamint a legtöbbet hozza ki a lusta betöltésből, egyszerűsítheti webhelyét, csökkentheti az oldal betöltési idejét, és javíthatja a teljesítményt, hogy a Google rendszerében maradjon. jó könyvek.

A szerzőről

Gabrielle Sadeh tanácsadó, közösségimédia-specialista és blogger Tel-Avivban dolgozik, és hatékony digitális marketingstratégiákkal segíti a márkákat, hogy megosszák hangjukat, és bővítsék vállalkozásukat. A legjobb módja annak, hogy kapcsolatba léphessen vele a LinkedIn-profilján keresztül.

Kapcsolódó cikkek

0 Hozzászólások
Inline visszajelzések
Az összes hozzászólás megtekintése
Vissza a lap tetejére gombra