Hogyan lehet optimalizálni webhelyét a mobil felhasználók számára?

Gondoskodott arról, hogy webhelye mobilbarát-e?


Tudta, hogy a Google bevezette a Mobile-First nevű új irányelvet? Több és több az internetes felhasználók elmozdulnak az asztali számítógépektől, ehelyett böngészhet és vásárolhat mobil eszközökkel.

A rugalmas webdesign lehetővé tette webhelyek létrehozását, amelyek egyenletes szinten működnek minden platformon. De az adaptív tervezés még akkor is csak a mobil UX optimalizálási stratégiáinak töredéke.

Ha valódi teljesítmény-optimalizálást szeretne, akkor más alternatívákat is mérlegelnie kell.

Ezért van olyan nagy hangsúly a webhely felépítésének, mint a mobil első élmény. Egyszerűen fogalmazva: a mobil először azt jelenti, hogy a dizájn és a tartalom először a mobil felhasználók számára van optimalizálva.

Ennek ellenére ez a bejegyzés nem egy teljesen új oldal tervezéséről szól. Ehelyett néhány alapvető mobil-első tervezési alapelvet fogunk vizsgálni. És töltsön el egy kis időt arra, hogy a műszaki jellemzőkre összpontosítson a mobil felhasználók számára a felhasználói élmény optimalizálása érdekében.

# 1: Tervezés a mobil szem előtt tartva

Az internet nagyrészt az asztali felhasználók kiszolgálásának elvén épül. Az igazi web, a technológiai fejlődés valóban legjobban egy gyönyörű, teljes képernyős kijelzőn jelenik meg. Az okostelefonok és más mobil eszközök azonban dolog, és itt az ideje, hogy alkalmazkodjanak a mobil első kialakítás koncepciójához.

A józan észre reagáló kivitel kivételével, milyen egyéb tervezési elemeket kellene beépítenie a mobil első webes terveibe?

  • Fontossági sorrend. A mobil képernyők a rendelkezésre álló képernyőterületre korlátozódnak. A mobil képernyők szintén függőlegesen mutatják be a tartalmat, szemben az asztali számítógépek sokkal szélesebb – vízszintes struktúrájával. Ez azt jelenti, hogy a prioritások alapján kell megterveznie. Mely elemek vannak kiemelkedően fontosak a felhasználók számára? Ha vannak CTA gombok, milyen könnyű ezeket megtekinteni a mobil felhasználó számára?
  • Először a tartalom. Második szín. Megtehetsz néhány érdekes dolgot a mobil dizájnnal, de nem az asztali dizájn keretein belül. Tehát először térjen át a tartalomhoz. A másolatot és más tartalmi részeket könnyen olvashatóvá és hozzáférhetővé tegye. A mobil képernyő sokkal kevésbé megbocsátó a zavaró vizuális elemeknél.
  • Könnyű navigáció. Mobil eszközön nem egyszerűen bárhová kattinthat, és visszatérhet a kezdőlapra. Hacsak természetesen nem tervezi ilyen típusú navigációt előre. És kellene. Kísérletezzen a Scroll-to-Top widgetekkel, de lehetőség szerint zökkenőmentes ragacsos fejlécekkel is.

A legjobb módszer annak ellenőrzésére, hogy jól teszed-e ezt, ha használja a saját telefonját (én mindig ezt csinálom!), És látogasson el webhelyére. Vizsgálja meg alaposan, hogy a dolgok hogyan érzik magukat és folynak együtt.

Ha egy kávézóban ül, vagy repülésre vár egy repülőtéren, vállon dugjon valakit, és udvariasan kérje meg őket, hogy ellenőrizzék az Ön webhelyét. Ezután dőljön hátra és hallgassa meg visszajelzéseiket. Legtöbbször meglepni fogja magát azzal, ahogy az emberek érzékelik webhelyének felhasználói élményét.

# 2: Erőforrás-optimalizálás; képek, ikonok stb.

Milyen gyakran találja magát látványtervekkel a személyes preferencia kedvéért, és nem UX? Megtörténik, és ha kreatív leszel, akkor fizet, ha megérti, hogyan működik a média optimalizálása.

Vizuális elemek, például fotók, illusztrációk, ikonok és videók a weboldalak legnagyobb sávszélességű fogyasztói.

Átlagos oldalbetöltési idő 2018-ra. Hogyan hasonlítja össze a MachMetrics Speed ​​BlogAz átlagos weboldalméret 2018-ban. Iparágak és országok szerint sorolva.

