A mobil web súlyproblémája van. Túl sok mobil webhely lassan töltődik be, és felesleges harangokkal és fütyülettel puffad, ami rossz felhasználói élményhez vezet.
A bűnösök főszereplői a képek, amelyek – amint ezt a sorozat 1. részében láttuk – Hogyan optimalizálhatja mobil webhelyének sebességét? , A teljes oldal súlyának 68% -át teszi ki. Aztán a 2. részben megnéztük Hogyan csökkenthető a képek hatása A mobil webhelyének sebességével kapcsolatban, beleértve azt is, hogy hogyan biztosítható legyen a képek elérhetősége, amennyire lehet. Ez többnyire az olyan értékek eltávolítására összpontosított, amelyek nem adnak hozzáadott értéket, és hogy azok, amelyekkel dolgozik, keményebben dolgoznak.
De hogyan biztosíthatja, hogy a mobil webhelyén lévő képek könnyűek, eszközre érzékenyek legyenek és a legjobb formátumot használják a sebesség és a minőség kombinálásához? Ez az oszlop a mobileszközökről készült képek optimalizálására összpontosít, beleértve a válaszidős képeket és más okos módszereket a mobil felhasználói élményt megrongáló képek leállítására.
A képoptimalizálás kiegyenlítő hatása
A képoptimalizálás problémája az, hogy nincsenek kemény és gyors szabályok. A képoptimalizálás mindig gondos mérlegelési aktus lesz a felhasználói élmény, a vonzerő és az oldal teljesítménye között.
Raluca Budiu , A Nielsen Norman Group kutatási igazgatója elmagyarázza:
“Mivel a képernyő kicsi a mobilon, túl kicsi képek túl kevés információt kínálnak, és a túl nagy képek lassíthatják az oldalt. Azt javasoljuk, hogy szerény méretű képet kezdjen, és lehetővé teszi az emberek számára, hogy nagyítson (vagy töltsön le nagyobb képet a képről).
Az óriási képek nagy része nem jó ötlet – az információs sűrűségük alacsony, és arra van szükségük, hogy az emberek várják az oldal betöltését és / vagy lefelé görgetését több tartalomhoz. Ez egy gyakori probléma az érzékeny egyoszlopos tervekkel kapcsolatban: mivel a képeket fel kell tölteni az egész konténer szélességén, gyakran hatalmas képeket találunk, amelyek kis mérethez képest kevés információt hordoznak. ”
Nincs beállítva a kék szabály arra vonatkozóan, hogy milyen kicsi a mobil kép – ez a kompromisszum a minőség és az oldal mérete között. De jó iránymutatás az, hogy összehasonlítsa a 100 legnépszerűbb webhelyet. Alapján httpArchive , Az átlagos JPG 29KB és az átlagos PNG 16KB.

