Google Talks o tom, ako vytvoriť webovú stránku elektronického obchodu vhodnú pre mobilné zariadenia

Alan vysvetľuje, ako navrhnúť váš mobilný web na indexovanie spoločnosťou Google.

Väčšina používateľov, ktorí vyhľadávajú, je na mobilných zariadeniach a Google prehľadáva stránky, ktoré hľadajú obsah na indexovanie pomocou používateľského agenta mobilného zariadenia v hlavičkách HTTP.

Ak ste úplným nováčikom v prehľadávaní a indexovaní webových stránok pomocou vyhľadávacích nástrojov, pozrite sa na Ako funguje vyhľadávanie stránku v Centre vyhľadávania Google.

Pri indexovaní mobilných stránok sa môže vyskytnúť niekoľko problémov, medzi ktoré patrí skutočnosť, že mobilné stránky môžu vynechať informácie dôležité pre indexovanie, aby sa zmenšila veľkosť stránky.

Aj keď to môže znížiť počet bajtov na stiahnutie, čím sa mierne zlepší výkon načítania, môže to viesť k tomu, že sa vaše stránky nebudú zobrazovať vo výsledkoch vyhľadávania tak často – nie je to dobrý vedľajší efekt.

Používateľské prostredie, ako sú tlačidlá Infinite Scroll a Load More, sú na mobilných zariadeniach často obľúbené.

Môžu však spôsobiť problémy s indexovým prehľadávaním, pretože sa predvolene nenačíta celý obsah stránky.

To môže viesť k tomu, že Google nenájde všetok váš obsah na indexovanie.

Pomocou služby Google Search Console zistite problémy s indexovaním vašej mobilnej stránky Google.

Optimalizujte svoj web pre rýchlejšie načítanie

Alan v treťom tipe povedal, že by ste mali tiež optimalizovať svoje stránky pre vyššiu rýchlosť stránok.

Rýchlosť stránok je väčším problémom pre mobilné zariadenia, pretože majú často nižší výkon a nižší výkon siete.

Alan tiež vysvetlil, že v predchádzajúcich epizódach sa zaoberal zlepšovaním výkonnosti obrázkov a JavaScriptu na vašom webe.

Môžu sa však vyskytnúť aj ďalšie problémy.

Jedným z nich je používanie webových písiem tretích strán. Ak stiahnutie webového písma chvíľu trvá, obsah sa môže najskôr zobraziť s predvoleným písmom, ktoré sa potom nahradí webovým písmom, keď bude k dispozícii.

To môže spôsobiť posun rozloženia obsahu, keď sa stránka preteká v dôsledku zmeny písma.

Čo je tiež potenciálne horšie, vykresľovanie môže byť úplne zablokované, kým sa nenačíta písmo.

Štatistiky rýchlosti stránky sú skvelým nástrojom na posúdenie, pretože zahŕňajú laboratórne údaje z umelých testov výkonnosti vášho webu a údaje z terénu založené na skúsenostiach používateľov v reálnom svete.

Pokiaľ ide o webové písma, chcete skontrolovať svoje stránky, aby ste zistili, či môžete znížiť počet písiem, ktoré používate.

Na začiatku stránky tiež odkazujte na najdôležitejšie písma, aby sa správne načítali a nespôsobovali problémy s posunom rozloženia.

Optimalizujte svoj web pre mobilnú použiteľnosť

Jeho ďalší tip je menej technický problém a viac problém použiteľnosti. Uistite sa, že vaše stránky sú čitateľné na malých obrazovkách a obrazovkách mobilných zariadení.

To zahŕňa veci, ako je zabezpečenie toho, aby sa obsah nevysypal z okraja obrazovky, zabezpečenie dostatočne veľkého textu na pohodlné čítanie a zabezpečenie toho, aby si používatelia mohli obsah priblížiť, ak sa chcú bližšie pozrieť.

Ďalším bodom je uistenie sa, že ikony tlačidiel sú dostatočne veľké na to, aby boli ľahko rozpoznateľné.

Dôrazne odporúčame pozrieť si toto video, ak vás vôbec zaujímajú technické detaily optimalizácie vašej mobilnej webovej stránky.

Alan Kent – ​​8 tipov na prepis vhodnosti pre mobilné zariadenia

