Megbizonyosodott arról, hogy webhelye mobilbarát?
Tudta, hogy a Google új szabályzatot vezetett be, Mobile-First néven?
Egyre több webfelhasználó vált el az asztali számítógépektől, és ehelyett mobileszközein böngészik és vásárolnak.
A reszponzív webdesign lehetővé tette olyan webhelyek létrehozását, amelyek minden platformon egyenletes szinten működnek. A reszponzív dizájn azonban még ekkor is csak töredéke a mobilos UX-optimalizálási stratégiáknak.
Ha valódi teljesítményoptimalizálást szeretne, más alternatívákat is mérlegelnie kell.
Ez az oka annak, hogy olyan nagy hangsúlyt fektetnek webhelye felépítésére, mint a mobil-első tapasztalat. Egyszerűen fogalmazva, a mobil-első azt jelenti, hogy a design és a tartalom először a mobilfelhasználók számára van optimalizálva.
Ennek ellenére ez a bejegyzés nem egy teljesen új webhely tervezéséről szól. Ehelyett néhány alapvető mobil-első tervezési elvet fogunk megvizsgálni. És fordítson egy kis időt a technikai részletekre a mobilfelhasználók felhasználói élményének optimalizálása érdekében.
Tartalomjegyzék
#1: Tervezés a mobilt szem előtt tartva
A web nagyrészt az asztali felhasználók kiszolgálására épül. Az igazi web, a technológiai fejlesztések valódi fejlődése a legjobban egy gyönyörű, teljes képernyős kijelzőn jeleníthető meg. Az okostelefonok és más mobileszközök azonban fontosak, és itt az ideje elkezdeni alkalmazkodni a mobil-első dizájn koncepciójához.
A józan ésszel reszponzív dizájnon kívül milyen egyéb tervezési elemeket kellene megvalósítania a mobil-első webtervben?
- Fontossági sorrend. A mobil képernyők a rendelkezésre álló képernyőterületre korlátozódnak. Ezenkívül a mobilképernyők függőlegesen jelenítik meg a tartalmat, szemben az asztali számítógépek sokkal szélesebb – vízszintes – szerkezetével. Ez azt jelenti, hogy prioritást alkalmazva kell terveznie. Mely elemek a legfontosabbak a felhasználók számára? Ha vannak CTA gombok, milyen könnyen láthatja őket a mobilfelhasználó?
- Először a tartalom. Második szín. Lehet néhány érdekes dolgot csinálni a mobil tervezéssel, de természetesen nem az asztali tervezés keretein belül. Tehát először engedjen helyet a tartalomnak. Tegye könnyen olvashatóvá és hozzáférhetővé másolatát és egyéb tartalmi részeit. A mobil képernyője sokkal kevésbé elnézi a zavaró vizuális elemeket.
- Könnyű navigáció. Mobileszközön nem lehet egyszerűen bárhová kattintani, és visszatérni a kezdőlapra. Kivéve persze, ha előre tervezi az ilyen típusú navigációt. És kellene. Kísérletezzen a Scroll-to-Top widgetekkel, de lehetőség szerint zökkenőmentesen ragadós fejlécekkel is.
A legjobb módja annak, hogy ellenőrizze, hogy ezt helyesen teszi-e, ha telefonját használja (én mindig ezt csinálom!), és felkeresi webhelyét. Alaposan vizsgálja meg, hogy a dolgok hogyan érzik magukat és hogyan működnek együtt.
Ha egy kávézóban ül, vagy egy járatra vár a repülőtéren, bökjön valakinek a vállát, és udvariasan kérje meg, hogy ellenőrizze az Ön webhelyét. Ezután dőljön hátra, és hallgassa meg visszajelzéseiket. Legtöbbször saját magát lepi meg azzal, ahogyan az emberek érzékelik a webhely felhasználói élményét.
#2: Erőforrás-optimalizálás; képek, ikonok stb.
Milyen gyakran veszi észre magát, hogy személyes preferencia és nem UX kedvéért használ vizuális elemeket? Megtörténik, és ha kreatív akar lenni, érdemes megértenie, hogyan működik a médiaoptimalizálás.
A vizuális elemek, például a fotók, illusztrációk, ikonok és videók jelentik a legnagyobb sávszélesség-fogyasztókat a weboldalakon.
A weboldal átlagos mérete 2018-ban. Iparágak és különböző országok szerint listázva.
Bár nincs meghatározott weboldalméret, amelyet mindenkinek meg kell felelnie, a józan ész szerint a kisebb weboldalméret gyorsabb betöltési időt jelent.
Tehát hogyan vághat le néhány extra KB-t vagy akár MB-t a vizuális tartalomból?
- Méretezze át a képeket. Egyszerűen hangzik, igaz? Nos, nem tudom megszámolni, hányszor böngésztem egy mobilwebhelyet csak azért, hogy a háttérben 1980 x 1200-as képek töltődjenek be. Ehelyett teljes méretű fényképeket kell megadni alternatív hivatkozásként, ha szükséges. Az átméretezés a teljes képméret akár 80%-át is lefaraghatja, a szükséges méretektől függően. Mobileszközök esetében azonban soha nincs ok arra, hogy legfeljebb a 600-700 képpont tartomány fölé menjen.
- Csökkentse a fájl méretét tömörítéssel. A képtömörítés/optimalizálás az a folyamat, amelynek során harmadik féltől származó szoftvert használnak a képen lévő színek számának csökkentésére. Ez megtehető olyan mértékben, hogy a fényképek nem veszítenek természetes minőségükből, de a fájlméretük drasztikusan csökkenhet. Ha segítségre van szüksége a képek tömörítéséhez, ne keressen tovább a képtömörítő eszközeink átfogó összeállításánál.
- Fedezze fel az alternatív fájlformátumokat. Mindenki hallott már a PNG és JPEG fájlformátumokról. Végül is ezek a de facto képszabványok a weben. De nem sokáig. A digitális képszolgáltatás legújabb és legjobb technológiája körül forog WebP és SVG fájlformátumok. Az SVG-k például automatikusan képesek méretezhető képernyőméretrecsökkentve az egyes vizuális összetevők betöltéséhez szükséges erőforrások számát.
A felhasználói élmény optimalizálása – elsősorban a mobileszközökre – csak figyelmes dolog. Az impulzusra történő tervezés azt jelenti, hogy nem veszi figyelembe döntéseinek hosszú távú hatásait. Míg a figyelmes megközelítés az alapoktól kezdve a mobilfelhasználók szem előtt tartásával építhet.
Éleslátás: Az intuitív mobiltervezés koncepciójával összhangban nem kell újra felhasználnia ugyanazokat a vizuális komponenseket a mobiltervekben. Néhány háttérkép eltávolítása és színes háttérrel való helyettesítése – mobilon – nem rontja a felhasználói élményt. Mindig keresse a módját, hogy még a legkisebb sávszélességet is megtakarítsa.
#3: Elő- és lusta betöltés
Szükséges az összes médiaforrás betöltése azokra az oldalakra, amelyek olvasása jelentős időt vesz igénybe? És segíthet-e a külső oldalak megjelenítése a látogatók előtt?
Nézzük először az előtöltőket, más néven böngésző tippeket.
Az előbetöltők segítségével az oldal tájékoztathatja a böngészőt a lehetséges navigációs lehetőségekről. Például előfordulhat, hogy egy felhasználó felkeresi a B oldalt az A oldalról.
Az előtöltéssel a felhasználó megjelenítheti a B oldalt, mielőtt az A oldalon lévő navigációs hivatkozásra kattintana.
Ne feledje, hogy az előbetöltés nem mindig működik, és a végső döntést a böngészőnek kell meghoznia. Az olyan tényezőket, mint az eszköz típusa és a sávszélesség, egyenként mérlegeljük.
Melyek a leggyakoribb előtöltő típusok?
- Előzetes letöltés. Ez a típus azt sugallja, hogy nagy valószínűséggel egy adott URL lesz a következő navigációs lehetőség. És ha a böngésző teljesíti a kérést, akkor automatikusan gyorsítótárba helyezi a fontos oldal erőforrásokat, ami viszont sokkal gyorsabbá teszi a következő oldal betöltését.
- Előrenderelés. Míg a fenti típus csak bizonyos erőforrásokat kér le, az előmegjelenítés a teljes oldalt gyorsítótárba helyezi. Az összes megjelenített tartalom a felhasználó készülék memóriájában tárolódik.
- DNS-előzetes letöltés. A DNS előzetes letöltése a megadott DNS-t oldja meg, semmi mást. Ennek eredményeként, ha egy felhasználó bizonyos „fordulatot” hajt végre az Ön webhelyén, Ön lényegében lerövidíti a navigációhoz szükséges időt.
- Előcsatlakozás. Ugyanaz, mint fent, de kapcsolatokat és kézfogásokat is létesít TCP- és TLS-kapcsolatokkal.
Milyen kódpéldák vannak az előtöltőhöz?
<link rel="dns-prefetch" href="https://wilku.top/how-to-optimize-your-website-for-mobile-users/customURL.com"> <link rel="preconnect" href="https://wilku.top/how-to-optimize-your-website-for-mobile-users/customURL.com"> <link rel="prefetch" href="folder/script.js" as="script"> <link rel="prerender" href="customURL.com/preview.html">
Mivel az előtöltők dinamikus HTML-címkéket használnak, megteheti olyan tartalmat, mint a Google Fonts vagy hozzon létre egy egyéni szkriptet JavaScript-elemek előzetes betöltéséhez a WordPressben.
BTW, ha WordPress-t használsz, akkor 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 a másik forró témáról: a lusta betöltésről.
Mi az a lusta betöltés?
Amikor meglátogat egy új weboldalt, legyen az blogbejegyzés vagy statikus webhely, a böngésző lekéri az oldal teljes tartalmát, majd ezt a tartalmat natív böngészési élményként szolgálja fel. A legtöbb esetben kénytelen le kell töltenie a teljes oldalt anélkül, hogy valóban tovább látna, mint a hajtás felett.
Míg a lusta betöltés esetén a böngésző azt kéri, hogy olyan tartalmat töltsön be (rendereljen), amely csak a felhasználó nézetén belül van. Tehát ha egy bizonyos oldalhoz méretérzékeny fotók vagy videók vannak hozzáadva, ezek a fájlok csak akkor jelennek meg, amikor a böngésző képernyője eléri a webhely adott részét.
És ha aggódik a potenciális SEO problémák miatt, ne aggódjon. Yoast megerősítette ezt A Google olyan oldalakat jelenít meg, amelyek lusta betöltést használnakés ezt csak egy újabb teljesítményjavító jelnek tekinti.
Javaslom egy könyvtár használatát Layzr.js – egyszerű és hatékony lusta betöltés a képekhez! A szkript a projekt kezdőlapján is aktiválva van, így valós időben láthatja a teljesítményét. A WordPress felhasználók tucatnyi lustán betöltődő bővítményt találhatnak a nyilvános bővítménytárban.
#4: Web gyorsítótár
A webes gyorsítótárazás az oldal egy verziójának másolásának koncepcióján alapul, amelyet azután bármikor bemutathat a felhasználónak. Az oldalak a webhely oldalának első látogatásakor gyorsítótárazásra kerülnek. Amikor egy új felhasználó megpróbál hozzáférni az oldalhoz, a webszerver az élő verzió kiszolgálása helyett a gyorsítótárazott verziót fogja megjeleníteni.
Bármilyen gyorsítótárazás célja a webhely 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 egyéni intervallumokat és egyéb trigger-alapú eseményeket is beállíthat.
A webgyorsítótárban a legnépszerűbb nevek a Varnish, Squid és Memcached. De biztos lehetsz benne, hogy rengeteg más megoldás is létezik a piacon, különösen, ha Ön WordPress-felhasználó.
Megfontolhatja a CDN-re való feliratkozást is.
Mi az a CDN (Content Delivery Network)?
A tartalomszolgáltató hálózat elosztott szerverek globális fürtjét használja a hihetetlenül gyors tartalomszolgáltatás biztosítása érdekében. A CDN gyorsan át tudja vinni az összes népszerű tartalomtípust az interneten: videót, fotót, JavaScriptet stb. Manapság a webes forgalom nagy része valamilyen CDN-n keresztül halad át.
A tartalomszolgáltató hálózatokkal kapcsolatban egyetlen dologra kell figyelni, hogy a legjobban akkor működnek, ha nagy keresletű webhelyeken használják őket. Tehát ha csak néhány ezer látogatót szolgál ki havonta, akkor az észrevehető javulás nehéz lehet. Mindazonáltal a CDN nagyszerű 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 erősítésére.
Ha nincs korábbi tapasztalata a CDN-ekkel kapcsolatban, javasoljuk, hogy próbálja ki Cloudflare – ingyenes örökre szóló tervet biztosítanak, és ez egy nagyszerű platform a tanulás megkezdéséhez. És ha a Cloudflare nem váltja be az elvárásait, nézze meg bejegyzésünket a piacon található legjobb ingyenes CDN-szolgáltatókról.
#5: AMP (Accelerated Mobile Pages)
Google-é AMP projekt a mobiloptimalizálás a szteroidokon! Az AMP lényegében a lényegre csupaszítja az oldalakat, hogy szupergyors betöltési élményt biztosítson, ugyanakkor a tartalom olvashatóságát is prioritássá tegye. Tekintettel az oldalsebesség fontosságára, összeszedheti a bátorságát, hogy nemet mondjon a szinte azonnali betöltési időkre?
Oké, ezek a hívószavak jól hangzanak, de hogyan működik az AMP?
Az AMP egy egyszerű HTML-oldal, amely bizonyos korlátozásokkal rendelkezik a megjeleníthető tartalom tekintetében. 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 GitHubon. A JS-könyvtár használatával bizonyos eredményeket érhet el, például elkerülheti a hirdetésblokkolókat, de ha valódi teljesítményt szeretne, akkor a nyers AMP a megfelelő út.
Érdekes esettanulmányok az AMP-ről:
#6: Tesztelj a kötelezettségvállalás előtt
Manapság már nincs mentség arra, hogy ne legyen külön színpadi környezet a projekthez. A legtöbb felhőalapú tárhelyplatform alapértelmezés szerint állomásoztatási környezetet kínál, ezért kérdezze meg szolgáltatóját, hogy rendelkezik-e hozzáféréssel.
Mi az a színpadi környezet?
Nos, ezt a leggyorsabban úgy magyarázhatja meg, ha megnézi a jelenlegi élő webhelyét.
Ezt a webhelyet termelési webhelynek hívják – az összes kód, szkriptek és tartalom valós idejű változata, amelyen webhelye alapul. Ebben az összefüggésben az átmeneti környezet a gyártási hely másolata. Egy ál oldal, ha úgy tetszik. Ebben az átmeneti környezetben pedig anélkül hajthat végre változtatásokat vagy új funkciókat adhat hozzá, hogy az élő webhely megszakadna.
Mindig visszagondolok Ashley Harpp posztjára, Ne pazarolja az időt – Tesztelje a változtatásokat, mielőtt elkötelezi magát.
Az a nézete, hogy „becsapjuk” magunkat, hogy elkerüljünk bizonyos dolgokat, kiváló példa arra, hogy nem akarunk felelősséget vállalni, ha hibázunk. Mindazonáltal Ashley bejegyzése linkeket is tartalmaz, amelyek hasznos eszközökre mutatnak a helyi állomásozási környezet beállításához.
A tesztelés nem olyan ijesztő, mint amilyennek hangzik. De az biztos, hogy ijesztő, ha véletlenül törli a teljes adatbázist egy éles szerveren!
Záró nyilatkozat
Webhelyének optimalizálása a zökkenőmentes mobilélmény érdekében nem is olyan nehéz. Csak egy kis elszántságra van szükséged, és szívesen alkalmazod az ebben a bejegyzésben vázolt módszereket. Valószínűleg már ismeri az olyan dolgokat, mint a tartalom gyorsítótárazása és a lusta betöltés, de mi a helyzet az átmeneti környezetekkel vagy az előtöltőkkel?
Remélhetőleg ez a bejegyzés rávilágított a mobilwebhelyek optimalizálásának jelenlegi állására.