Ezzel a bejegyzéssel kezdem a hozzászólások sorozatát WPO hogy lássuk, hogyan javíthatjuk a pontszámunkat Google PageSpeed ​​Insights a WordPress-ben.

insights

A WPO (Web Performance Optimization) a technikák vagy intézkedések összessége bármely szinten javítsa weboldalunk teljesítményét és betöltési sebességét. Ezért javítani fogjuk a felhasználói élményt (UX) és a SEO-t, mivel a betöltési sebesség kulcsfontosságú tényező, amelyet a keresőmotorok figyelembe vesznek.

Számos eszköz képes mérni a webhely sebességét. Ebben a 7 bejegyzésből álló sorozatban fogunk beszélni Google PageSpeed ​​Insights és hogyan lehet megoldani WordPress néhány legfontosabb pontja.

Erre egy példát fogunk használni. Létrehoztam egy alap HTML-t, amelyet tesztként használtam, amely tartalmaz vagy betölt:

  • 2 betűtípus a Google Fonts-ból
  • Bootstrap, FontAwesome, egyéni stíluslap
  • jQuery
  • Egy kép a testen és egy az oldalsávon
  • Egy nagyon egyszerű fejléc és törzs, az ipsum lorem 5 bekezdésével

A legrosszabb esetben magamra helyeztem:

  • Minimálás nélkül töltem be a CSS-t és a JS-t
  • A jquery-3.1.1.js és a bootstrap.js a fejben van
  • A tartalmi kép mérete 6016x3384px, súlya 25,3 MB
  • Az oldalsáv képének mérete 2048x769px, súlya 1 MB
  • A .htaccess-ben nincs semmi

Ezzel a panorámával a PageSpeed ​​eredménye a következő

Ebből a forgatókönyvből kezdjük látni, hogyan lehetne javítani a PageSpeed ​​Insights pontszámainkon.

Optimalizálja a képeket

Magától értetődik, mennyire fontos ez a pont a betöltési idő javításában. Egyszerű, minél nagyobb a képünk súlya, annál lassabban töltődik be az internet, nincs több rejtély.

A problémát tovább súlyosbítaná a weboldalunkon található nem optimalizált képek. Ezt az üzenetet adja vissza a Google teszt:

Optimalizálja a képeket
A képek megfelelő formázása és tömörítése nagyszámú bájt adatot takaríthat meg.
Optimalizálja ezeket a képeket a méretük 996,2 KB-os csökkentésével (99% -os csökkentés).
• A https://mydomain.com/img/vialactea2.jpg fájl tömörítésével vagy méretének módosításával 996,2 KB-ot (99% -kal kevesebbet) takaríthat meg.

Google PageSpeed ​​Insights

A 25 megabájtos kép olyan nehéz, hogy nem is elemzi. Kétféle módon optimalizálhatunk egy képet: méret és minőség.

Optimalizálja a kép méretét

Amikor egy kép méretének optimalizálására utalunk, akkor azt kell értenünk, hogy gondolkodnunk kell a valós helyről, amelyet a weboldalunkon elfoglal. Nagyon csábító letölteni a teljes minőségű képet a reflex kameránkról és feltölteni közvetlenül az oldalunkra, de ez megöli a teljesítményünket.

A példában 6016 pixel szélességű képet használunk, amikor a tároló csak 848 képpont. Ugyanez történik az oldalsávon, a kép 2048 pixel, az oldalsáv szélessége 263px.

Sokkal nagyobb képeket használunk, mint amire valójában szükségünk van. Ha az internetre való feltöltés előtt képszerkesztővel szerkesztjük és a tervünk méretéhez méretezzük, akkor jelentős méretjavulást érünk el:

  • 1. kép, 6016x3384px és 25,3 MB 848x477px-ig és 432 KB
  • 2048x769px és 2. kép 1 MB 263x99px-nél és 46 KB

Optimalizálja a képet minőségben

Miután tisztában vagyunk azzal, hogy a méret számít, a következő dolog a kép minőségének optimalizálása. A Google PageSpeed ​​azt ajánlja nekünk:

  • A PNG fájlok szinte mindig jobbak a GIF fájloknál, bár csak részben kompatibilisek néhány régebbi böngészőverzióval. Ma ez már nem jelent problémát, hacsak nincs számítógépe Windows 98 és Internet Explorer 6 rendszerrel, ideje lenne visszavonulnia.
  • Használjon GIF fájlokat nagyon kicsi vagy egyszerű grafikákhoz (például 10 x 10 pixelnél kisebbek, vagy 3 színnél kevesebb színpalettával) és animációkat tartalmazó képekhez.
  • Használjon JPG fájlokat az összes fotóstílusú képhez.
  • Ne használja a BMP vagy a TIFF fájlokat.

