Ako optimalizovať svoj web pre mobilných používateľov?

Zabezpečili ste, aby bol váš web vhodný pre mobilné zariadenia?


Vedeli ste, že spoločnosť Google zaviedla novú politiku s názvom Mobile-First? Viac a viac používatelia webu sa vzdialia od stolových počítačov, a namiesto toho prehliadajte a nakupujte pomocou svojich mobilných zariadení.

Responzívny webový dizajn umožnil vytvoriť weby, ktoré fungujú na všetkých platformách na rovnomernej úrovni. Ale aj tak je responzívny dizajn iba zlomkom stratégií optimalizácie UX pre mobil.

Ak chcete skutočnú optimalizáciu výkonu, musíte zvážiť aj iné alternatívy.

To je dôvod, prečo existuje taký silný dôraz na vytváranie vašich stránok ako mobilný prvý zážitok. Jednoducho povedané, mobilný prvý znamená, že váš návrh a obsah je najskôr optimalizovaný pre mobilných používateľov.

Ako už bolo povedané, tento príspevok sa netýka navrhovania úplne nového webu. Namiesto toho sa pozrieme na niektoré základné princípy návrhu mobilných zariadení. A strávte nejaký čas so zameraním na technické aspekty optimalizácie používateľského prostredia pre svojich mobilných používateľov.

# 1: Navrhovanie s ohľadom na mobil

Web je z veľkej časti postavený na princípe obsluhy používateľov počítačov. Skutočný web, skutočný pokrok v technológiách, sa najlepšie zobrazuje na krásnom celoobrazovkovom displeji. Smartfóny a ďalšie mobilné zariadenia sú však vecou a je čas začať sa prispôsobovať koncepcii prvého mobilného dizajnu.

Iné dizajnérske prvky, ktoré by ste mali implementovať do svojich návrhov pre mobilné zariadenia ako prvý, okrem citlivého responzívneho dizajnu?

  • prioritizácia. Mobilné obrazovky sú obmedzené na dostupný priestor na zobrazenie. Aj mobilné obrazovky prezentujú obsah vertikálnym spôsobom, na rozdiel od oveľa širšej – horizontálnej – štruktúry stolových počítačov. To znamená, že musíte navrhnúť pomocou prioritizácie. Ktoré prvky sú pre používateľov najdôležitejšie? Ak existujú tlačidlá CTA, aké ľahké je ich zobrazenie pre mobilného používateľa?
  • Najprv obsah. Farba sekundy. S mobilným dizajnom môžete robiť niekoľko zaujímavých vecí, ale určite nie v rámci dizajnu pracovnej plochy. Najskôr teda ustúpte obsahu. Zabezpečte, aby vaša kópia a ďalšie časti obsahu boli ľahko čitateľné a prístupné. Mobilná obrazovka omnoho menej odpustí rušivé vizuálne prvky.
  • Jednoduchá navigácia. Na mobilnom zariadení nemôžete kliknúť kdekoľvek a vrátiť sa späť na domovskú stránku. Pokiaľ sa však na tento druh navigácie samozrejme neplánujete vopred. A mali by ste. Experimentujte s miniaplikáciami Scroll-to-Top, ale tiež vždy bez problémov lepkavé hlavičky.

Najlepším spôsobom, ako skontrolovať, či robíte toto právo, je použiť svoj vlastný telefón (robím to stále!) A navštíviť vaše stránky. Dôkladne preskúmajte, ako sa veci cítia a tečú spolu.

Ak sedíte v kaviarni alebo čakáte na let na letisku, vystrčte niekoho na rameno a zdvorilo ho požiadajte, aby pre vás skontroloval váš web. Potom sa posaďte a vypočujte si ich spätnú väzbu. Väčšinou sa prekvapíte tým, ako ľudia vnímajú užívateľskú skúsenosť vášho webu.

# 2: Optimalizácia zdrojov; obrázky, ikony atď.

Ako často sa nachádzate pri používaní vizuálov v záujme osobnej preferencie a nie UX? Stáva sa to a ak sa chystáte byť kreatívnym, oplatí sa pochopiť, ako funguje optimalizácia médií.

Vizuálne prvky, ako sú fotografie, ilustrácie, ikony a videá, sú najväčší zákazníci so šírkou pásma na webových stránkach.

Priemerné časy načítania stránky za rok 2018 Ako porovnáva váš web MachMetrics Speed ​​BlogPriemerná veľkosť webovej stránky v roku 2018. Zaznamenané podľa odvetví a rôznych krajín.

