Arbejd hurtigere i din Shoporama shop

Hvis du søger efter produkter eller ordrer i din Shoporama shop, så skal du klikke ind under f.eks. produkter, markere søgefeltet og så taste dit søgeord. Det kan gøres smartere. I eksemplet her bruger jeg Firefox browseren (men det kan sikkert også gøres i din Chrome browser og/eller Safari eller hvad du bruger).

Tricket er, at du bare skriver “p lanterne” i adresselinjen, hvis du vil søge efter “lanterne” blandt produkterne. Eller “o hansen” hvis du vil søge efter “hansen” blandt dine ordrer. For at indstille din browser til det, gør du følgende:

Bogmærk denne URL:

https://www.shoporama.dk/admin/da/product/list?search=%s&has_images=&in_stock=&is_online=&product_list_limit=25#table

Klik på færdig, når du har gjort det.

Genveje Shoporama

 

 

 

 

2) Gå i Bogmærker og klik “Organisér bogmærker”

3) Nu får du dette frem. Klik på “Bogmærkemenuen” til venstre, så du får dit nye bogmærke frem.

Genveje Shoporama

4) Klik på den lille trekant nederst

Genveje Shoporama

5) Nu folder der sig nogle flere muligheder ud. Sæt et p i linjen “stikord”. Klik ned i næste felt. Nu skulle den gerne være gemt.

Genvej til hurtig søgning på Shoporama

Luk vinduet. Gå i adresselinjen og skriv “p [produktnavn]“. Voilá – du har lige sparet et par kliks.

Vil du lave den samme med ordrer, så kan du bruge denne linje (og så skal du skrive o i stedet for p i “stikord”).

https://www.shoporama.dk/admin/da/order/list?voucher_id=&product_id=&search=%s&order_list_limit=25&status=&shipping_id=&del_country_id=&paid=

Kreativt brug af blok caching på din inner_product.html

Vi synes jo, det er fedt, når webshops er hurtige. Derfor lavede vi blok caching.

I nogle tilfælde hiver man et produkts kategorier, varianter på lager eller profilattributter ud på et produkt på en landingsside eller kategori som f.eks. her på Faktorfobis side med soldragter. Det gøres for at man kan lave filteret på klientsiden. Her kan du se i kildekoden, hvordan sådan et produkt ser ud fordi jeg hiver brand, størrelser på lager og diverse kategorier ud. Det er tidskrævende.

Kreativ brug af blok caching

Ville jeg lave blok-caching på det her og bare kalde den “productcache” eller noget, så ville det være samme produkt, der blev vist hver gang. Så det duer ikke. Vi skal give den et unikt navn.  Derfor laver jeg blok cachingen med produktets ID.

Det gør du således:

<{assign var="newcachename" value="product_cache_"|cat:$product->getProductId()}>

Nu har vi en unik cache for hvert produkt. Nice og nifty.

Men … hvis man har sat cachen til at leve 24 timer. Så vil der for hver 24. time være én kunde, der oplevede siden som vældigt langsom (fordi vi skulle opbygge cachen for hvert produkt igen). Det er øv. Langsomme sider er øv.

Så derfor sætter jeg en random TTL, så hvert produkts cache bliver bygget tilfældigt (mellem 12 og 24 timer). Så i stedet for at én kunde oplever en langsom side hvert døgn, så tager alle en bid af “kagen”, men det er så tilpas hurtigt, at alle stadig oplever siden som hurtig. Samtidigt er størrelser på lager nogenlunde opdateret (og max 24 timer bagud). Det gøres sådan:

<{assign var="randomttl" value=43200|mt_rand:86400}>

Så vores samlede kode starter sådan her

<{assign var="newcachename" value="product_cache_"|cat:$product->getProductId()}>
                                                <{assign var="randomttl" value=43200|mt_rand:86400}>
                                                <{get_cache name=$newcachename ttl=$randomttl assign="my_new_cached_data"}>
                                                <{if $my_new_cached_data}>
                                                    <{$my_new_cached_data}>
                                                <{else}>
                                                  <{cache name=$newcachename}>
      // Her bygger du din cache
   <{/cache}>
                                             <{/if}>

Så’n får du mere fart på dine kategorisider :-D

 

 

Produktanmeldelser på Shoporama

Så fik vi implementeret produktanmeldelser. Der er flere elementer involveret i dem, så derfor denne guide.

Emnerne er:

-Kunne modtage anmeldelser på din webshop

-Bede dine kunder anmelde produkterne