Bár nincs olyan weboldalméret, amelyet mindenkinek meg kell találnia, józan ész, hogy a kisebb weboldalméret megegyezik a gyorsabb betöltési időkkel.

Szóval, hogyan vághatja le néhány extra KB-t vagy akár MB-ot a vizuális tartalomtól?

  • Átméretezheti képeit. Egyszerűen hangzik, igaz? Nos, nem számíthatok arra, hogy hányszor böngésztem egy mobiloldalt, csak hogy 1980 x 1200 kép legyen a háttérben. Ehelyett a teljes méretű fotókat alternatív linkekként kell rendelkezésre bocsátani. Az átméretezés a kép méretétől függően akár 80% -át is leborotválhatja. A mobil eszközök esetében azonban soha nem indokolt a 600-700 képpont-tartomány túllépése.
  • Csökkentse a fájlméretet tömörítéssel. A kép-tömörítés / -optimalizálás a gyártótól származó szoftverek használatának folyamata a képben lévő színek számának csökkentése érdekében. Ezt olyan mértékben lehet megtenni, hogy fotói ne veszítsék el veleszületett minőségüket, de drasztikusan csökkentik a fájlok méretét. Ha segítségre van szüksége a képek tömörítésében, akkor ne keresse tovább a képtömörítési eszközök átfogó körét.
  • Fedezze fel az alternatív fájlformátumokat. Mindenki hallott a PNG és JPEG fájlformátumokról. Végül is a képi szabványok az interneten. De nem sokáig. A digitális képküldés legújabb és legnagyobb technológiája körül forog WebP és SVG fájlformátumok. Az SVG például automatikusan képes skála képernyő méretre, az adott vizuális összetevők betöltéséhez szükséges erőforrások számának csökkentése.

A felhasználói élmény optimalizálása az elsőként a mobilra való elmélkedés szempontjából. Az impulzusra történő tervezés azt jelenti, hogy nem veszi figyelembe döntései hosszú távú hatásait. Míg az átgondolt megközelítés elősegíti, hogy a mobil felhasználók számára szem előtt tartva építsenek.

meglátásokkal: Ha következetesen tartja az intuitív mobildizájn koncepcióját, akkor nem kell ugyanazt a vizuális alkotóelemet újra felhasználnia a mobilterveken. Néhány háttérkép eltávolítása és színes háttérrel történő cseréje – mobiltelefonon – nem fogja ártani a felhasználói élménynek. Mindig keressen módot a legkisebb sávszélesség megtakarítására.

# 3: Elő- és lusta-betöltés

Töltsön be minden médiaforrást olyan oldalakra, amelyek elolvasása jelentős időt vesz igénybe? És segíthet-e abban, hogy a külső oldalakat megjelenítő felhasználók előtt megjelenjenek?

Nézzük először az előtöltőket, más néven böngésző tippeket.

Az előtöltők segítségével az oldal elmondhatja a böngészőnek a lehetséges navigációs lehetőségeket. Például. A felhasználó felkeresheti a B oldalt az A oldalról.

Az előtöltéssel a felhasználó a B oldalt renderelheti, mielőtt rákattintana a navigációs hivatkozásra az A oldalon.

előterhelési irányelv

Ne feledje, hogy az előtöltés nem mindig működik, és a böngészőnek kell meghoznia a végső döntést. Az olyan tényezőket, mint az eszköz típusa és a sávszélesség, külön-külön mérjük meg.

Melyek a leggyakoribb előtöltő típusok?

  • Prefetch. Ez a típus azt sugallja, hogy egy adott URL valószínűleg a következő navigációs választás. És ha a böngésző elfogadja a kérést, akkor automatikusan gyorsítótárazza a fontos oldal-erőforrásokat, ami viszont a következő oldal betöltését sokkal gyorsabbá teszi..
  • Előmegjelenítés. Míg a fenti típus csak bizonyos erőforrásokat tölt be, az előrendelés az egész oldalt gyorsítótárazza. Az összes megjelenített tartalmat a felhasználó eszközmemóriájában tárolja.
  • DNS-Prefetch. A DNS előzetes letöltése megoldja a megadott DNS-t, és semmi mást. Ennek eredményeként, ha egy felhasználó egy adott „fordulót” hajt végre a webhelyén, akkor lényegében megszabadul a navigáláshoz szükséges időtől.
  • Preconnect. Ugyanaz, mint a fentebb, de kapcsolatot létesít és kézfogást is létrehoz TCP és TLS kapcsolatokkal.