Aj keď nie je nastavená veľkosť webovej stránky, ktorú musí splniť každý, je bežné, že menšia veľkosť webovej stránky sa rovná rýchlejšiemu načítaniu.

Ako teda môžete orezať niektoré ďalšie KB alebo dokonca MB z vášho vizuálneho obsahu?

  • Zmena veľkosti obrázkov. Znie to jednoducho, však? Nemôžem sa spoľahnúť na to, koľkokrát som si prezeral web pre mobilné zariadenia, aby som na pozadí mohol načítať obrázky 1980 x 1200. Namiesto toho by sa v prípade potreby mali ako alternatívne odkazy poskytnúť fotografie v plnej veľkosti. Zmena veľkosti môže oholiť až 80% celkovej veľkosti obrázka v závislosti od požadovaných rozmerov. Pre mobilné zariadenia však nikdy nie je dôvod ísť nanajvýš nad 600-700px.
  • Zmenšite veľkosť súboru pomocou kompresie. Kompresia / optimalizácia obrazu je proces používania softvéru tretích strán na zníženie počtu farieb prítomných v obraze. Dá sa to dosiahnuť tak, že vaše fotografie nestratia svoju vrodenú kvalitu, ale môžu výrazne znížiť veľkosť súboru. Ak potrebujete pomoc s kompresiou obrázkov, nehľadajte nič iné ako naše komplexné nástroje na kompresiu obrázkov.
  • Preskúmajte alternatívne formáty súborov. Každý počul o formátoch súborov PNG a JPEG. Koniec koncov, sú to de facto obrazové štandardy na webe. Ale nie dlho. Najnovšia a najväčšia technológia v oblasti digitálneho zobrazovania obrázkov sa točí okolo WebP a formáty súborov SVG. Napríklad SVG môžu automaticky škálovať na veľkosť obrazovky, znížením počtu zdrojov potrebných na načítanie konkrétnych vizuálnych komponentov.

Optimalizácia používateľského rozhrania pre mobilné zariadenia ako prvá je iba vedomá vec. Dizajn na základe impulzu znamená, že nezohľadňujete dlhodobé účinky svojich rozhodnutí. Vzhľadom na to, že vedomý prístup vám pomáha budovať s mobilnými používateľmi od základov.

bystrý: V súlade s konceptom intuitívneho mobilného dizajnu nemusíte vo svojich mobilných dizajnoch opakovane používať rovnaké vizuálne komponenty. Odstránenie niekoľkých obrázkov na pozadí a ich nahradenie farebným pozadím – v mobilných zariadeniach – nepoškodí používateľskú skúsenosť. Vždy hľadajte spôsoby, ako ušetriť aj najmenšie množstvo šírky pásma.

# 3: Predbežné načítanie a Lazy-načítanie

Je potrebné načítať všetky mediálne zdroje na stránky, ktoré si vyžadujú značný čas na prečítanie? Môže to tiež pomôcť vykresliť externé stránky skôr, ako ich používatelia navštívia?

Pozrime sa najprv na predpínače, známe tiež ako rady prehliadača.

Predpínače sú spôsoby, ako môže stránka informovať prehliadača o potenciálnych navigačných príležitostiach. Napr. Používateľ môže navštíviť stránku B zo stránky A.

S predbežným načítaním môže užívateľ vykresliť stránku B pred kliknutím na navigačný odkaz na stránke A.

smernica o predbežnom načítaní

Nezabúdajte, že predbežné načítanie nemusí vždy fungovať a je na konečnom rozhodnutí prehliadača. Faktory ako typ zariadenia a šírka pásma sa vážia jednotlivo.

Aké sú najbežnejšie typy predpínačov?

  • prefetch. Tento typ naznačuje, že konkrétna adresa URL bude s najväčšou pravdepodobnosťou najbližšou voľbou navigácie. A ak prehliadač vyhovie požiadavke, automaticky uloží do vyrovnávacej pamäte dôležité zdroje stránky, čo zase výrazne urýchli načítanie ďalšej stránky.
  • predbežne vykresliť. Zatiaľ čo vyššie uvedený typ vyvoláva iba určité zdroje, predbežný prehľadávač uloží do vyrovnávacej pamäte celú stránku. Všetok vykreslený obsah je uložený v pamäti zariadenia používateľa.
  • DNS-Prefetch. Prefetch DNS vyrieši zadaný DNS a nič iné. Výsledkom je, že ak používateľ na vašom webe urobí konkrétne „odbočenie“, v podstate ušetríte čas potrebný na navigáciu.
  • vopred pripojeným. Rovnaké ako vyššie, ale vytvára sa aj spojenie a nadviazanie spojenia s pripojeniami TCP a TLS.