ALAN KENT: Do akej miery je vaša webová stránka elektronického obchodu vhodná pre mobilné zariadenia a skutočne na tom záleží? Ahoj. Volám sa Alan Kent a som advokátom vývojárov v spoločnosti Google. V tejto epizóde budem hovoriť o dôležitosti toho, aby bol váš web elektronického obchodu vhodný pre mobilné zariadenia. Najzrejmejším dôvodom na obavy z vhodnosti pre mobilné zariadenia je skutočnosť, že viac ako polovica návštevnosti z vyhľadávania Google pochádza od používateľov mobilných zariadení. To je návštevnosť, ktorú potenciálne pošleme na vašu stránku. Navrhovanie skvelých zážitkov na mobilných zariadeniach môže byť náročné kvôli obmedzenej fyzickej ploche obrazovky v porovnaní so stolnými počítačmi a notebookmi. Ale hádajte čo? Jednoduchšie návrhy mobilných webových stránok často fungujú dobre aj na väčších obrazovkách. Jednoduchšie stránky môžu pomôcť kupujúcim sústrediť sa na nákupnú cestu s menším rozptyľovaním. Mobilná prívetivosť je pre používateľov jednoznačne dôležitá a Google chce používateľov nasmerovať na stránky, ktoré najlepšie zodpovedajú ich potrebám. Z tohto dôvodu spoločnosť Google publikovala množstvo článkov o tom, ako najlepšie vytvoriť webové stránky vhodné pre mobilné zariadenia. Pozrite si Centrum vyhľadávania Google a najmä web.dev, kde nájdete skvelé podrobné články. Poďme sa teda do toho pustiť, začnime s niektorými technickými tipmi a potom prejdime na tipy na používateľské skúsenosti.

Čítať:  PHP open_basedir: Ako zakázať PHP open_basedir na zlepšenie výkonu Magento

Niektoré stránky uprednostňujú samostatný názov domény pre mobilnú návštevnosť, aby mohli používateľom mobilných zariadení poskytnúť zjednodušenú používateľskú skúsenosť. Ak sa používateľ dostane na nesprávny názov domény, bude presmerovaný na inú stránku. Prvým tipom v takýchto prípadoch je udržiavať tieto dve lokality v synchronizácii. Na udržiavaní dvoch webových stránok nie je vo svojej podstate nič zlé, ale môže to viesť k oneskoreniu obsahu, funkčnosti alebo výkonu na jednej z týchto dvoch stránok. Rozdiely v obsahu a funkčnosti môžu byť pre nakupujúcich obzvlášť nepríjemné, keď ich navštívia z rôznych zariadení. Ak sa rozhodnete spravovať dve lokality, môžu sa vám hodiť automatické nástroje, ako je napríklad Bábkový program, na kontrolu, či sa tieto dve lokality správajú podobne. Puppeteer poskytuje rozhranie API na ovládanie bezhlavej inštancie prehliadača Chrome, vďaka čomu je skvelý na automatizáciu testov ako súčasť procesu zostavovania. S disciplínou môžete synchronizovať dve lokality. Len sa uistite, že ste vždy vyčlenili dostatočný rozpočet na pokrytie práce na oboch lokalitách. Lepším riešením však môže byť konsolidácia týchto dvoch stránok pomocou responzívneho webového dizajnu. Responzívny webový dizajn využíva techniky, ako sú mediálne dopyty CSS, na zmenu rozloženia stránky na základe šírky oblasti zobrazenia. To môže uľahčiť poskytovanie konzistentných skúseností vo všetkých zariadeniach a potenciálne znížiť celkové náklady na vývoj.

Druhým tipom je uistiť sa, že ste navrhli svoj mobilný web na indexovanie spoločnosťou Google. Keďže väčšina používateľov zadáva vyhľadávanie na mobilných zariadeniach, Google prehľadáva stránky, ktoré hľadajú obsah na indexovanie pomocou používateľského agenta mobilného zariadenia v hlavičkách HTTP. Ak ste nováčikom v prehľadávaní a indexovaní webových stránok pomocou vyhľadávacích nástrojov, pozrite si našu stránku Ako funguje vyhľadávanie v Centre vyhľadávania Google. Príklady problémov, ktoré sa môžu vyskytnúť pri indexovaní mobilných stránok, zahŕňajú mobilné stránky, ktoré môžu vynechať informácie dôležité pre indexovanie zo stránok, aby sa zmenšila veľkosť stránky. Aj keď to môže znížiť počet bajtov na stiahnutie, čím sa mierne zlepší výkon načítania, môže to viesť k tomu, že sa vaše stránky nebudú zobrazovať vo výsledkoch vyhľadávania tak často, čo nie je dobrý vedľajší efekt. Používateľské prostredie, ako napríklad tlačidlá Infinite Scroll a Load More, sú na mobilných zariadeniach často obľúbené. Môžu však spôsobiť problémy s indexovým prehľadávaním, pretože celý obsah stránky sa štandardne nenačítava. To môže viesť k tomu, že Google nenájde všetok váš obsah na indexovanie. Ak chcete zistiť problémy s indexovaním vašej mobilnej stránky Google, vyskúšajte Google Search Console. Google Search Console poskytuje bohaté informácie o tom, čo Google indexoval na vašom webe, vrátane správ o zistených problémoch. Ak chcete získať ďalšie informácie, pozrite si Danielovu skvelú sériu videí o tom, ako čo najlepšie využiť službu Google Search Console. Ak chcete Googlu pomôcť nájsť všetky vaše stránky, zvážte použitie súboru sitemap alebo poskytnutie informačného kanála všetkých vašich produktových stránok v službe Google Merchant Center. Poskytujú Googlu alternatívne cesty na objavenie stránok na vašom webe, namiesto toho, aby sa spoliehali len na indexové prehľadávanie.