A kép súlyának csökkentése részben arról szól, hogy a kép megfelelő méretben és felbontásban (képpontok száma) és részben a kép tömörítésével menthető. Bizonyos kreatív eszközök, például a Photoshop, némi tömörítést biztosítanak, de gyakran nem elégek, különösen nagyobb képformátumokkal, például PNG-vel.
Számos olyan eszköz létezik, amelyek nagyon hatékonyan tömörítik a képeket egyenként vagy egy képsorban. Például a fenti homepages képet tömörítették TinyPNG Ami 79% -os súlycsökkenést eredményez.
A vezető tömörítőeszközök összehasonlításához lásd: GitHub .
Használhat különböző méretű képeket a mobil, a táblagépen és az asztalon?
A mobil, táblagépek és asztali számítógépek külön honlapokon történő elkészítésénél – függetlenül attól, hogy az egy adott URL-en keresztül (site.com és m.site.com) vagy különböző webhelyeket szolgáltat-e egyetlen URL-en keresztül (adaptív webdesign) – implicit, hogy a képeket Megfelelően méretezve az adott kategória legnagyobb eszköze számára.
A pozíció talán kevésbé egyértelmű a megfelelő webes tervezéssel (RWD). Az RWD használatával az elv ugyanazt a weboldalt használja a különböző eszközökön, a CSS használatával formázza meg a tartalmat az eszköz tulajdonságai és a képernyőméret szerint.
Ez azonban nem jelenti azt, hogy a weboldalaknak feltétlenül egyforma méretűnek kell lenniük a képekhez való minden megközelítésben, magyarázza Alex Painter , Az NCC Group webes tanácsadója:
“Az oldalak gyakran lassúak a mobilon, mert a képport megfelelően méretezik. A felelősségteljes tervezés népszerűsége részben hibáztatható – az az elképzelés, hogy ugyanaz a tartalom visszafordítható, így az elrendezés bármelyik nézetablakban működhet, elfedi azt a tényt, hogy a képeket nem optimalizálták mobilra.
Rengeteg webhely ugyanazokat a képeket jeleníti meg az asztalon, mint a mobilon. A mobil verziók csak lecsökkentek, hogy illeszkedjenek. Ez nem feltétlenül nyilvánvaló a gyors és megbízható hálózatok csúcskategóriás eszközeinek végfelhasználók számára. Azonban a weboldalakat teljesen használhatatlanná teheti az alacsonyabb méretű telefonok vagy rossz kapcsolatok miatt.
Ennek két oka van, amiért ez nagy probléma. Az első egyszerű – csak hosszabb idő telik el, hogy feleslegesen nagy képet kapjon a hálózaton. A második gyakran figyelmen kívül hagyható: a mobileszköznek keményen kell dolgoznia a) dekódolni és b) lecsökkenteni a képet. Ez drága a feldolgozó erő és a memória szempontjából. ”
De ez nem így van. Segített részben a Képes képek közösségi csoportja , a HTML specifikáció Most már megkönnyíti a fejlesztők számára, hogy több különböző típusú eszközt készítsenek különböző képméretekben – a különböző képernyőméretek (nézetablon), felbontások (képpontok száma) vagy eszköz-képességek szerint.
A weboldal HTML megmutatja a böngészőnek, hogy melyik kép közül válassza ki a képernyő maximális szélességét, és ha a kép a képernyő szélességének egészét vagy csak egy részét veszi fel.
Korábban néhány fejlesztő a JavaScript használatával határozta meg a különböző képek használatát, de a HTML kép> elem használatának hatékonyabbnak kell lennie, csökkentve az extra kódot és kéréseit, amelyek lassítják az oldal betöltési idejét.
Alex Painter:
“A jobb oldali kép a nézetablakhoz képest most meglehetősen egyszerű. A CSS médiakérdéseket már régóta használunk a háttérképekhez, de a legutóbbi időkben a HTML-ben hivatkozott képek problémát jelentettek.
Most már rendelkezésünkre áll a megfelelő kép specifikáció: a kép > Elem, a srcset [Alternatív képforrások készlete] attribútum és méret attribútum, amely lehetővé teszi, hogy mely képeket adják meg, melyik nézetablak szélességét (vagy hogy a böngésző a legmegfelelőbb választást adja meg egy képkiválasztásból).
A specifikációt a böngészők nagyon jól támogatják, és a fejlesztők ideális esetben használhatják, ahelyett, hogy a JavaScriptet használnák ugyanarra a célra. ”

Ki reagáló képeket használ?
A nagyobb webhelyek, például az Amazon, a Facebook és a BBC forráskódjait megnézve megerősítik, hogy a képalkotó elemet még nem használják a reagáló képek kiszolgálására.
Vajon élvezik ezt? Különböző képek megjelenítése az egyes platformokhoz potenciálisan számos előnnyel jár:
Lehetővé teszi a webhely számára, hogy nagyobb, nagyobb felbontású képet jelenítsen meg az asztalon.
Csökkenti a képméretet és a teljes oldal súlyát, ezáltal felgyorsítja a mobil terhelési időt.
Engedélyezi a mobil webhely számára, hogy a mobilon megjelenített kép nagyításával jelenjen meg. (Vegye figyelembe a fenti kutya vágott képét).
A kiskereskedők megjelenhetnek Mobilbarát hős képek A mobilon, miközben a hagyományos csomagolásokat ragasztja a nagyobb kijelzőkre.
A legjobb formátum megtalálása a képekhez
A mobil / mobilbarát webhelyeken használt képek leggyakoribb formátuma a JPEG 46%, PNG 28%, GIF 23% és SVG 1% a httpArchive .