-Vise anmeldelser på dit produkt

Lad os komme i gang.

Side til at modtage anmeldelser

Ja – her skal du så “desværre” betale for en udvikler. Det er selvfølgeligt ærgerligt, men sådan er det at være på et shopsystem, der udvikler sig.

Nå … din udvikler skal lave en fil, der hedder product_review.html

Han/hun kan hente eksempel i vores default tema.  Ganske kort er det siden, hvor din kunde skal anmelde produktet. Den skal blot indeholde dette

Så er der en anmeldelsesside på din webshop.

Få anmeldelserne i hus

For at få dine kunder til at anmelde dine produkter, skal de jo vide, at de kan. Du kan gøre to ting for at gi’ dem besked:

1) Sende dem en mail X timer efter ordren er langt (i stil med din after_purchase.html mail). I mailen er der link til siden, hvor de skal anmelde.

eller

2) Finde de kunder, der har købt bestemte ordrer og maile dem et link til hvor de kan anmelde dit produkt.

Metode 1 gøres ved at oprette en fil ved navn product_review_mail.html. Din udvikler finde eksempel på koden i vores default tema. Dernæst skal du gøre følgende i Shoporama:

-Klik på Indstillinger (tandhjulet)

-Klik på fanebladet Mails

-Under produktanmeldelser sender du, hvor mange timer efter at ordren er lagt, at de skal have mailen. 24 timer = 1 døgn. Så skal de ha’ den efter to uger, er det 24*14 = 336, du skal taste ind.

-Klik “Gem”

Metode 2 kan gøres på flere måder. Her er én af dem:

-Log ind i Shoporama

-Klik på “produkter”

-Find et produkt, du gerne vil have anmeldt. I kolonnen solgt står der, hvor mange du har solgt. Klik på det tal

-Nu ser du alle de ordrer, hvor produktet indgår. Markér dem, du vil sende til.

-Scroll ned i bunden og klik “Send e-mail”

-Nu skriver du en rørende besked om, hvorfor de skal anmelde det.

Produktanmeldelser Shoporama

-Klik på preview e-mails.

-Når du er tilfreds, så klikker du på “Send e-mails” i bunden. Og så er der mails på vej til dine kunder.

Nu skal du vise anmeldelserne på dit produkt

Når anmeldelserne er i hus, skal din udvikler tilføje lidt til filen product.html

Koden ser således ud

<{assign var="reviews" value=$product->getProductReviews()}>

    <{section name="p" loop=$reviews}>
        <{assign var="order" value=$reviews[p]->getOrder()}>

        <p><{$reviews[p]->getRating()}> stjerner ud af 5</p>
        <p>Skrevet af <{$order->getDelName()}> d. <{$reviews[p]->getCreated()|date_format:"%d.%m.%Y"}></p>
        <p><em><{$reviews[p]->getDescription()|escape}></em></p>

        <hr>
    <{/section}>

Du kan hive:

-Kundens navn

-Anmeldelsesdato

og

-Anmeldelsen ud

Voilá – anmeldelser på dine produkter.

Men … for at få fine stjerner ude i SERP, skal du lige angive produktets score. Det kan du gøre således:

<{assign var="reviews" value=$product->getProductReviews()}>
    <{if $reviews}>
        <{assign var="antalreviews" value=0}>
        <{assign var="totalscore" value=0}>
        <{section name="p" loop=$reviews}>
            <{math assign="antalreviews" equation=x+1 x=$antalreviews}>
            <{math assign="totalscore" equation=x+y x=$totalscore y=$reviews[p]->getRating()}>
        <{/section}>
        <{math assign="gennemsnit" equation=x/y x=$totalscore y=$antalreviews}>

        <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
            Fået <span itemprop="ratingValue"><{$gennemsnit|number_format:2:",":"."}></span>/5 stjerner ud af <span itemprop="reviewCount"><{$antalreviews}></span> kundeanmeldelser.
        </div>
    <{/if}>

Og så er det ellers bare at vente til Google belønner dig med stjerner.

Du kan teste dine mikrodata her.

Bonus

Du kan også sortere produkterne på dine landingssider efter bedst ratede produkt.

 

Må det vælte ind med gode anmeldelser på din shop :-)

Send mail til en gruppe kunder

Vi har lavet en ny feature, hvor du kan sende en mail hurtigt til en gruppe kunder. Den fungerer således:

1) Klik på ordrer

2) Find de ordrer, du vil sende til. F.eks. ved at vælge alle med en bestemt label (her “forudbestilling”)