Aké sú príklady kódu pre predpínače?

Pretože predpínače používajú dynamické značky HTML, ste schopní vopred načítať obsah, napríklad Google Fonts alebo vytvorte vlastný skript na predbežné načítanie prostriedkov JavaScriptu vo WordPress.

BTW, ak potom používate WordPress WP Rocket vám s tým môže pomôcť pri dobíjaní vašich stránok.

Keď už viete viac o predpínacích zariadeniach, porozprávajte sa o ďalšej aktuálnej téme: lenivé načítanie.

Čo je Lazy Loading?

Kedykoľvek navštívite novú webovú stránku, či už ide o blogový príspevok alebo statickú stránku – prehliadač načíta celý obsah stránky a potom tento obsah zobrazí ako natívne prostredie na prehliadanie. Vo väčšine prípadov ste nútení stiahnuť celú stránku bez toho, aby ste skutočne videli viac ako nad záhybom stránky.

Zatiaľ čo pri lenivom načítaní je prehliadaču povedané, aby načítal (vykreslil) obsah, ktorý je iba vo výreze používateľa. Ak sú teda na určitú stránku pridané fotografie alebo videá citlivé na veľkosť, tieto súbory sa zobrazia iba vtedy, keď sa obrazovka vášho prehliadača dostane na túto časť webu..

A ak sa obávate možných problémov so SEO, tak sa nemusíte. Yoast to potvrdil Google vykresľuje stránky, ktoré používajú lenivé načítanie, a vidí to iba ako ďalší signál na zlepšenie výkonnosti.

Layzr js

Moje odporúčanie pre knižnicu je použitie Layzr.js – jednoduché a efektívne lenivé načítanie obrázkov! Skript je aktivovaný aj na domovskej stránke projektu, takže môžete vidieť, ako účinkuje v reálnom čase. Používatelia programu WordPress môžu vo verejnom repozitári doplnkov nájsť desiatky lenivých doplnkov.

# 4: Web cache

Webové ukladanie do pamäte cache je založené na koncepcii kopírovania verzie stránky, ktorá sa potom môže používateľovi kedykoľvek zobraziť. Stránky sa ukladajú do vyrovnávacej pamäte pri prvej návšteve webovej stránky. Keď sa potom nový používateľ pokúsi o prístup na túto stránku, namiesto toho, aby zobrazoval živú verziu, webový server zobrazí verziu v vyrovnávacej pamäti.

Cieľom akéhokoľvek ukladania do vyrovnávacej pamäte je zlepšiť výkonnosť webových stránok a znížiť potrebné zdroje typu back-end. V závislosti od vášho riešenia vyrovnávacej pamäte môžete nakonfigurovať vlastné intervaly a ďalšie spúšťacie udalosti.

web cache

Niektoré z najobľúbenejších mien vo vyrovnávacej pamäti webu sú Varnish, Squid a Memcached. Uisťujeme vás však, že na trhu existuje veľa ďalších riešení, najmä ak ste používateľom systému WordPress.

Môžete tiež zvážiť registráciu do CDN.

Čo je to CDN (Network Delivery Network)?

Sieť na doručovanie obsahu používa globálny klaster distribuovaných serverov na zabezpečenie neuveriteľne rýchleho doručenia obsahu. CDN dokáže rýchlo preniesť všetky populárne typy obsahu na web: video, fotografiu, JavaScript atď. V týchto dňoch väčšina návštevnosti webu prechádza nejakou formou CDN..

Jedinou vecou, ​​ktorú si treba pamätať o sieťach na doručovanie obsahu, je to, že fungujú najlepšie, keď sa používajú na webových stránkach s vysokým dopytom. Ak teda obslúžite iba niekoľko tisíc návštevníkov mesačne, viditeľné výrazné zlepšenia sa môžu ukázať ako ťažké. Avšak CDN je skvelým riešením na zlepšenie doby načítania webových stránok, zníženie nákladov na šírku pásma, zvýšenie dostupnosti obsahu a zvýšenie celkovej bezpečnosti..

Ak nemáte predchádzajúce skúsenosti s CDN, odporúčame vyskúšať CloudFlare – poskytujú plán navždy zadarmo a je to skvelá platforma, s ktorou sa môžete začať učiť. A ak služba Cloudflare nesplní vaše očakávania, pozrite si náš príspevok, kde nájdete najlepších poskytovateľov CDN na trhu, ktorí sú najlepší..