A nem megfelelő képformátum használata növelheti a fájlméretet és a hatásminőséget, ha a képek különböző méretű képméretekre vonatkoznak.
Kétféle webes kép létezik: raszter és vektor. Az első piktogramokból áll (mint egy digitális fénykép), míg a második vonalakból és formákból áll. A JPEG, a PNG és a GIF raszteres. Az SVG egy vektor. Az SVG egy újabb formátum, amely nem olyan széles körben használatos (még), de ajánlott erre a kurzusra a reaktív tervezőhelyek számára Érzékeny képek A Google-tól és a Udacity-tól.
Vannak pro és hátrányok mindegyikhez, és minden webes tervezőnek más véleménye és kedvenc formátuma van. Meg kell vizsgálnia a saját vállalati politikáját, de általában:
A JPEG-t a leggyakrabban a webes fényképekhez használják
A GIF közös az animációkhoz, valamint egyszerű grafikonokhoz, ikonokhoz és logókhoz
A PNG gyakoribb a jobb minőségű grafikonok, logók, ikonok és más illusztrációk és fényképek grafikus hatásokkal
Az SVG jó grafikonok és logók, oldalfejek – olyan dolgok, amelyeket egy illusztrátor tervez.
A formátumtípusokról és -méretekről bővebben a Google útmutatójában olvashat A képek optimalizálása .
A hagyományos képek alternatívái
A weboldalak számos apró képből, például ikonokból és gombokból állnak. Ha ezeket egyedi GIF / PNG / JPEG képekkel készítik el, mindegyik hozzáadja az oldal méretét, és mindegyikhez egyedi böngészőre van szükség, ami lelassíthatja az oldal betöltési idejét.
Három módszer, amelyek segíthetnek az oldalméret és a képkérések leállításában:
CSS sprites – kombinálja a kisebb grafika gyűjteményét egyetlen CSS fájlba. Nota bene A túl sok vagy túl nagy méretű grafika túlterhelése ellentétes lesz.
Ikon betűtípusok – az ikonok könyvtára egyetlen fájlként.
CSS formák – a CSS segítségével készültek, nem mint hagyományos képek
Mike D’Agruma Lead Front-End Webfejlesztő, E-volve Creative Group:
“A fájlméret megtakarításához általában távol tartom a nagyobb, népszerűbb ikonkönyvtárak betöltését és használatát Fontastic Saját egyedi ikon-betűtípusok létrehozására. Ez a módszer nagyon jól működik a különböző szinteken: 1) Mivel csak kis számú egyedi ikonot használok, a betűtípus méretének drasztikusan kisebb; 2) Az ikonok SVG-kkel készülnek, ami biztosítja, hogy rendkívül élesek lesznek az eszközökön; 3) Ezt a lehetőséget nem tudja legyőzni a rugalmasságért, mivel a font ikonok rendkívül testreszabhatók a CSS-sel.
Egy másik nagyszerű módja az időben, a fájlméret és a kiszolgáló kéréseinek biztonságos használatához a CSS segítségével alakzatokat hozhat létre – a legtöbb formát hozhatja létre, és annyi effektust és átmenetet hozhat létre, amennyit a CSS-tel szeretne.
Vesz Summit County Metro parkok Mint például a fejléc szakaszban, képesek voltak CSS alakzatok és betűtípus ikonok kombinációját használni ahhoz, hogy hat különböző képet készítsenek. A mobil menü aktiválása egy példa a CSS-alakú animációra (a hamburger menü “X” -ként átalakul), és egy további ikon használata a harmonika triggerek jobb oldalán nyílt és zárt állapotokat mutat. ”