Čítať:  Ako vyťažiť maximum z Gutenverse pre WordPress

Tip číslo tri je optimalizácia webu na rýchlosť webu. Rýchlosť stránok je vo všeobecnosti väčším problémom pre mobilné zariadenia, pretože majú často nižší výkon a nižší výkon siete. V predchádzajúcich epizódach som sa venoval zlepšeniu výkonu obrázkov a JavaScriptu na vašej stránke. Do popisu som zahrnul odkaz, aby ste si mohli pozrieť tieto epizódy a získať ďalšie informácie. Môžu sa však vyskytnúť aj ďalšie problémy, napríklad pri používaní webových písiem. Ak stiahnutie webového písma chvíľu trvá, obsah sa môže najskôr zobraziť s predvoleným písmom, ktoré sa potom nahradí webovým písmom, keď bude k dispozícii. To môže spôsobiť posun rozloženia obsahu, keď sa stránka preteká v dôsledku zmeny písma. Čo je horšie, vykresľovanie môže byť úplne zablokované, kým sa nenačíta písmo. PageSpeed ​​Insights je užitočný nástroj na analýzu webových stránok. Poskytuje množstvo správ týkajúcich sa výkonnosti. Nástroj PageSpeed ​​Insights je obzvlášť užitočný, pretože zahŕňa laboratórne údaje z umelých testov výkonu na vašom webe a údaje z terénu založené na skutočných používateľských skúsenostiach na vašom webe. Väčšina problémov identifikovaných v prehľade PageSpeed ​​Insights obsahuje rady, ako tieto problémy vyriešiť. V prípade webových písiem skontrolujte svoju lokalitu a zistite, či môžete znížiť počet písiem, ktoré používate. Pokúste sa tiež odkázať na najdôležitejšie písma na začiatku stránky, aby sa správne načítali. Podrobnejšie rady nájdete v článku Katie na web.dev o webových fontoch. Posledná rada týkajúca sa rýchlosti stránky je, že ak ju nemôžete urobiť rýchlo, urobte ju zmysluplnou. Ak napríklad odoslanie objednávky trvá nejaký čas a nemôžete s tým nič urobiť, počas čakania zákazníkovi ukážte špeciálne ponuky alebo nadchádzajúce udalosti.

Tip číslo štyri je menej technickým problémom a viac zohľadňuje použiteľnosť. Ide o to, aby boli stránky z vašej lokality čitateľné na malých obrazovkách a obrazovkách mobilných zariadení. To zahŕňa zabezpečenie toho, aby sa obsah nerozsypal po stranách obrazovky, ubezpečenie sa, že text je dostatočne veľký na pohodlné čítanie, uistenie sa, že používatelia môžu obsah priblížiť, ak sa chcú bližšie pozrieť, a uistiť sa, že ikony tlačidiel sú dostatočne veľké na to, aby ľahko rozpoznateľný. Ak chcete otestovať tieto problémy, môžete samozrejme vyskúšať svoj web na svojom vlastnom telefóne a tiež požiadať priateľov s rôznymi značkami telefónu, aby to vyskúšali. Počas vývoja však môžete použiť aj nástroje, ako sú nástroje pre vývojárov Chrome, na výber mobilného zariadenia, ktoré chcete emulovať s prehliadačom na počítači. Môže to uľahčiť testovanie toho, ako bude vaša stránka vyzerať na rôznych zariadeniach. Ak máte radi automatizáciu testov, opäť môže byť užitočný Puppeteer.