Skærmbillede 2016-02-01 kl. 16.38.13

3) Sæt flueben lige under ID/info, så alle ordrerne bliver valgt.

4) Scroll ned i bunden og klik på “Send email”

Skærmbillede 2016-02-01 kl. 16.39.13

 

 

5) Skriv så din mail. Udfyld emne og indhold. Bemærk du kan bruge [NAME], [PRICE], [LINK] og [PAYMENT_LINK] i din mail. Det bliver så erstattet med navn, ordrens totalpris, link til ordren og et betalingslink.

6) Når du har skrevet din mail, klikker du på “Preview e-mails” og du kan så se mailen for hver enkelt kunde.

7) Er du tilfreds med mailen, så klikker du “Send email” allernederst og dine kunder får personaliserede mails.

Regex / regulære udtryk i Shoporama

Denne blog post er skrevet af den erfarne udvikler og webshop-administrator Lars Holmgaard, som er involveret i flere Shoporama shops. Han har lavet de vildeste hacks med Shoporama og fik os overtalt til at lave redirects med regulære udtryk. Det skal et webshop system selvfølgelig have, så det er vi taknemmelige for.
Vi har overtalt ham til at lave en tutorial om emnet og den følger her:

Hvad er regex?

Måske kender du begrebet wildcards, hvor man fx. kan sætte en stjerne ind i stedet for nogle tegn. Jeg synes jeg kan huske fra bibliotekerne i gamle dage at man kunne søge efter “Dennis J*” hvis man ikke lige kunne huske efternavnet på forfatteren Dennis Jürgensen. Så fandt computeren alle de forfattere, der hed Dennis Jensen, Dennis Jørgensen og Dennis Jürgensen. Stjernen erstatter resten af ordet, så man slipper for at gætte på stavemåden. På samme måde kunne man erstatte et enkelt bogstav med et spørgsmålstegn.
Regex fungerer på samme måde. Regex er bare en udvidet nørde-version af stjerne og spørgsmålstegn, så der nu er kommet brede fælge og rævehale på.

Roger. Hvad kan man så bruge regex til?

Regex er ret smart til mange ting, hvor der skal matches et mønster. Det kunne fx. være at du har skiftet shopsystem til Shoporama og gerne vil fortælle Google og dine besøgende at du fremover får nogle lækre og ikke mindst unikke adresser på dine produkter i stedet for de gamle grimme som måske oven i hatten er indekseret med forskellige variabler efter selve url’en. Flere forskellige adresser med samme indhold hedder duplicate content, som du måske har hørt man skal undgå i forbindelse med søgemaskineoptimering.
Lad os sige du har en kategoriside som var indekseret i Google på bl.a. denne adresse fra din gamle shop: /Sprayers.11081/page11081.aspx?recordid11081=788.

Og ja, det er en ægte url fra en webshop – ikke en jeg har fundet på.

Nu skifter du til Shoporama, hvor hver side kun har én url – lige som det skal være. Du laver en ny fin url til din kategori, som du helt enkelt kalder /sprayers.
Alt er godt. Sådan da. I din Google Search Console opdager du efter nogle dage at der er et væld af webadressefejl:
Regulære udtryk i Shoporama

 

 

 

 

 

I praksis har ovenstående 941 fejl den effekt at en bruger fx. søger efter ‘sprayers’, klikker i Googles søgeresultat og lander på en side, der ikke findes mere. En 404-side, som det hedder.

Det er ikke så godt. Det skal fixes. Google skal fortælles, hvor de sider er blevet af. Du skal lave det, der hedder redirects.
Under grafen ser du de url’er som Google har i sit indeks, men som ikke længere findes på din nye shop på samme adresse. Herunder er der vist 10 url’er, der ikke findes mere. Men, der er faktisk 52 i alt, hvilket er helt skandaløst dårligt.

Regex Shoporama

 

 

 

 

 

 

 

 

Kan du se et mønster?

Hvis nu du ikke havde lært om regex (du får detaljerne senere) så ville du måske begynde at lave redirects til hver enkelt af de 52 url’er som hedder noget med ‘sprayers’ og pege dem ind på kategorisiden /sprayers. Men, det er spild af tid. Det kan nemlig gøres med én linies regex.

Sådan gør du

