WooCommerce woensdag: WooCommerce mobiele optimalisatiegids Tegenwoordig is meer dan de helft van al het internetgebruik afkomstig van mobiele apparaten. Als u uw winkel niet optimaliseert om tegemoet te komen aan meerdere schermformaten, loopt u een groot deel van uw doelgroep mis. Daarom hebben we deze WooCommerce-gids voor mobiele optimalisatie

Leestijd: 10 minuten

Bron

Tegenwoordig is meer dan de helft van al het internetgebruik afkomstig van mobiele apparaten. Als u uw winkel niet optimaliseert om tegemoet te komen aan meerdere schermformaten, loopt u een groot deel van uw doelgroep mis. Daarom hebben we deze WooCommerce-gids voor mobiele optimalisatie.

Wat zijn de uitdagingen bij het creëren van een geweldige mobiele ervaring?

In deze gids zullen we onderzoeken hoe u uw WooCommerce-winkel kunt optimaliseren om een snelle en gebruiksvriendelijke mobiele ervaring te creëren.

Bespaar geld door producten op jouw manier te verkopen

Onze Managed WordPress eCommerce bevat meer dan $ 5.000 aan gratis premium WooCommerce-extensies, waardoor je producten op jouw manier kunt verkopen, met extra maatwerk.

Gespecialiseerde winkeluitbreidingen kunnen honderden, zelfs duizenden dollars per jaar kosten als je ze allemaal aan je winkel hebt toegevoegd.

Maar met onze Managed WordPress eCommerce kun je precies de winkel bouwen die je nodig hebt om abonnementen te verkopen, afspraken te boeken, digitale downloads mogelijk te maken en nog veel, veel meer – met gratis toegang tot meer dan $ 5.000 aan premium WooCommerce-extensies.

Kom meer te weten

Prestatieproblemen

Mobiele sites laden doorgaans langzamer dan desktopsites. Desktopcomputers hebben krachtigere processors en hebben meestal een betere verbinding. Bovendien werken mobiele en desktopbrowsers anders, waarbij de laatste beter is uitgerust om pagina’s met veel verzoeken te verwerken.

Beveiliging is een andere uitdaging bij het maken van een geweldige mobiele e-commercesite. Sommige mensen zijn van nature voorzichtig met het online verstrekken van hun betalingsgegevens. Deze bezorgdheid wordt groter bij het winkelen op een mobiel apparaat. Merken moeten dit tegengaan door een manier te vinden om de geloofwaardigheid en betrouwbaarheid van hun mobiele site te vergroten.

Product- en bestelinformatie presenteren

Met minder schermruimte is het moeilijker om klanten alle informatie te geven die ze nodig hebben. Als u producten heeft met gedetailleerde beschrijvingen, moeten gebruikers behoorlijk wat scrollen om toegang te krijgen tot de informatie. Hetzelfde geldt voor categoriepagina’s. Door uw collecties bladeren om het beste product te vinden, duurt op een telefoon langer dan op een computer.

Met een mobiele site moet u ook een manier vinden om bestelgegevens te presenteren via de betaalervaring. Deze elementen nemen kostbare schermruimte in beslag, maar als u ze niet opneemt, moeten uw klanten teruggaan naar vorige pagina’s om hun winkelwagentje te bekijken.

Hoe u de mobielvriendelijkheid van uw WooCommerce-site kunt testen

Voordat we ingaan op hoe je de mobiele ervaring voor je WooCommerce-winkel kunt verbeteren, wil je weten hoe je de huidige mobiele versie van je site kunt testen. Als u dit doet, wordt u geïnformeerd over de beste gebieden voor optimalisatie.

Er zijn verschillende manieren waarop u de mobielvriendelijkheid van uw site kunt testen. Een goed startpunt is de Google Mobile-Friendly Test- tool. De tool maakt gebruik van een door Google zelf ontworpen test, waardoor je een duidelijk inzicht krijgt in de technische factoren die de zoekmachine belangrijk vindt voor het creëren van een geweldige gebruikerservaring.