Milyen példák vannak az előtöltőkre?

Mivel az előtöltők dinamikus HTML-címkéket használnak, Ön képes tartalom előzetes betöltése, például a Google Fonts vagy hozzon létre egy egyedi szkriptet a JavaScriptek előzetes feltöltéséhez a WordPress-ben.

BTW, ha akkor WordPress-t használ WP rakéta segíthet abban, hogy feltöltse webhelyét.

Most, hogy többet tud az előtöltőkről, beszéljünk egy másik forró témáról: a lusta betöltésről.

Mi a Lazy Loading?

Ha új weboldalt látogat meg, akár blogbejegyzést, akár statikus webhelyet keres, a böngésző letölti a teljes oldal tartalmát, majd ezt a tartalmat natív böngészési élményként szolgálja. A legtöbb esetben a teljes oldalt le kell tölteni anélkül, hogy valójában a hajtás fölött látnánk.

Míg a lusta betöltésekor a böngészőnek azt mondják, hogy töltsön be (jelenítsen meg) olyan tartalmat, amely csak a felhasználó nézetablakában található. Tehát, ha egy bizonyos oldalhoz méretarányosan érzékeny fotók vagy videók vannak hozzáadva, akkor ezek a fájlok csak akkor jelennek meg, amikor a böngésző képernyője eléri a webhely ezen részét.

És ha aggódik a lehetséges SEO problémák miatt, ne légy. Yoast megerősítette ezt A Google olyan oldalakat jelenít meg, amelyek lustán töltöttek be, és úgy látja, hogy ez csak egy újabb teljesítményjavító jel.

Layzr js

Ajánlom egy könyvtárat használni Layzr.js – Egyszerű és hatékony lusta-betöltés a képekhez! A szkript a projekt honlapján is aktiválódik, így valós időben láthatja azt. A WordPress felhasználók tucatnyi lusta-betöltő plugint találnak a nyilvános plugin-ok replikájában.

# 4: Webes gyorsítótárazás

A webes gyorsítótárazás azon alapul, hogy lemásoljuk egy oldal verzióját, amelyet bármikor bemutathatunk a felhasználó számára. Az oldalak gyorsítótárban vannak a webhelyek első látogatásakor. Amikor egy új felhasználó megpróbálja elérni az oldalt, az élő verzió kiszolgálása helyett, a webszerver megjeleníti a gyorsítótárazott verziót.

Bármely gyorsítótárazás célja a weboldal teljesítményének javítása és a szükséges háttér-erőforrások csökkentése. A gyorsítótárazási megoldástól függően konfigurálhat egyéni időközöket és egyéb eseményindító eseményeket.

webes gyorsítótárazás

Az internetes gyorsítótárazás egyik legnépszerűbb neve a Lakk, Tintahal és Memcached. De biztos lehetsz benne, hogy rengeteg más megoldás létezik a piacon, különösen, ha WordPress felhasználó.

Azt is fontolhatja meg, hogy feliratkozzon a CDN-re.

Mi a CDN (tartalomszolgáltatási hálózat)?

A tartalomszolgáltató hálózat elosztott szerverek globális klaszterét használja a hihetetlenül gyors tartalomszállításhoz. A CDN gyorsan átviheti az összes népszerű internetes tartalomtípust: videókat, fotókat, JavaScript-eket stb. Manapság a webes forgalom nagy része áthalad a CDN valamilyen formáján..

Az egyetlen dolog, amelyet a tartalomszolgáltató hálózatokkal kapcsolatban meg kell emlékezni, az az, hogy a legjobban működnek, ha nagy igényű webhelyen használják. Tehát, ha csak néhány ezer látogató szolgál ki havonta, az észrevehető javulások észlelése nehéznek bizonyulhat. Ennek ellenére a CDN kiváló megoldás a webhely betöltési idejének javítására, a sávszélesség költségeinek csökkentésére, a tartalom elérhetőségének növelésére és az általános biztonság megerősítésére..

Ha nincs korábbi tapasztalata a CDN-kkel kapcsolatban, javasoljuk, hogy próbálja ki CloudFlare – örökre ingyenes tervet nyújtanak, és ez egy nagyszerű platform, amellyel el lehet kezdeni a tanulást. És ha a Cloudflare nem felel meg az elvárásainak, akkor nézd meg a piacon a legjobb ingyenes CDN szolgáltatókkal kapcsolatos üzenetünket.