Jeg vil kort beskrive de mest populære ‘koder’ i regex, så du hurtigt kan komme i gang. Du kan altid undersøge nærmere om der skulle være en kortere og smartere måde at skrive dine regex på, men bare med disse koder kan du komme ret langt.

  • [0-9]+ angiver at her er der en sektion, hvor der kan være cifre fra 0 til 9. Plusset bag de kantede paranteser angiver at der kan være et eller flere cifre.
  • [a-z]* angiver at her er der en sektion, hvor der kan være bogstaver fra a-z. Stjernen bag parantesen angiver at der kan være 0 eller flere bogstaver i modsætning til plusset, hvor der skulle være mindst ét tilfælde af et match.
  • (fisk|lam|rådyr) angiver en gruppe, hvor der enten skal stå fisk, lam eller rådyr.
  • . angiver et hvilket som helst tegn. Punktum kan altså både stå for et tal, et bogstav eller et specialtegn.

For at angive over for regex fortolkeren, hvad der er en kommando og hvad der bare er et tegn, så skal du escape et specialtegn ved at skrive \ foran tegnet. Det skal du fx gøre foran et punktum.

Ovenstående kan du nemt kombinere så du fx. laver et match, der ser sådan her ud:

[a-z0-9.-_]+@[a-z0-9]+\.(com|dk|de|org)

Kan du regne ud, hvad ovenstående regex kan lave et match på? I første kantede parantes kan der stå et eller flere bogstaver, tal eller punktum, bindestreg og underscore. Derefter skal der stå et snabela. Så kommer der et eller flere bogstaver eller tal, derefter et punktum og til sidst skal der enten stå com, dk, de eller org. Denne regex kan dermed bruges til at checke om en tekst ligner en email, hvor afsenderen har en .com, .dk, .de eller .org email adresse. Der findes formentligt email adresser, der ikke passer i netop det regex filter, men så kan man justere det og lave det smartere.

Prøv at sætte regex’en ind på denne side og skriv din email adresse i det store felt nedenunder: http://www.regexr.com/ - bliver teksten blå, så har du lavet et match.

Godt. Du er med nu.

Hvis jeg skulle redirecte alle de fejl-url’er med sprayers over til den nye fine /sprayers url, så ville jeg ganske enkelt klikke her https://www.shoporama.dk/admin/da/redirect/new og skrive sådan:

Smarte redirects i Shoporama

 

 

 

 

 

Husk at sætte kryds i at det er et regular expression du har lavet. Ellers bliver dit redirect tolket som et ganske almindeligt redirect.

Men, der er jo ikke vilde koder i? Nej. Det er slet ikke sikkert det er nødvendigt. Jeg kan se på de url’er der mangler at de alle starter med sprayers.11081 og at det tal nok er ret unikt bundet sammen med den kategori. Derfor kan jeg tillade mig at antage at hvis min regex matcher på sprayers.11081 så matcher den højst sandsynligt korrekt og tager ikke forkerte url’er med.

Ovenstående enkle regex kan løse 52 ud af de 941 fejl, som Google Search Console er stødt på. Hvis resten er noget i samme stil så kan man hurtigt komme de fejl til livs og resten kan man altid redirecte manuelt.

Læg mærke til at du ikke behøver at matche hele udtrykket. Det kommer helt an på, hvor sikker du er i din sag mht de url’er du gerne vil matche. Jeg har på samme shop oplevet tusindevis af url’er, hvor en tilfældig kategori stod forrest og derefter fulgt af et varenummer inde i midten og til sidst en masse parametre. Det eneste unikke var varenummeret – alt andet fulgte et mønster, hvor det kunne være forskellige tal og bogstaver, men på samme pladser. Derfor matchede jeg grupperne med tal og bogstaver op med varenummeret og lavede et redirect over til produktets nye og endelige url på den nye shop.

Som nævnt tidligere, så brug endelig www.regexr.com og test dine udtryk før du implementerer dem. Skriv url’erne i det nederste store felt og øv dig på at skrive korrekte regex inden du implementerer dem i Shoporama. Jeg har fx. brugt regex på http://shop.dandrone.dk og flere andre shops.

Sigt efter at udrydde alle 404-fejl i GSC.

God fornøjelse med det!

Shoporama Symposium 2016

3. og 4. marts 2016 løber det første Shoporama Symposium af stablen. Det er et arrangement udelukkende for dig, der har en kørende Shoporama shop. Formålet er:

  • At gøre dig klogere på online markedsføring
  • At hjælpe dig med at sælge mere
  • At netværke med andre webshop ejere
  • At dele ninja-tricks til alt fra indkøb, kundehåndtering til daglig drift, fragt og logistik m.m.

Og så en masse hygge naturligvis.