Nadat u een URL heeft ingevoerd, geeft de tool een gerenderde versie van de pagina weer en geeft aan of deze mobielvriendelijk is.

Ga aan de slag met mobiele optimalisatie van WooCommerce door te bepalen op welke pagina’s u zich moet concentreren.

U kunt zien welke elementen van invloed zijn op de prestaties van uw site door op Details bekijken te klikken. Als u dit doet, gaat u naar een rapport dat uw paginabronnen toont en problemen ondervindt bij het laden op mobiel.

Deze tool kijkt naar pagina’s zoals een shopper zou doen, waardoor je een voorsprong hebt op WooCommerce mobiele optimalisatie.

De tool scant ook uw mobiele site op bruikbaarheidsproblemen. Wanneer u een test uitvoert, identificeert de tool een van de volgende fouten:

• Gebruikt incompatibele plug-ins
• Kijkpoort niet ingesteld
• Viewport niet ingesteld op ‘apparaatbreedte’
• Inhoud breder dan het scherm
• Tekst te klein om te lezen
• Klikbare elementen te dicht bij elkaar

Met de mobielvriendelijke testtool van Google kunt u slechts één URL tegelijk testen. Als u een overzicht wilt krijgen van uw sitebrede mobielvriendelijkheid, moet u het rapport Mobiele bruikbaarheid in Google Search Console gebruiken.

Stappen om uw mobiele WooCommerce-ervaring te optimaliseren 1. Gebruik een mobielvriendelijk thema

De eerste stap om uw mobiele WooCommerce-ervaring te optimaliseren, is door een mobielvriendelijk WordPress-thema te gebruiken. De kans is groot dat je dat al doet, maar deze fundamentele stap wil je niet over het hoofd zien.

Er zijn twee belangrijke eigenschappen die een thema mobielvriendelijk maken. Om te beginnen gebruiken mobielvriendelijke thema’s responsive webdesign. Met een responsieve site passen uw webpagina’s zich dynamisch aan, afhankelijk van de grootte van het scherm van de gebruiker. Daarom moet u naast uw desktopsite ook een aangepaste mobiele site maken.

Het tweede belangrijke aspect van mobielvriendelijke thema’s is dat ze licht van gewicht zijn. Een enigszins subjectieve beschrijving, een lichtgewicht thema is er een met kleinere bestandsgroottes. Omdat ze kleiner zijn, maken lichtgewicht thema’s minder HTTP-verzoeken. Hierdoor kunnen uw pagina’s sneller laden.

Als u wilt controleren hoe responsief uw thema is, kunt u dit doen met behulp van de Responsive Website Design Testing Tool . Voer een URL in en kies een apparaat om te zien hoe uw site eruitziet voor een bepaalde gebruiker.

Nogmaals, naar pagina’s kijken als een shopper is essentieel met WooCommerce mobiele optimalisatie.

U kunt vervolgens het apparaat wijzigen om te zien hoe uw site reageert.

Hier kunnen we zien hoe een pagina eruitziet wanneer deze op een mobiel apparaat wordt bekeken.

De mobiele viewport begrijpen

De viewport van uw website is het gedeelte van uw webpagina’s dat zichtbaar is voor de eindgebruiker. De viewport wordt gedefinieerd door de viewport-metatag die in de <head> van de pagina wordt geplaatst. Hier is een voorbeeld van een viewport-metatag:

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

‘Width=device-width’ geeft de browser de opdracht om de pagina zodanig weer te geven dat deze in de schermbreedte van het apparaat past.

U moet al uw pagina-elementen aanpassen zodat ze in de viewport passen. Als dat niet het geval is, past de hele afbeelding niet in de viewport en moet de gebruiker heen en weer scrollen om de hele afbeelding te zien.