Čítať:  Google hovorí o alternatívnom texte a ako to ovplyvňuje použiteľnosť

Oprava vašej lokality po zistení akýchkoľvek problémov je zvyčajne záležitosťou prepracovania značiek HTML a CSS na vašej webovej lokalite.

Okrem čitateľnosti sa uistite, že váš web netrpí bežnými problémami s mobilnou použiteľnosťou. Príklady zahŕňajú navigačné štruktúry, ako napríklad, že ponuky sú príliš ťažké na použitie na malom zariadení, tlačidlá sú príliš malé na to, aby sa dali ľahko klepať, tlačidlá sú umiestnené spôsobom, ktorý nie je vhodný pre použitie jednou rukou, a prílišné spoliehanie sa na vstup z klávesnice pri navigácii na vašom webe. . Mnoho problémov s použiteľnosťou je najlepšie nájsť vykonaním analýzy použiteľnosti vášho webu. Sledovať, ako sa nový používateľ pokúša nájsť produkt a dokončiť nákup na vašom webe, môže byť pre oči otvorené. To, čo je vám zrejmé, nie je vždy zrejmé prvému návštevníkovi. A nezabudnite skontrolovať skúsenosti s dolaďovaním vo výsledkoch vyhľadávania na stránkach. Zadávanie textu je vo všeobecnosti ťažšie na mobilnom zariadení, preto sa uistite, že na spresnenie vyhľadávania nevyžadujete opätovné zadávanie textu. Okrem manuálnych kontrol možno na nájdenie niektorých problémov použiť nástroje. Nástroje majú tú výhodu, že ich môžete integrovať do procesu vytvárania a vydávania vašich webových stránok. Vyskúšajte napríklad testovací nástroj pre mobilné zariadenia. Jednoducho zadajte adresu URL stránky na vašom webe a bude analyzovať bežné problémy, ako napríklad, že tento web používa zastaraný doplnok, ako je Flash, vlastnosť zobrazovanej oblasti nie je definovaná v metaznačke a veľkosť písma je príliš malý na pohodlné čítanie. Google Search Console má tiež prehľad mobilnej použiteľnosti pre stránky, ktoré Google indexoval na vašom webe. V ponuke bočného panela vyhľadajte položku Mobilná použiteľnosť.

Problémy s použiteľnosťou sa opäť vo všeobecnosti riešia prepracovaním HTML a CSS na vašej webovej lokalite a následným testovaním, aby ste sa uistili, že problém bol vyriešený.

Tip číslo šesť je pochopiť a zjednodušiť používateľskú skúsenosť na vašom webe. Príklady spoločných oblastí na zlepšenie zahŕňajú formuláre na zhromažďovanie podrobností o platbe a dodaní pri pokladni a karusely sú obľúbeným spôsobom, ako zabaliť viac informácií do priestorov s obmedzenou obrazovkou. Používanie techník, ako sú progresívne webové aplikácie alebo skrátene PWA, môže tiež poskytnúť používateľom bohatšie skúsenosti s aplikáciou na vašom webe. Detekcia problémov vo vašich používateľských tokoch si vo všeobecnosti vyžaduje manuálnu analýzu použiteľnosti. Nástroje môžu pomôcť odhaliť dobre známe problémy, ale nemožno sa na ne spoliehať, že nájdu všetky problémy s použiteľnosťou. Pri používaní formulárov sa uistite, že vaša stránka správne podporuje automatické dopĺňanie platobných a dodacích údajov. Ak sa chcete dozvedieť viac, pozrite si skvelý obsah a formuláre od Sama Duttona na web.dev. Ak stránka udržiava databázu zákazníkov s heslami, uistite sa, že polia formulára sú správne označené, aby prehliadače mohli používateľom ponúknuť zapamätanie si hesiel. S heslami sa v porovnaní so štandardnými poľami automatického dopĺňania a automatického dopĺňania musí zaobchádzať obzvlášť opatrne, aby sa zaistila ich bezpečnosť. Ešte lepšie je zvážte použitie poskytovateľa identity tretej strany, ako je napríklad Google, aby si zákazníci nemuseli pamätať ďalšie heslo. Každá lokalita, ktorá spravuje svoju vlastnú databázu hesiel, zvyšuje riziko krádeže hesiel, čo môže následne spôsobiť zraniteľnosť iných lokalít, pretože mnohí používatelia opakovane používajú heslá na rôznych lokalitách. Ak na svojej stránke používate kolotoče, pozrite si Katine skvelé rady na web.dev. Praktiky, ako je automatický posun v karuseloch, môžu vyzerať okázalo, ale často vedú k horšiemu používateľskému dojmu. Progresívne webové aplikácie a potenciálne súvisiace jednostránkové aplikácie alebo SPA sú rozsiahlou oblasťou a presahujú rámec tohto videa. Pozrite si web.dev, kde nájdete skvelé články o PWA.