De to dage vil være fyldt med oplæg og blandt oplægsholderne er:

Ind imellem oplæg bliver der rig mulighed for at dele viden, lære tricks og netværke.

Prisen på 2250,- pr. person ex. moms inkluderer

  • alle oplæg
  • overnatning på Kellers Park
  • fri adgang til spa området
  • fuld forplejning begge dage

Prisen hæves over dit abonnement d. 1/3-2016.

Shoporama Symposium afholdes på Hotel Kellers Park udenfor Vejle.

Alle med en Shoporama shop kan deltage.

Send en mail til vadskaer@shoporama.dk med info om, hvilken shop, du har. Så bliver du tilmeldt.

Man sover i Hästens seng på Kellers Park

Man sover i Hästens seng på Kellers Park

Husk badetøjet

Husk badetøjet. De har en fantastisk spaafdeling

Shoporama Symposium 2016 er afviklet. Du kan se lidt med på Twitter og Instagram på #shoporamasym

Herunder er et par billeder fra Shoporama Symposium 2016

Arbejdsværelse Topfloor 1

Arbejdsværelse Topfloor 1 havde sofaer.. dem havde vi ikke tid til at ligge i.

Kellers Park havde bagt Shoporama kager til os

Det fantastiske personale ved Kellers Park havde sørget for Shoporama kager til os :-)

Der nørdes i arbejdsværelset

Der arbejdes… Her ser du Brian Brandt fra Sovedyret og Susanne og Niels, der har Kids Delux (og i baggrunden Kim Dolleris og Morten Blinksbjerg).

Christina Klitsgaard lukkede og slukkede ballet

 

 

Christina Klitsgaard lukkede og slukkede ballet

Til din SEO / SEM konsulent

På et tidspunkt i din tid som shopejer, får du meget sandsynligt brug for at hyre en konsulent eller et bureau ind til at hjælpe dig med markedsføring i søgemaskinerne. Af erfaring ved vi, at de har nogle spørgsmål til dig vedr. din side og/eller din platform. De spørgsmål har vi prøvet at besvare her. Har de spørgsmål, der ikke er besvaret her, så er de naturligvis velkomne til at kontakte os med dem.

Onpage SEO

Vores kunder styrer selv deres onpage SEO i form af html, css og javascript. Så hvis koden ikke er semantisk korrekt eller er noget rod, så kan kunden frit ændre i sin html (kræver kendskab til en FTP editor og html, men det kræver jo også kendskab til biler, hvis man vil rode med sin bil selv).

Kan de få mikroformats / schema.org på produkterne?

Jeps… qva at de kan rode med det hele selv er det bare at implementere det.

Noindex

Der er allerede noindex på 404 siderne og søgeresultaterne.
Ønsker man specifikke sider ekskluderet i søgemaskinerne, kan man aktivere noindex, follow på både statiske sider, kategorier, landingssider og produkter.

Kan kunden få SSL på shoppen?

Ja – de skal kontakte os, så kan de tilkøbe SSL.
Og bare rolig: Vi sørger for at redirecte trafikken.

Kan vi skrue op for hastigheden?

Muligvis. Der er flere forskellige muligheder for at aktivere caching. Både på hele shoppen og på enkelte dele af koden. Der udover kan man vælge at benytte komprimering af billederne.

Tips til dig som SEO mand

Her har vi samlet et par tips, som vi tænker kan hjælpe dig, og som du muligvis ikke er vant til at have adgang til i andre shopsystemer.

Du kan benytte wildcards i dine title og descriptions på produkter. Du kan benytte [STOCK], [PRICE], [SUPPLIER] og [NAME]. På den måde kan du også få prisen og lagerantal ud i SERP (selv uden rich snippets).

Hvis du angiver et produkt som canonical og produktet bliver udsolgt (og fjernet fra shoppen), før det produkt som angiver det andet som canonical, så vil vi automatisk vise en advarsel forrest i shoppen.

Fejl i canonicals

Redirects

Du kan naturligvis lave redirects på Shoporama.
Du kan oprette dem manuelt eller importere en masse.
Du kan desuden bruge regulære udtryk i dine redirects.
Find vejledning i redirects her.

Du kan også lave regulære udtryk i dine redirects.

Bemærk også at når din kunde sletter en kategori eller et produkt, så bliver de prompted for om de vil redirecte denne. Du kan jo uddanne dem i, hvad de skal gøre.

Der er også mulighed for at lade landingssider redirecte til en anden kategori, hvis der ikke er produkter der opfylder de regler, som der er sat op for landingssiden.