Als algemene regel geldt dat u elementen met een vaste breedte moet vermijden. Gebruik relatieve breedtewaarden in uw CSS. Absolute waarden en positioneringswaarden kunnen ertoe leiden dat items buiten de viewport worden geladen.

Om de viewport van een pagina in actie te zien, wijzigt u het formaat van uw browser om te zien hoe de pagina zich aanpast:

2. Stroomlijn uw afrekenproces

Een soepele betaalervaring is belangrijk, ongeacht het apparaat dat uw bezoekers gebruiken. Uw website moet alle wrijvingspunten wegnemen om kopers er niet van te weerhouden hun bestellingen af te ronden. Dit hoeft geen ingewikkeld proces te zijn, aangezien een paar snelle implementaties kunnen leiden tot een vlotte afhandeling op zowel mobiel als desktop.

Om te beginnen moet u klanten toestaan af te rekenen zonder dat ze een account hoeven aan te maken. Uit onderzoek van het Baymard Institute blijkt dat 24% van de shoppers hun winkelwagentje verlaat wanneer ze gedwongen worden een account aan te maken om een aankoop te voltooien.

Dit effect wordt versterkt voor mobiele shoppers waar het aanmaken van een account een vervelend proces is. Mensen kunnen gemakkelijk gefrustreerd raken als ze meerdere formulieren moeten invullen om een simpele aankoop te doen.

Gelukkig is dit een eenvoudig probleem om te vermijden. Ga naar WooCommerce > Instellingen > Accounts & Privacy en vink Klanten toestaan bestellingen te plaatsen zonder account aan .

Het begrijpen van de uitdagingen op kleinere apparaten is de sleutel tot mobiele optimalisatie van WooCommerce.

Een andere manier om uw afrekenproces te verbeteren, is door klanten de mogelijkheid te geven hun winkelwagengegevens op de afrekenpagina te bewerken. Met de standaard WooCommerce-configuratie kunt u dit niet doen. Als gevolg hiervan moet iedereen die producten wil toevoegen of verwijderen de afrekenpagina verlaten en is de kans groter dat hij zijn aankoop afbreekt.

U kunt klanten de mogelijkheid geven om hun winkelwagenaantal te wijzigen vanaf de afrekenpagina door de plug-in Wijzig hoeveelheid bij afrekenen voor WooCommerce te downloaden en te activeren.

3. Beperk uw formulieren en pop-ups

De volgende stap om uw mobiele site gebruiksvriendelijker te maken, is het aantal formulieren op uw site te beperken. Deze tools voor het genereren van leads zijn geweldig om uw desktopbezoekers te betrekken. Met een klein scherm kunnen ze echter snel opdringerig worden. Vooral pop-ups.

Een slecht getimede pop-up kan potentiële klanten vervreemden. Dit effect wordt versterkt op mobiele apparaten. Veel mobiele pop-ups zijn zo groot dat ze het hele scherm in beslag nemen, waardoor het moeilijk is voor de gebruiker om te sluiten.

Door deze pop-ups op mobiele apparaten te verbergen, kunt u voorkomen dat u uw gebruikers frustreert. Uw keuzes zijn om alle pop-ups helemaal te verwijderen of hun grootte aan te passen zodat ze niet het hele scherm in beslag nemen.

Veel van de beste pop-upplug-ins bevatten een instelling om formulieren op mobiele apparaten uit te schakelen. Zo niet, dan kunt u aangepaste CSS en JavaScript gebruiken. Hiermee kunt u het apparaattype van de gebruiker identificeren en voorkomen dat het formulier aan mobiele gebruikers wordt getoond.

4. Gebruik versnelde mobiele pagina’s (AMP’s)

AMP is een open-sourceproject dat is ontworpen door Google en andere ontwikkelaars om webpagina’s sneller te laten laden op mobiele apparaten. Het is een ecosysteem dat voor mobiel geoptimaliseerde pagina’s levert door de HTML te verwerken, bronnen weer te geven en caching voor de webpagina. Het ecosysteem bestaat uit drie componenten; AMP HTML, AMP JavaScript, AMP Cache.