Čítať:  Ako znovu zverejniť príbeh Instagramu niekoho iného

Tipom číslo sedem je personalizácia na mobilných zariadeniach. Používatelia mobilných zariadení vo všeobecnosti viac očakávajú personalizáciu. To je ovplyvnené viacerými faktormi, vrátane mobilných zariadení, ktoré sa zvyčajne nezdieľajú, a preto sú vo svojej podstate osobné, a menšie obrazovky znamenajú, že je dôležitejšie, aby to, čo sa zobrazuje, relevantné pre používateľa. Efektívnym spôsobom, ako zistiť, či by váš web mohol profitovať z personalizácie, je vykonať audit webu. Napríklad rozhovory s nakupujúcimi sú skvelým spôsobom, ako získať hlbší prehľad o očakávaniach vašich používateľov. Personalizácia má mnoho podôb. Môže to byť také jednoduché, ako zobrazenie produktov na domovskej stránke, ktoré si používateľ prezeral pri poslednej návšteve, alebo zobrazenie ručne zostavených ponúk na základe profilu používateľa. Personalizáciu je možné rozšíriť aj pomocou motorov odporúčaní riadených AI na základe akcií používateľov na stránke. V súčasnosti je na trhu veľa skvelých produktov na prispôsobenie a odporúčanie, vrátane produktov od spoločnosti Google. Personalizácia často ťaží zo zapamätania si používateľov. Používanie súborov cookie je bežný spôsob, ako si zapamätať chute používateľa z predchádzajúcej návštevy bez toho, aby poznali jeho úplnú identitu. Alternatívne môže stránka ponúkať prispôsobenejšiu návštevu, ak si používateľ vytvorí účet a prihlási sa a prijme všetky zmluvné podmienky na zhromažďovanie a uchovávanie údajov o kupujúcom.

Posledným tipom je skontrolovať, či váš web dokáže využiť pokročilejšie metódy vstupu poskytované mobilnými zariadeniami, ako sú dotykové obrazovky, fotoaparáty, služby určovania polohy a hlasový vstup. Zákazníkom môžu ponúknuť nové a pútavé spôsoby interakcie s vašou webovou stránkou. Medzi príklady pokročilých interakcií patrí používanie gest stiahnutia a potiahnutia na priblíženie a prezeranie obrázkov produktov na stránke produktu, používanie služieb určovania polohy na zobrazenie produktov používateľov najskôr v najbližšom kamennom obchode, podpora hlasového vstupu na zníženie potreby písať na mobilnej klávesnici. , ktorá používateľovi poskytuje zážitok z rozšírenej reality, aby si mohol lepšie predstaviť, ako vyzerá kus nábytku vo svojom vlastnom dome pred kúpou, a vykonáva vyhľadávanie obrázkov produktov na základe vzorových vzorov materiálov nasnímaných fotoaparátom pomocou povrchov, ako je rozhranie Vision API od spoločnosti Google. Mobilné webové prehliadače teraz podporujú mnohé, ale nie všetky funkcie natívnych aplikácií. Pozrite si projekt Fugu spoločnosti Google, kde nájdete zoznam takýchto pokročilých funkcií, aby ste videli, čo je možné. Môžete tiež použiť stránky ako caniuse.com, aby ste zistili, do akej miery je konkrétna funkcia podporovaná v rôznych prehliadačoch, skôr než túto funkciu použijete na svojej vlastnej lokalite. Upozorňujeme, že ak funkcia nie je vo všetkých prehliadačoch, JavaScript zvyčajne dokáže zistiť, či je funkcia dostupná alebo nie, a primerane reagovať. To znamená, že nie je potrebné, aby všetky prehliadače podporovali danú funkciu, aby ste ju mohli využívať na svojej vlastnej stránke. Ďakujeme, že ste si pozreli túto epizódu, aby ste urobili svoj web vhodný pre mobilné zariadenia. Ak chcete byť informovaní o novom obsahu, keď bude k dispozícii, prihláste sa na odber. Dobudúcna.

Nové Publikácie:

ODPORÚČANIE