Videresende trafik fra tom landingsside

Kan jeg lave et sitemap?

Både og… du kan ikke kalde den /sitemap
Det er en beskyttet URL i systemet.
Men … man kan få sin designpartner til at lave et sitemap over alle produkter, landingssider, statiske sider og kategorier. Det kan laves både som xml og html.

Landingssider

Landingssider er én af Shoporamas styrker på SEO-fronten. En landingsside er en dynamisk kategori – eller en slags kategori, hvor man ikke kommer produkter i, men derimod sætter regler op. F.eks. kan man tage alle de produkter, der er i kategorien drenge og t-shirts og så har man drenge t-shirts. Man kan så lave en ny og tilføje reglen at udsalgsprisen skal være større end 0. Så har man alle drenge t-shirts på udsalg. Eller f.eks. tage alle t-shirts fra Hummel eller nedsatte t-shirts fra Hummel.
Kort sagt så skal kunden ikke sidde og tilføje produkter til et hav af kategorier, men blot berige produktet med egenskaber, så flytter vi dem rundt.
Det er en effektiv måde at lave virkeligt mange sider til søgemaskinerne

Se her hvor nemt det er.

Vi hjælper med 404 siderne

Som SEO-mand foretrækker du nok at have øje med det her i Google Search Console, men vi holder også et øje, hvis der kommer trafik ind til din kundes shop fra en anden side og trafikken ender på en 404 side (spildt linkjuice – argh… )

Vi holder et vågent øje med dette, så du kan få den redirectet og snappe linkjuicen op.

Du finder den, ved at klikke på tandhjulet og så på 404-fejl

404 fejl på Shoporama

 

 

 

Manglende titles, descriprtions & billedbeskrivelser

Klikker du på “Forslag til forbedringer”, så vil du se de kategorier, der ikke har title og descriptions samt de produkter, der mangler beskrivelser på billederne. Et hurtigt sted at sætte din kunde i gang :-)

Eget PartnerAds feed

Nogle klager over duplicate content problemer med PartnerAds feedet i Shoporama. Det fikser man ved at lave det selv. Eller… jeg har lavet det for dig, så du skal bare

1. Uploade det til dit tema

2. Lave en landingsside med dine produkter, du vil vise i PartnerAds feedet

3. Skrive “partner-ads-feed.xml” i feltet “Eget XML”

Partnerads feed med listebeskrivelsen

4. Klik Gem og indsende nyt feed til PartnerAds (bemærk det så har fået ny URL)

Dette feed tager produktets listebeskrivelse og viser i stedet.

Du kan downloade feedet her.

Hastighedsoptimering af din Shoporama-shop

Jeg vil også forsøge at holde det så lavtech som muligt, så here goes.

Det er vigtigt at sige at hastighedsoptimering selvfølgelig er en del af det at levere et tema, men at det typisk er det sidste man sætter ind på. Det tager tid at optimere i bund og den bedste optimering kan hurtigt smadres hvis senere opdateringer ikke bliver optimeret også. Og den første prioritet jo er at lave et tema der spiller 100% på alle de normale faktorer så man rent faktisk kan bruge shoppen.

Her er lidt tanker…

Minifying

Et website’s kosmetik og interaktion er populært sagt typisk sat sammen af 3 typer kode. HTML, CSS og Javascript. Alle 3 kan komprimeres for at gøre Google glad. HTML og CSS minifiseres ved at fjerne alle unødvendige mellemrum i koden og dybest set lave én kodelinie presset helt sammen. Men med javascript er det både en omskrivning og sammenpresning.

Det er vidt forskelligt hvordan der arbejdes med css og javascript, men typisk er der et mindre antal javascript-plugins i et tema. Det kunne fx være et der styrer en slider, et der henter billeder fra instagram, et der styrer hvordan kurven opdaterer varer, et der zoomer på produktbilleder etc etc. Og i dag er der stort set altid smidt noger der hedder jQuery ind også. Alle disse plugin-filer ligger som regel for sig. Det er altså muligt at lægge dem alle sammen i samme fil og komprimere den. Det giver x antal mindre requests og trykker indholdet sammen i en meget mindre fil end det de fylder til sammen – hver for sig.

Det er ikke noget man gør i hånden det her – det sker ved hjælp af preprocessors. Personligt bruger jeg Mixture.io (er desværre blevet lukket for) eller codekit. Og ja, det kræver desværre lidt teknisk snilde at fikse.

