Hoe kan u u webwerf vir mobiele gebruikers optimaliseer?

Het u seker gemaak dat u webwerf mobielvriendelik is??


Het u geweet dat Google ‘n nuwe beleid genaamd Mobile-First ingestel het? Meer en meer webgebruikers skuif weg van tafelrekenaars, en blaai in plaas daarvan deur hul mobiele toestelle te koop.

Responsiewe webontwerp het dit moontlik gemaak om webwerwe te skep wat eweredig oor alle platforms werk. Maar selfs dan is responsiewe ontwerp slegs ‘n fraksie van UX-optimaliseringstrategieë vir mobiele toestelle.

As u ware prestasieoptimalisering wil hê, sal u ook ander alternatiewe moet oorweeg.

Daarom is daar so ‘n sterk klem op die bou van u webwerf as ‘n mobiele eerste ervaring. In eenvoudige terme beteken mobile-first dat u ontwerp en inhoud eerstens vir mobiele gebruikers geoptimaliseer is.

Dit gesê, hierdie artikel gaan nie oor die ontwerp van ‘n heeltemal nuwe webwerf nie. In plaas daarvan, gaan ons na ‘n paar fundamentele mobiele eerste-ontwerpbeginsels kyk. En spandeer ‘n geruime tyd om te fokus op tegniese aspekte om die gebruikerservaring vir u mobiele gebruikers te optimaliseer.

# 1: Ontwerp met die oog op mobiele toestelle

Die web is grootliks gebou op die beginsel van bediening van tafelgebruikers. Die regte web, die regte vooruitgang in tegnologie, word die beste vertoon op ‘n pragtige volskermvertoning. Maar slimfone en ander mobiele toestelle is ‘n ding, en dit is tyd om aan te pas by die konsep van die eerste mobiele ontwerp.

Behalwe die reaksie op gesonde verstand, watter ander ontwerpelemente moet u implementeer in u mobiele web-ontwerpe?

  • prioritisering. Mobiele skerms is beperk tot die beskikbare vertoonruimte. Mobiele skerms vertoon ook inhoud vertikaal, in teenstelling met veel wyer – horisontale strukture vir desktops. Dit beteken dat u met behulp van prioritisering moet ontwerp. Watter elemente is uiters belangrik vir gebruikers om te sien? As daar CTA-knoppies is, hoe maklik is dit dan om dit vir die mobiele gebruiker te sien?
  • Inhoud eers. Kleur tweede in. U kan ‘n paar interessante dinge doen met mobiele ontwerp, maar beslis nie binne die omvang van tafelrekenaarsontwerp nie. Gee eers plek vir inhoud. Maak u kopie en ander inhoudsdele maklik leesbaar en toeganklik. ‘N Mobiele skerm is baie minder vergewensgesind vir visuele elemente.
  • Maklike navigasie. Op ‘n mobiele toestel kan u nie op enige plek klik en terugkeer na die tuisblad nie. Tensy u natuurlik van vooraf hierdie tipe navigasie beplan. En jy moet. Eksperimenteer met Scroll-to-Top-widgets, maar ook naatlose kleefkoppe waar moontlik.

Die beste manier om na te gaan of u dit reg doen, is om u eie telefoon te gebruik (ek doen dit heeltyd!) En u webwerf te besoek. Doen ‘n deeglike ondersoek van hoe dinge voel en saamvloei.

As jy in ‘n kafee sit of op ‘n lughawe vlug, steek iemand op die skouer en vra hulle beleefd om jou webwerf vir jou na te gaan. Sit dan terug en hoor hul terugvoer. Die meeste kere sal u uself verras met die manier waarop mense die gebruikerservaring van u webwerf waarneem.

# 2: Optimalisering van hulpbronne; prente, ikone, ens.

Hoe gereeld vind u dat u beeldmateriaal gebruik ter wille van persoonlike voorkeur en nie UX nie? Dit gebeur wel, en as u kreatief wil wees, is dit die moeite werd om te verstaan ​​hoe media-optimalisering werk.

Visuele elemente soos foto’s, illustrasies, ikone en video’s is die grootste bandwydteverbruikers op webblaaie.

Gemiddelde bladsytyd vir 2018 Hoe vergelyk joune MachMetrics Speed ​​BlogDie gemiddelde webbladgrootte in 2018. Genoteer deur nywerhede en verskillende lande.

