Google PageSpeed Insights Hogyan optimalizálhatjuk a képeket
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.
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.
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