Gør: I den perfekte verden hentes der ét stylesheet (css) og én javacript-fil per side. Sørg for at komme så tæt på som muligt.


Requests

Shoporama har en funktion der kan tage af det med antallet af requests når det kommer til css og javascripts. Det kan du læse om her: http://doc.shoporama.dk/Templates/examples/templates/packed_files

Et request er hver gang websitet spørger en server efter en fil. Det kan være css, javascript eller fx billeder. Hver gang der i html’en eller i css’en bliver spurgt til en fil bliver der lavet et request til serveren. Der kan også requestes til eksterne servere. Det er fx populært at bruge såkaldte CDN (content delivery networks) – det kan sagtens være en god ting da der derfor kan hentes flere filer på én gang. Det vil jeg ikke gå mere ind på da det bliver en meget teknisk omgang.

Et request er fx også din google analytics installation, din facebook-pixel eller din sleeknote-installation. Der er håb for de først 2 nævnte – mere om det under eksterne scripts.

Fidusen er at skrue ned for antallet af requests. Der hvor der kan sammenlægges eller spares bør der spares.

Gør: Brug Shoporamas sammenlægningsfunktion hvis du ikke kan minifisere filerne. 


Ikon-skrifttype eller svg-sprite og billedsprites

Har man en masse ikoner på sin side kan det tit svare sig at lave en skriftype ud af dem. Dette gør sig dog mest gældende ved en-farvede ikoner da skriftyper ikke kan indeholde forskellige farver. Har man dog behov for farver kan der kigges ind i at lave en svg-sprite med disse. En svg er en vektoriseret billedfil som er fuldt skalérbar lige som en skrifttype fx er. Vektor-filer er små klumper kode i modsætningen til billedfiler der er pixels og farver.

Bruger man mange billeder kan disse med fordel lægges sammen i ét billede. Derefter viser man det udsnit af billedet der skal bruges en en given situation. Alt dette er igen for at spare på antallet af requests.


Smarty-{strip}

Det er en lille ting. Meget lille faktisk, men det er let at gøre. Smarty, som er det templating-sprog shoporama-temaerne er lavet på, har en fin html-minifying feature. Hvis man tilføjer {strip} *** hele tema-fil-indholdet *** {/strip} omkring alt i sine tema-filer komprimerer den html-outputtet. Det er desværre sådan at hver gang man inkludere en fil så laver den en ny linie i html’en. Men.. det bliver trods alt mere komprimeret. Tag fx en ‘vis kilde’ på dybsort.dk

Gør: Tilføj {strip} omkring din tema-kode


Lazy loads

Der er flere måder at hente billedfiler på. Har man mange eller tunge billeder kan det godt betale sig at ‘lazy loade’ dem. Det kan gøre på mange forskellige måder, men det man skal huske på er at hvis billeder er sat ind med helt almindelige tags eller henvisninger så henter browseren dem. Også selv der ikke er scrollet ned til dem endnu.