Alhoewel daar nie ‘n vasgestelde webbladsygrootte is waaraan almal moet voldoen nie, is dit die algemene verstand dat kleiner webbladsye gelyk is aan vinniger laai tye.

Hoe kan u u ekstra visuele inhoud of ekstra KB’s of selfs MB’s snoei??

  • Verander die grootte van u prente. Klink eenvoudig, nie waar nie? Wel, ek kan nie tel hoeveel keer ek op ‘n mobiele webwerf deurgeblaai het nie, net om 1980 x 1200-prente op die agtergrond te laai. In plaas daarvan moet foto ‘s van groot grootte, indien toepaslik, as alternatiewe skakels voorsien word. Afmeting van grootte verander tot 80% van die totale beeldgrootte, afhangende van die vereiste afmetings. Vir mobiele toestelle is daar egter nooit ‘n rede om bo die 600-700 px-reeks te styg nie.
  • Verminder lêergrootte met kompressie. Beeldkompressie / -optimalisering is die proses om sagteware van derdepartye te gebruik om die aantal kleure wat in ‘n beeld voorkom, te verminder. Dit kan gedoen word in ‘n mate dat u foto’s nie hul aangebore kwaliteit verloor nie, maar dat hul lêergrootte drasties verminder word. As u hulp nodig het om beelde saam te pers, moet u nie verder kyk as ons uitgebreide samestelling van instrumente vir beeldkompressie nie.
  • Verken alternatiewe lêerformate. Almal het gehoor van PNG- en JPEG-lêerformate. Dit is immers die de facto-beeldstandaarde op die web. Maar nie vir lank nie. Die nuutste en beste tegnologie in die lewering van digitale afbeeldings draai om WebP en SVG-lêerformate. SVG’s kan byvoorbeeld outomaties skaal na skermgrootte, verminder die aantal hulpbronne wat nodig is om spesifieke visuele komponente te laai.

Optimalisering van gebruikerservaring vir mobiele eerste is maar ‘n bedenklike ding. Om op impuls te ontwerp, beteken dat u nie die langtermyngevolge van u besluite in ag neem nie. Terwyl ‘n bedagsame benadering u help om van die grond af met mobiele gebruikers in gedagte te hou.

Insig: As u in lyn is met die konsep van intuïtiewe mobiele ontwerp, hoef u nie dieselfde visuele komponente op u mobiele ontwerpe te hergebruik nie. As u ‘n paar agtergrondprentjies uitskakel en dit met kleure agtergronde vervang – op mobiele toestelle – kan dit nie die gebruikerservaring benadeel nie. Soek altyd maniere om selfs die kleinste hoeveelheid bandwydte te bespaar.

# 3: Voorlaai en lui-laai

Is dit nodig om alle mediabronne op bladsye te laai wat ‘n aansienlike hoeveelheid tyd neem om te lees? En kan dit help om eksterne bladsye te lewer voor gebruikers wat hulle besoek??

Kom ons kyk eers na voorladen, ook bekend as wenke wenke.

Voorlaaiers is maniere waarop ‘n bladsy die blaaier kan vertel van moontlike navigasie-geleenthede. Bv ‘N Gebruiker kan bladsy B van bladsy A besoek.

Met die vooraflading kan die gebruiker bladsy B weergee voordat hy op die navigasiekakel op bladsy A klik.

voorlading-richtlijn

Onthou dat vooraflading nie altyd werk nie, en die webblaaier moet die finale besluit neem. Faktore soos toesteltipe en bandwydte word afsonderlik geweeg.

Wat is die algemeenste soorte voorlaaier??

  • gaan haal. Hierdie tipe dui daarop dat ‘n spesifieke URL waarskynlik die volgende navigasie-keuse is. En as die blaaier die versoek toestaan, sal dit belangrike bladsybronne outomaties opgee, wat weer die volgende bladsy vinniger laat laai.
  • Prerender. Terwyl die bogenoemde tipe slegs sekere bronne haal, sal die voorblad die hele bladsy kas. Alle weergegee inhoud word in die gebruikersgeheue van die gebruikers gestoor.
  • DNS-Haal. DNS-prefetch sal die gespesifiseerde DNS en niks anders oplos nie. As gevolg hiervan, as ‘n gebruiker ‘n spesifieke ‘draai’ op jou webwerf maak, skeer jy in wese die tyd wat dit neem om te navigeer.
  • Preconnect. Dieselfde as hierbo, maar skep ook verbindings en handdruk met TCP- en TLS-verbindings.

