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 # 1: Ontwerp met die oog op mobiele toestelle
2 # 2: Optimalisering van hulpbronne; prente, ikone, ens.
3 # 3: Voorlaai en lui-laai
3.1 Wat is lui laai??
4 # 4: caching op die web
4.1 Wat is 'n CDN (Content Delivery Network)?
5 # 5: AMP (versnelde mobiele bladsye)
5.1 AMP deur Voorbeeld
6 # 6: Toets voordat u begin
# 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.
Die 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.
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?
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.
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.
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)?
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?
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.
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.
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:
Terra stimuleer mobiele kyker met AMP
Times of India berig 1,5X meer omsetopbrengste
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.
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!
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.