Tricket er at snyde browseren til først at hente billederne når der er brug for dem. Der findes flere javascript-plugins derude og de hardcore kodere kan snildt kode et selv. Senest har jeg haft fin glæde af et plugin der hedder Layzr.js (https://callmecavs.github.io/layzr.js/). I img-src har jeg brugt en loadanimation i form af en gif og så i en såkaldt data-attribut sat den rigtige billedsti. Så laver layzr et tjek på hvor langt man er scrollet ned på siden og om billedet der skal hentes skal være synligt eller ej. Skal det være synlig bytter den rundt på data-attributten og img-src’en. Og vupti så henter browseren billedfilen. On demand. Produklister eller produktsider med tunge billeder kan dette være en stor fordel på.

Alt dette kræver fikses i tema-filerne.

Gør: Hent billeder når der er brug for dem. Det er godt for den initielle performance – og derved Googles glæde.


Billedoptimering

Alle dine tema-billed-filer bør optimeres inden de lægges live. Det kan være baggrundsbilleder, ikoner, logoer etc. De filer som ikke lægges op via Shoporamas backend. Photoshop optimerer så godt som den kan, men bare ikke helt godt nok. Selv bruger jeg et lille tool til mac’en der hedder ImageOptim (https://imageoptim.com/da/), men der findes også online tools der kan hjælpe fx kraken.io. Det der rent praktisk sker er at de fjerner alt overflødige der ligger i billedfilerne. Der gemmes et hav af informationer i billeder i dag – informationer som er totalt unødvendige til formålet på jeres shop.

Gør: Kør alle tema-billeder igennem et billedoptimeringstool. Du kan med fordel også køre billeder der skal uploades via shoporama gennem tool’et også. Så er de da ihvertfald presset godt inden. 


Eksterne scripts

Google Analytics, Sumome, Sleeknote, Facebook, Addthis, <indsæt ny smart service her>. De kommer hver dag disse services og det er super fedt. Men det er ikke sikkert at de implementeringsscripts der følger med er optimerede. Faktisk er Googles egne scripts tit dem der bon’er ud på Google Pagespeed Insights – paradoks ik? Har du iøvrigt prøvet at sætte google.com ind i Insights?

Der er ikke så meget at gøre ved det. De skal være der. Men man kan bruge Google Tagmanager (GTM). I GTM kan man nemlig lægge mange andre af disse tracking scripts ind og derved spare nogle requests. Det er en lang forklaring, men jeg vil anbefale dig at læse lidt op på det. Bedste forslag: google it.

Gør: Benyt Google Tagmanager til håndtering af tracking scripts.


Shoporama klarer resten …

…har allerede en masse hastihedsoptimering bygget ind i motoren. Det meste af det ligger så dybt at det ikke er noget du skal tænke over. Men der er dog lige et par indstillinger der skal være på plads.

Billedoptimering

Under tandhjulet og “optimering” er det muligt at presse størrelsen på dine billeder i generel forstand. Det er altid en vurderingssag hvor meget man vil presse det for jo lavere tallet er jo lavere bliver billeder i kvalitet. Et sted mellem 50 og 75 bør kunne tilfredsstille de fleste.

Caching

Mens du bygger dit site, ændrer tekster, billeder eller andet kan det godt være smart at slå cachingen fra. Det kan være irriterende at opdatere sit site uden at kunne se ændringerne slå igennem. Det er dog selvfølgelig vigtigt at slå cachingen til igen når alt er fikset. Det er en ret stor del at hastighedsoptimeringen at sitet bliver cachet. Så huske den lille checkbox.

optimering

Gør: Find en passende billedkvalitet. Husk at slå caching til.


Tools

Pagespeed insights (https://developers.google.com/speed/pagespeed/insights/)

Det mest ikke-technørd-venlige tool derude i dag er Google Page Speed Insights. På dejlig pædagogisk vis viser den med farver og procenter hvor godt sitet er optimeret i Google øjne. Og så der kommer en lille forklaring på de ting Google anbefaler at der skal fikses. Sørg for at være gul. Det er ikke en skam at være i 70’erne for de kan der være mange grunde til. Men sigt da selvfølgelig efter en grøn score ;-).

Pingdom (http://tools.pingdom.com/fpt/)

Med Pingdom kan du teste fra flere forskellige steder i verden. Man får også en mere “rigtig” loadtids-indikation og en ret udførlig teknisk tilbagemelding bare i gratis-versionen. Din benchmark-indikation er “your website is ….” linien der kommer under tallene når testen er færdig. Men “Perf grade”- og “load time”-tallene er naturligvis det vigtige her. Google ser fx helst at sitet er hurtigere end 1,5 sekund at hente.

pingdom

YSlow for chrome

Du kan også installere ySlow til din chrome browser. YSlow giver også rigtig god information og bedømmer sitets helhed og dele efter den amerikanske skoleskala. Dog vist uden + og – ;-) A = super godt. G = Not so much.

Gør: Kør dit site igennem disse tests for hver optimering du har foretaget dig. Er det for teknisk så bed din webnørd om at kigge med.

Din designpartner/webnørd er sikkert allerede skarp på disse punkter. Så tag en snak med vedkommende hvis du synes din shop hænger med måsen.

Happy optimizing :-)

Skjule kommentarer og noter på ordrer

En ordre kan have en intern note og en kommentar.  Kommentaren er typisk udfyldt af din kunde, men kan også være noget du har genereret automatisk (f.eks. gaveindpakning).

Intern note indeholder tit oplysninger om betalingen.

Både intern note og kommentar bliver vist i ordreoversigten.

Hvis du ikke vil se dem, så gør følgende:

1. Log ind i Shoporama

2. Klik på dit firmanavn

3. Klik på “Eget stylesheet” i menuen

4. Indtast det her under og klik “Gem”

.order-note, .order-comments { display : none; }

Vil du kun se noterne, så skriver du

.order-comments { display : none; }

Vil du kun se kommentarerne, så skriver du

.order-note { display : none; }

På den måde kan du få din kage og spise den samtidigt :-)

Mand… Shoporama er fleksibelt.