Wat is ‘n paar voorbeelde van kode vir voorlaaiers?

Aangesien voorladen dinamiese HTML-etikette gebruik, kan u dit doen laai vooraf inhoud soos Google Fonts of skep ‘n pasgemaakte skripsie om JavaScript-bates vooraf in WordPress te laai.

BTW, as u WordPress dan gebruik WP-vuurpyl kan u hiermee help om u webwerf te laai.

Noudat u meer weet oor voorlaaiers, praat ons van die ander onderwerp: lui-laai.

Wat is lui laai??

As u ‘n nuwe webblad besoek, of dit nou ‘n blogpos of ‘n statiese webwerf is, haal die blaaier die hele bladsyinhoud en dien dit dan as ‘n oorspronklike blaaiervaring. In die meeste gevalle word u gedwing om die hele bladsy af te laai sonder om verder as bo die vou te sien.

Terwyl daar by lui laai gesê word, word die blaaier aangesê om inhoud te laai wat slegs binne die gebruiker se uitsig is. Dus, as daar groottesensitiewe foto’s of video’s by ‘n sekere bladsy gevoeg word, sal die lêers slegs vertoon word wanneer u blaaierskerm daardie deel van die webwerf bereik..

En as jy bekommerd is oor potensiële SEO-probleme, moet jy dit nie doen nie. Yoast het dit bevestig Google lewer wel bladsye wat lui laai gebruik, en sien dit as net nog ‘n seinverbeteringsein.

Layzr js

My aanbeveling om ‘n biblioteek te gebruik is Layzr.js – Eenvoudige en effektiewe lui-laai vir u beelde! Die skrip word ook op die tuisblad van die projek geaktiveer, sodat u dit intyds kan sien uitvoer. WordPress-gebruikers kan dosyne lui-laai-inproppe in die openbare inprop-repo vind.

# 4: caching op die web

Webcache is gebaseer op die konsep van die kopiëring van ‘n weergawe van ‘n bladsy, wat dan te eniger tyd aan die gebruiker aangebied kan word. Bladsye word tydens die eerste besoek aan ‘n webwerf se bladsy gekas. As ‘n nuwe gebruiker dan toegang tot daardie bladsy probeer verkry, sal die webbediener in plaas daarvan om die regstreekse weergawe te dien, die cache-weergawe vertoon.

Die doel van enige vorm van kasgeheue is om die prestasie van die webwerf te verbeter en die nodige hulpbronne vir agterkop te verminder. Afhangend van u caching-oplossing, kan u pasgemaakte intervalle en ander gebeurtenisse op die sneller instel.

web-kas

Van die gewildste name in web-cache is vernis, inkvis en memcached. Maar wees gerus dat daar baie ander oplossings op die mark is, veral as u ‘n WordPress-gebruiker is.

U kan dit ook oorweeg om aan te meld vir ‘n CDN.

Wat is ‘n CDN (Content Delivery Network)?

‘N Inhoudsafleweringsnetwerk gebruik ‘n wêreldwye groep verspreide bedieners om ongelooflike vinnige aflewering van inhoud te lewer. A CDN kan vinnig alle gewilde inhoudsoorte op die web oordra: video, foto, JavaScript, ens. Deesdae gaan die meeste webwerwe deur een of ander vorm van ‘n CDN.

Die een ding wat u moet onthou oor inhoudleweringsnetwerke is dat dit die beste werk as dit op ‘n hoëvraagwebwerf gebruik word. As u dus slegs ‘n paar duisend besoekers per maand bedien, kan dit moeilik wees om opmerklike verbeterings te sien. Nietemin is ‘n CDN ‘n uitstekende oplossing om u laai van u webwerf te verbeter, die koste van bandwydte te verminder, die beskikbaarheid van inhoud te verhoog en algehele veiligheid te versterk.

As u nie vorige ervaring met CDN’s het nie, beveel ons aan dat u dit probeer Cloudflare – hulle bied ‘n gratis plan vir ewig, en dit is ‘n wonderlike platform om mee te leer. En as Cloudflare nie aan u verwagtinge voldoen nie, gaan ons gerus na die beste gratis CDN-aanbieders op die mark.