# 5: AMP (gyorsított mobil oldalak)

Google AMP projekt a mobil optimalizálás a szteroidokon! Az AMP alapvetően elengedhetetlen az Ön oldalain, hogy szupergyors betöltési élményt nyújtson, és prioritássá tegye a tartalom olvashatóságát. Tekintettel arra, hogy milyen fontos az oldalsebesség, fel tudja-e meríteni a bátorságot, hogy nemet mondjon a közel-pillanatnyi betöltési időkre?

Google AMP (gyorsított mobil oldalak)

Oké, az összes szószó nagyon jól hangzik, de hogyan működik az AMP??

Az AMP egy csupasz HTML-oldal, amely korlátozza a megjeleníthető tartalom fajtáit. Ez sokkal gyorsabb betöltési időt és általános teljesítményt eredményez a szkriptek végrehajtásának korlátozása miatt.

A JavaScript például nem működik az AMP-vel. Hacsak természetesen nem használja a Az AMP JS könyvtár elérhető a GitHub-on. A JS könyvtár használata lehetővé teszi bizonyos eredmények elérését, például a hirdetésgátlók elkerülését, de ha valódi teljesítményt akar, akkor a nyers AMP az út.

AMP példaként

Ha Ön WordPress felhasználó, akkor a legtöbb esetben az AMP hozzáadását a blogjához plugin segítségével fogja elvégezni. De ha egy egyedi weboldallal dolgozik, akkor az AMP először történő hozzáadása kissé kihívást jelent.

Tanulja meg az AMP példát

Ez az, ahol AMP példaként hasznos. A tényleges platform mellékprojektjeként ez a webhely részletezi az AMP-vel elérhető összes horgot és horgot. Minden alkotóelemhez és effektushoz egy biztosított demó tartozik, így láthatja, hogy néz ki.

Érdekes esettanulmányok az AMP számára:

  1. A Terra növeli a mobil nézők körét az AMP-vel
  2. A Times of India 1,5-szer több bevételi hozamot számolt be
  3. A gyorskereskedelem az AMP-first létrehozásával növeli az ügyfelek konverzióit

# 6: Tesztelje elkötelezettségét

Manapság nincs mentség arra, hogy ne létezzen külön megállóhelyi környezetet a projekt számára. A legtöbb felhőtárhely-platform alapértelmezés szerint szakaszos környezeteket kínál, ezért kérdezze meg a szolgáltatót, hogy van-e hozzáférése ehhez.

tesztelés a kötelezettségvállalás előtt

Mi az átmeneti környezet??

Nos, ezt a leggyorsabb módon magyarázhatja a jelenlegi élő webhelyén.

Ezt a webhelyet nevezik termelési webhelynek – az összes kód, szkript és tartalom valós idejű verziója, amelyen a webhely alapul. Ebben az összefüggésben egy átmeneti környezet a gyártási hely másolata. Egy dummy site, ha akarod. És ebben az átmeneti környezetben módosíthat vagy új funkciókat adhat hozzá anélkül, hogy megsértené az élő webhelyet.

Mindig vissza gondolok Ashley Harpp hozzászólására, Ne pazarolja az idejét – tesztelje a változásokat, mielőtt elkötelezi magát.

Kiváló példája annak, hogy mi nem akarjuk vállalni a felelősséget, ha hibát követünk el. Ennek ellenére Ashley hozzászólása linkeket tartalmaz a hasznos eszközökhöz a helyi megállókörnyezet felállításához.

A tesztelés nem olyan ijesztő, mint amilyennek hangzik. De az a félelmetes, hogy félelmetes, ha véletlenül törli a teljes adatbázist egy termelõkiszolgálón!

Záró nyilatkozat

A webhely optimalizálása a zökkenőmentes mobil élmény érdekében még nem olyan nehéz. Csak annyira van szüksége egy kicsit határozottan, és önként alkalmazza a bejegyzésben felvázolt módszereket. Valószínű, hogy már ismeri a tartalmak gyorsítótárazását és a lusta betöltést, de mi van a színpadi környezetekkel vagy előtöltőkkel??

Remélhetőleg ez a bejegyzés rávilágított a mobil webhelyek optimalizálásának jelenlegi helyzetére. Nyugodtan kommentálhat vagy javasolhat további megoldásokat.

CÍMKÉK:

  • SEO

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map