U schakelt AMP in op uw site door de amp-link-metatag toe te voegen aan de HTML voor uw webpagina’s. Omdat het toevoegen van de tag aan elke afzonderlijke pagina een moeizaam proces zou zijn, wordt het aanbevolen om een WordPress-plug-in te gebruiken om AMP voor uw pagina’s in te stellen.

Er zijn verschillende kwaliteitsopties beschikbaar. Als u op zoek bent naar iets met meer geavanceerde functies, is de AMP for WP- plug-in een goede keuze. Het beschikt over een paginabuilder die u kunt gebruiken om snel voor AMP geoptimaliseerde bestemmingspagina’s te maken. Het wordt ook geïmplementeerd met topanalyseplatforms om u te helpen uw mobiele verkeer nauwkeurig te volgen.

Nadat u de plug-in hebt gedownload en geactiveerd, moet u de weergave voor uw dashboard kiezen. Als u toegang wilt tot het instellingenpaneel, kiest u Geavanceerd .

Deze tool bespaart enorm veel tijd als het gaat om mobiele optimalisatie van WooCommerce.

Vervolgens kiest u op welke van uw pagina’s u AMP wilt gebruiken. Zoek op de configuratiepagina het gedeelte waar je AMP nodig hebt en selecteer Kiezen .

AMP is ontworpen voor de mobiele ervaring en is een belangrijk ingrediënt in mobiele optimalisatie van WooCommerce.

Dit opent een venster waarin u uw AMP-pagina’s kunt selecteren. Vink de pagina’s aan die u wilt inschakelen en keer terug naar de instellingenpagina.

Het kiezen en kiezen van uw pagina’s voor AMP is een geweldige functie van deze plug-in.

Als u uw analyseplatform wilt koppelen, gaat u naar Analytics Tracking en klikt u op Config . Daar kunt u uw Google Analytics-tracking-ID zien. De plug-in ondersteunt ook andere populaire analyseoplossingen, waaronder Piwik, Alexa en Google Tag Manager.

Laat uw tracking-ID daar vallen en ga verder met de volgende stappen.

U wilt dan ondersteuning voor WooCommerce inschakelen. Ga naar AMP > Instellingen > E-commerce en schakel WooCommerce-compatibiliteit in.

Compatibiliteit is iets waar u rekening mee moet houden bij mobiele optimalisatie van WooCommerce.

De plug-in is ook compatibel met andere WordPress-plug-ins, waaronder SEO-oplossingen zoals Yoast en paginabuilders zoals Elementor. U kunt ondersteuning voor deze tools en andere geavanceerde opties inschakelen op de pagina Instellingen.

5. Lazy load afbeeldingen

Afbeeldingen zijn een essentieel onderdeel van elke e-commercesite. Klanten vertrouwen erop dat ze een artikel visualiseren voordat ze een aankoop doen. Hierdoor leiden meer (en hogere kwaliteit) afbeeldingen meestal tot meer verkopen.

Dit zorgt voor enkele uitdagingen, aangezien afbeeldingen van hoge kwaliteit grotere bestandsgroottes hebben. Grotere bestanden betekenen langzamere laadtijden. U moet uw afbeeldingen optimaliseren als u niet wilt dat uw mobiele bezoekers een schijnbare eeuwigheid wachten voordat ze zijn geladen.

De meest voorkomende vorm van beeldoptimalisatie is het comprimeren van afbeeldingen om hun bestandsgrootte te verkleinen. Met kleinere bestanden kunnen de browsers van uw klanten uw pagina’s sneller laden.

Een andere manier om de levering van uw afbeeldingen te optimaliseren, is door lui laden te gebruiken. Met lui laden worden uw afbeeldingen niet geladen bij het laden van de eerste pagina. In plaats daarvan worden ze alleen geladen wanneer de gebruiker naar dat gedeelte van de pagina scrolt.