# 5: AMP (Accelerated Mobile Pages)

Google je Projekt AMP je mobilná optimalizácia steroidov! AMP v podstate sťahuje vaše stránky na základné informácie, ktoré poskytujú zážitok pri rýchlom načítavaní, ale tiež kladú dôraz na čitateľnosť obsahu. Vzhľadom na to, aká dôležitá je rýchlosť stránky, môžete nazbierať odvahu povedať nie takmer okamžitým časom načítania?

Google AMP (Accelerated Mobile Pages)

Dobre, všetky tieto heslá znejú skvele, ale ako AMP skutočne funguje?

AMP je HTML stránka s voľným kolenom s určitými obmedzeniami, aký druh obsahu sa môže zobraziť. To vedie k oveľa rýchlejším časom načítania a celkovému výkonu kvôli obmedzeniu na vykonávanie skriptov a podobne.

Napríklad JavaScript nefunguje s AMP. Pokiaľ samozrejme nepoužívate Knižnica AMP JS je k dispozícii na serveri GitHub. Pomocou knižnice JS môžete dosiahnuť určité výsledky, napríklad vyhnúť sa blokátorom reklamy. Ak však chcete dosiahnuť skutočný výkon, potom je surový AMP spôsob, ako ísť.

AMP podľa príkladu

Ak ste používateľom WordPress, vo väčšine prípadov sa pridanie AMP do vášho blogu uskutoční pomocou doplnku. Ak však pracujete so stránkami vytvorenými na mieru, pridanie AMP sa môže prvýkrát zdať trochu náročné.

Naučte sa AMP podľa príkladu

Toto je kde AMP podľa príkladu príde vhod. Tento projekt je vedľajším projektom skutočnej platformy a podrobne popisuje každý kútik, ktorý je možné dosiahnuť pomocou AMP. Každá súčasť a efekt je dodávaná s poskytnutým ukážkou, aby ste videli, ako bude vyzerať.

Zaujímavé prípadové štúdie AMP:

  1. Terra zvyšuje mobilnú sledovanosť pomocou AMP
  2. Times of India vykazuje 1,5-násobné vyššie výnosy
  3. Fastcommerce riadi konverzie pre klientov tak, že najprv vytvorí AMP

# 6: Test pred potvrdením

V tomto dni a veku nie je ospravedlnenie, že pre svoj projekt nemáte samostatné pracovné prostredie. Väčšina platforiem typu cloud hosting v predvolenom nastavení ponúka pracovné prostredia, preto si overte u svojho poskytovateľa, či máte k nemu prístup.

testovanie pred potvrdením

Aké je pracovné prostredie?

Najrýchlejším spôsobom, ako to vysvetliť, je pozrieť sa na svoju aktuálnu webovú stránku.

Túto stránku nazývate produkčnou stránkou – verziu kódu, skriptov a obsahu v reálnom čase, na ktorej je založená vaša stránka. Pracovné prostredie v tejto súvislosti je kópiou vašej výrobnej stránky. Fiktívny web, ak chcete. A v tomto pracovnom prostredí môžete vykonávať zmeny alebo pridávať nové funkcie bez toho, aby ste prerušili svoje živé stránky.

Vždy si spomínam na príspevok Ashley Harppovej, Nestrácajte čas – Pred potvrdením vyskúšajte zmeny.

Jej snaha o to, ako „trikovať“, aby sme sa vyhli určitým veciam, je ukážkovým príkladom toho, ako nechceme prevziať zodpovednosť, keď urobíme chybu. Ashleyho príspevok však obsahuje aj odkazy na užitočné nástroje na nastavenie miestneho scénického prostredia.

Testovanie nie je také desivé, ako to znie. Je však isté, že je to strašidelné, keď omylom odstránite celú databázu na produkčnom serveri!

Záverečné vyhlásenie

Optimalizácia webových stránok pre plynulé používanie mobilných zariadení nie je tak zložitá. Všetko, čo potrebujete, je trochu odhodlanie a ochotne aplikujte načrtnuté metódy v tomto príspevku. Pravdepodobne ste už oboznámení s vecami, ako je ukladanie obsahu do vyrovnávacej pamäte a lenivé načítanie, ale čo sa týka stagingových prostredí alebo predbežných načítavačov?

Dúfajme, že tento príspevok vrhol trochu svetla na aktuálny stav optimalizácie webových stránok pre mobilné zariadenia. Neváhajte a zanechajte komentár alebo odporúčajte ďalšie riešenia.

Tagy:

  • 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