# 5: AMP (versnelde mobiele bladsye)

Google se AMP-projek is mobiele-optimalisering op steroïede! In wese strook AMP van u bladsye af na blote noodsaaklikhede om ‘n super-vinnige laai-ervaring te bied, maar ook om inhoudleesbaarheid ‘n prioriteit te gee. Gegewe hoe belangrik bladsy-snelheid is, kan u die waagmoed insamel om nee te sê vir byna oombliklike laaitye?

Google AMP (versnelde mobiele bladsye)

Goed, al die gonswoorde klink wonderlik, maar hoe werk AMP eintlik??

AMP is ‘n blote knop-bladsy met sekere beperkings vir watter soort inhoud vertoon kan word. Dit lei tot baie vinniger laaitye, en algehele prestasie as gevolg van die beperking van die uitvoering van skrifte en so meer.

JavaScript werk byvoorbeeld nie met AMP nie. Tensy u natuurlik die AMP JS-biblioteek beskikbaar op GitHub. As u die JS-biblioteek gebruik, kan u sekere resultate bereik, soos om advertensieblokkeerders te vermy, maar as u ware prestasies wil hê, dan is rou AMP die manier om te gaan.

AMP deur Voorbeeld

As u ‘n WordPress-gebruiker is, sal AMP in die meeste gevalle met die hulp van ‘n inprop gedoen word. Maar as u met ‘n pasgemaakte werf werk, kan AMP vir die eerste keer bygevoeg word ‘n bietjie uitdaging.

Leer AMP volgens voorbeeld

Dit is waar AMP deur Voorbeeld handig te pas kom. Hierdie webwerf is ‘n syprojek op die werklike platform, en bevat elke moontlike hoek en haak wat met AMP bereik kan word. Elke komponent en effek word voorsien van ‘n demo sodat u kan sien hoe dit sou lyk.

Interessante gevallestudies vir AMP:

  1. Terra stimuleer mobiele kyker met AMP
  2. Times of India berig 1,5X meer omsetopbrengste
  3. Fastcommerce bewerk omskakelings vir kliënte deur AMP-first te bou

# 6: Toets voordat u begin

Daar is in hierdie tyd geen verskoning om nie ‘n aparte verhoogomgewing vir u projek te hê nie. Die meeste wolk-gasheerplatforms bied standaard instellingsomgewings aan, dus maak seker van u verskaffer om te sien of u toegang tot een het.

toets voordat u begaan

Wat is ‘n verhoogomgewing?

Die vinnigste manier om dit te verduidelik is deur na u huidige regstreekse webwerf te kyk.

Hierdie webwerf noem u ‘n produksieterrein – ‘n intydse weergawe van al die kodes, skrifte en inhoud waarop u webwerf gebaseer is. ‘N Toneelomgewing in hierdie konteks is ‘n kopie van u produksie-webwerf. ‘N Dummy webwerf as jy wil. En in hierdie omgewing kan u veranderings aanbring of nuwe funksies byvoeg sonder om u regstreekse webwerf te breek.

Ek dink altyd terug aan die pos van Ashley Harpp, Moenie tyd mors nie – toets veranderinge voordat u aangaan.

Haar idee van hoe ons onsself ‘mislei’ om sekere dinge te vermy, is ‘n uitstekende voorbeeld van hoe ons nie verantwoordelikheid wil neem as ons ‘n fout maak nie. Desondanks bevat die pos van Ashley ook skakels na nuttige instrumente om ‘n plaaslike verhoogomgewing op te stel.

Toetsing is nie so eng as wat dit klink nie. Maar dit is seker, want dit is skrikwekkend as u per ongeluk u volledige databasis op ‘n produksieserver verwyder!

Sluitingsverklaring

Dit is nie so moeilik om u webwerf te optimaliseer vir ‘n gladde mobiele ervaring nie. Al wat u nodig het, is ‘n bietjie vasberadenheid en pas die gesketste metodes in hierdie pos gewillig toe. Die kans is goed dat u al vertroud is met dinge soos die inhoud van die geheue en die laai van inhoud, maar wat van die omgewings of voorladen?

Hopelik werp hierdie pos ‘n bietjie lig op die huidige stand van mobiele webwerfoptimalisering. Voel vry om kommentaar te lewer of aanvullende oplossings aan te beveel.

Tags:

  • 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