Olyan eszközök használatával, mint Photoshop optimalizálhatjuk képeink minőségét az opcióval Mentés webre. Ez az opció optimalizálja a tömörítést, és eltávolítja azokat a metaadatokat és megjegyzéseket, amelyek miatt a képnek esetleg csökkentenie kell a súlyát. Például a képek a következők lennének:

  • 1. kép 432 KB nak nek 86,4 KB
  • 2. kép 46 KB nak nek 8,67 KB

Használhatunk olyan beépülő modulokat is, amelyek segítenek ebben a tömörítési feladatban, például a WP Smush, az EWWW Image Optimizer vagy az Imagify. Konfigurálhatjuk őket úgy, hogy egy kép automatikus feltöltésekor a multimédia könyvtárba automatikusan optimalizálva legyenek.

Olyan sok WP Smush, Mit EWWW Image Optimizer és hogyan Képzelje el Ingyenes verziójuk van, korlátozott, de sok esetben elegendő lehet.

Fizetett verzióval is rendelkeznek, ha az Ön igényei vagy a képfeltöltési mennyiség nagyon magas (további információkért ellenőrizze az egyes verziók jellemzőit az egyes bővítmények hivatalos oldalán).

Összehasonlítottam a 3 plugint az ingyenes verziójuk felhasználásával, referenciaként figyelembe véve a medve és az eperfa ezt a képét, figyelembe véve, hogy a forráskép JPG maximális minőségben készült (photoshop-tal készített), néhány arány 1024x768px és súlya 817 KB.

Az eredmény a következő:

Bővítmény mérete
WP Smush154 KB
EWWW Image Optimizer154 KB
Képzelje el a Normálat154 KB
Képzelje el Agresszív133 KB
Képzelje el az Ultra-t104 KB

Mint látható, bármelyik esetben figyelemre méltó a csökkenés. A. Ingyenes verziójában WP Smush Y EWWW Image Optimizer veszteség nélküli tömörítést alkalmaznak, vagyis veszteség nélküli tömörítést alkalmaznak. Mintha a Normal opciót választaná a Képzelje el. Ez a bővítmény lehetővé teszi a képek tömörítését is veszteséges tömörítéssel, ha az Agresszív lehetőséget választja, és a legerősebb tömörítési módszerünket veszteséges algoritmus segítségével, ha az Ultra lehetőséget választja.

A PageSpeed ​​szűrő azonban nagyon nehéz, és bizonyos esetekben figyelmeztetést kaphatunk arra, hogy vannak olyan képek, amelyek tovább optimalizálhatók. Olyan trükk, amelyet nem sokan ismernek: átadhatja a PageSpeed ​​tesztet, és a végén talál egy linket, ahonnan letöltheti az oldal optimalizált képét, JavaScript és CSS erőforrásait

A képek talán azok az elemek, amelyek leginkább befolyásolhatják a web súlyát és betöltési idejét. Optimalizálásuk valami alapvető és szerencsére könnyen elérhető, figyelembe véve a posztban látottakat.

A fő képet 25,3 MB-ról 86,4 KB-ra csökkentettük, vagyis csökkentettük a súlyát!294 alkalommal!

Hasznosnak találta ezeket az információkat?

Ha ez a bejegyzés megoldott egy problémát az Ön számára, vegyen nekem egy kávét vagy egy sört. Ezzel a kis mozdulattal arra biztat, hogy folytassam az írást.

Ön is érdekelheti

Ezzel a bejegyzéssel kezdem a Gitről szóló cikksorozatot. A cél egy könnyű és átfogó útmutató létrehozása a Git egyszerű megtanulásához ...

Valószínűleg gondatlanság vagy feledékenység miatt, esetleg a rohanás miatt nem hoztak létre kiemelt képet egy bejegyzésben. Mi van ha…

Korábbi bejegyzéseinkben láttuk, hogy mit tehetünk a WP-CLI-vel. Az egyik legnagyobb erénye az, hogy létrehozhat saját parancsokat végrehajtására ...

1. Telepítés és az első lépések2. A WordPress, valamint az első lépések és konfigurációk telepítése 3. Munkák posztokkal4. Munka a felhasználókkal 5. Munka az adatbázissal 6. Keresés ...