Webes tervezési technikák az észlelt terhelési idő javítására
Amikor levágta a zsírt, eltávolította a felesleges képeket, és optimalizálta a maradékot, de az oldal még mindig nem töltődik elég gyorsan – mit csinálsz? Csal.
Győződjön meg arról, hogy a legfontosabb dolgok először töltődnek be, mondja Raluca Budiu:
“Amikor egy oldal betöltődik, győződjön meg arról, hogy a szöveg először töltődik be, hogy az emberek elkezdhessék a tartalom beolvasását. A képek betöltése közben ne keverje össze a már betöltött tartalmat, mert az olvasók elveszítik helyüket az oldalon, és néha még a rossz kapcsolatra is kattintanak, mert a megfelelő cél váratlanul megindult. ”
Van különbség az észlelt terhelési idő és a tényleges terhelési idő között. Minden, ami fontos a felhasználó számára, hogy azok a tartalmak, amelyekről néznek vagy vannak, elérhetők. Nem akarnak üres képernyőt bámulni, amíg a böngésző olyan képeket hoz fel, amelyeket soha nem lát.
Három közös technika van ennek megvalósítására. Robert Gaines Egy Kansas, az Egyesült Államokban működő webes és alkalmazásfejlesztő magyarázza:
„1. A halasztott betöltés vagy a késleltetett betöltés a JavaScript használatával megakadályozza a képek és egyéb eszközök betöltését, amíg a weboldal fő tartalma befejeződik. A halasztott betöltés csökkenti a weboldal elsődleges tartalmának megjelenítéséhez szükséges időt, de csökkenti a képek csökkentését, amelyek egyébként lassítanák a weboldalt.
2. Lazy Loading betölti az eszközöket, amikor és amennyire szükséges. Tehát a tartalom a hajtás felett van először, majd a hajtás alatt, ahogy a felhasználó görget. A képgalériákkal – például a kiskereskedelmi webhelyeken végzett termékkeresésekkel – miniatűr képeket használnak, a nagyobb képek csak akkor töltődnek be, ha a megfelelő indexképet rákattintják.
3. A progresszív képek betöltése után az alacsony minőségű képeket először egy weboldalt készítik, majd jó minőségű képekkel helyettesítik őket, miután az elsődleges tartalom betöltésre került. A progresszív képterhelés vizuális megjelenést kölcsönöz a teljesítménynek. A késleltetett betöltésektől eltérően nem hagyja a felhasználókat arra, hogy másodlagos képeket töltsön be az elsődleges tartalom után. ”
Az olyan eszközök, mint a Photoshop, lehetővé teszik, hogy a képeket progresszív JPEG-ként vagy átlapolt PNG-ként menthessék el, amelyek a leírt módon töltődnek be.
Ez a kurzus Érzékeny képek A Google és a Udacity jó bevezetője ennek a témának; A webfejlesztőknek szól, de mindenki számára előnyös lesz. Átugorhatja a kódolási gyakorlatokat.

Ez a cikk egy három részből álló sorozat 3. része a mobil webhelyének sebességének optimalizálásáról. Olvassa el a sorozat előző részleteit:
Az oszlop egy verzióját eredetileg a testvérünkön, a ClickZ-on tették közzé. Itt jelent meg újra, hogy meghallgassuk a közönségünket az SEW-n.

Andy Favell a Search Engine Watch, web szerkesztő és mobil / digitális tanácsadó írója.

Szeretne maradni a legfrissebb keresési trendek tetején? A legfrissebb információkat és híreket kereshet a keresési szakértőktől.

Kapcsolódó olvasmány

A mobiltelefonokra küldött weboldalak mérete négy év alatt megnégyszereződött, ami komoly problémát okozott a webmestereknek és a mobilszolgáltatóknak optimalizálni kívánt SEO-k számára. Ez az oszlop feltárja a mobil oldal sebességének késéseit, és hogyan próbálja meg a weboldalakat a problémákra.

A hangkeresést a világ vezető technológiai szolgáltatói azonosítják, mint óriási lehetőséget a piaci részesedés megszerzésére a következő évtizedben. Jelenleg hiányzik a mainstream elfogadás – de mindez hosszú időn át változhat. Tehát ki van a vezető szerepet a hangkeresés “űrversenyben”?

A mai asszisztensek közelebb vannak, mint valaha a mindentudó számítógép sci-fi ideáljához, amelyet évtizedek óta álmodtunk. De az a mód, ahogyan a felhasználók kölcsönöznek velük, nem csak a hangalapú kereséssel foglalkozik – hangutasításokkal. Milyenek ezek a különbségek, és mit tehet az optimális megoldásért?

Ez az oszlop meg fogja vizsgálni, hogyan lehet felismerni, elkerülni és orvosolni a problémákat a mobil videóval kapcsolatban, hogy a nézők a lehető legjobb élményt nyújtsák a videotartalmakkal kapcsolatban, és tartsák meg őket a videók megtekintésekor.

Ha tetszett, kérlek oszd meg barátaiddal!