Door het aantal bestanden dat nodig is voor de eerste paginalading te verminderen, wordt uw website veel sneller geladen op mobiele apparaten.

Er zijn verschillende manieren waarop u lui laden voor uw WooCommerce-winkel kunt inschakelen. De eerste is om dit handmatig te doen door de code van uw site te bewerken.

U kunt lui laden voor afbeeldingen handmatig inschakelen door de volgende code toe te voegen aan uw thema js-bestand:

// Lazy loading afbeeldingen document.addEventListener("DOMContentLoaded", function() { laat lazyImages = [].slice.call(document.querySelectorAll("img.lazy")); laat actief = false; const lazyLoad = function() { if (actief === onwaar) { actief = waar;setTimeout(functie() { lazyImages.forEach(function(lazyImage) { if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") { lazyImage.src = lazyImage.dataset.src; lazyImage.srcset = lazyImage.dataset.srcset; lazyImage.classList.remove("lui");lazyImages = lazyImages.filter(function(image) { afbeelding retourneren !== lazyImage; });if (lazyImages.length === 0) { document.removeEventListener("scroll", lazyLoad); window.removeEventListener("resize", lazyLoad); window.removeEventListener("orientationchange", lazyLoad); } } });actief = onwaar; }, 200); } };lazyLoad();document.addEventListener("scroll", lazyLoad); window.addEventListener("resize", lazyLoad); window.addEventListener("orientationchange", lazyLoad); });

U kunt het laden van WooCommerce-afbeeldingen overschrijven om in plaats daarvan een tijdelijke afbeelding te laden. Om dit te doen, moet u de volgende code toevoegen aan uw functions.php-bestand, waarbij u “uw-afbeelding.png” vervangt door de URL voor uw tijdelijke afbeelding:

add_action('init', function(){ remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10); add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10); });if (! function_exists('woocommerce_template_loop_product_thumbnail') { functie woocommerce_template_loop_product_thumbnail() { echo woocommerce_get_product_thumbnail(); } }if ( ! function_exists( 'woocommerce_get_product_thumbnail' ) ) { functie woocommerce_get_product_thumbnail ($ size = 'shop_catalog') { wereldwijde $post, $woocommerce; $output = '';if ( has_post_thumbnail() ) { $src = get_the_post_thumbnail_url ($post->ID, $grootte); $output .= '<img src="your-image.png" data-src="' . $src . '" data-srcset="' . $src . '" alt="Lazy loading image">'; } anders { $output .= wc_placeholder_img ($grootte); }retour $uitvoer; } }

Als u liever geen handmatige codebewerkingen uitvoert, kunt u een WordPress-plug-in gebruiken om lui laden voor uw afbeeldingen in te schakelen. Een van de beste plug-ins voor lui laden is A3 Lazy Load . Een andere solide optie is Rocket Lazy Load . De plug-in werkt voor alle site-afbeeldingen, inclusief miniaturen. Het is ook lichtgewicht omdat er geen JavaScript-bibliotheken zijn.

Conclusie

Nu meer mensen telefonisch winkelen, is een mobielvriendelijke site een must voor e-commercebedrijven. U wilt ervoor zorgen dat uw winkel goed werkt op alle apparaten, zodat al uw klanten een geweldige winkelervaring hebben.

Hier is een overzicht van de stappen die u kunt nemen om uw mobiele WooCommerce-site te optimaliseren:

• Gebruik een responsief, mobielvriendelijk thema
• Stroomlijn uw afrekenproces door velden te verwijderen en afrekenen als gast in te schakelen
• Beperk uw formulieren en pop-ups
• Gebruik versnelde mobiele pagina’s
• Lazy laad je afbeeldingen

De post WooCommerce woensdag: WooCommerce mobiele optimalisatiegids verscheen eerst op GoDaddy Blog .