Category Archives: Shoporama udvikling

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 :-)

God weekend i dine mails

Her er et nemt lille hack, hvis du gerne vil skrive god weekend i dine mails, der bliver sendt ud fra systemet. Du kan jo variere den over god påske, god jul, god grundlovsdag eller “nyd den sidste dag i september” etc. etc. Kun din fantasi sætter grænser. Her er den simple version, der bare afslutter din mail med “God weekend”, når mailen bliver sendt på en fredag eller lørdag

<{assign var="tempdato" value=$smarty.now}>
    <{if $tempdato|date_format:"%u" == 6 || $tempdato|date_format:"%u" == 5}>
        <p>God weekend</p>
    <{else}>
        <p>Med venlig hilsen</p>
    <{/if}>

Du kan jo også bruge det i din shop, hvis du har lyst til den slags.

Sådan laver du dit eget feed på Shoporama

Vil du selv skrue et feed sammen til Pricerunner eller en anden service, så kan du sagtens det. Du gør således:

1. Opret dit feed via SFTP editoren – kald den f.eks. mitfeed.xml

2. Byg den sådan her

<{assign var="products" value=$landing_page->getProducts()}>
<xml>
    <title><{$landing_page->getName()|escape}></title>

    <products>
        <{section name="i" loop=$products}>
            <product>
                <name><{$products[i]->getName()|escape}></name>
            </product>
        <{/section}>
    </products>

</xml>

Du kan tilføje alle de data du vil om produktet.

Nu opretter du en landingsside med de produkter du vil have (vil du have alle produkter, så vælger du bare pris skal være større end nul).

I feltet “Eget XML” skriver du mitfeed.xml under XML-filnavn (lige nedenunder står URL’en til dit nye feed) og klikker “Gem” i bunden af siden.

Mange vil gerne lave et Pricerunner feed, hvor de ikke har deres beskrivelse med. Det kan man gøre på denne måde.

 

Sådan laver du en “brand-væg”

Mange shops vil gerne vise, hvilke mærker, de forhandler ved at vise brandet med et link til landingssiden med dette mærke. Da brands bør ligge i en landingsside (hvor leverandør = brand), så kan man ikke bruge metoden med at loope en underkategori. Så vi ska:

1. Lave de leverandører vi ønsker (under produkter)

2. Lave en landingsside til hver leverandør.

3. Tilknytte et foto med logo til hver landingsside

Trick et er så at i landingssiden skriver man f.eks. “brandwall” i tag.

Lav en brandwall på ShoporamaNu er resten piece of cake.

<{assign var="landingpages" value=$webshop->getLandingPagesByTags('brandwall')}>
		   <{if $landingpages}>
		   		<{section name="i" loop=$landingpages}>
		   			   <a href="<{$landingpages[i]->getUrl()|escape}>" title="<{$landingpages[i]->getName()|escape}>">
					   <{assign var="images" value=$landingpages[i]->getImages()}>
					   <{if $images}>
					   		<{section name="j" loop=$images start=0 max=1}>
					   			<img src="<{$images[j]->getSrc(245,85,'box')}>">
					   		<{/section}>
					   <{/if}>
					   </a>
		   		<{/section}>
		   	<{/if}>

Argh... koden er ikke så pænt outputtet... men du forstår helt sikkert indholdet ;-)

Selv style backend

Okay okay… vi vinder ingen designpriser for vores backend (endnu). Vi opererer efter »First Make It Work – then Make It Pretty«

Men hvis det gør så ondt på dine sarte e-købmands-øjne, så har du nu muligheden for selv at style din backend. Klik på dit firmanavn øverst. Klik så på “Eget stylesheet”.

Skriv din trylle-CSS og klik “Gem”. That’s it!

Her er et eksempel:

Når jeg kigger på ordrer, får jeg både betalte og ikke betalte ordrer, som du kan se her:

Selv style backend i ShoporamaJeg kan i kildekoden se, at de lyserøde rækker har klassen “unpaid”, så jeg opretter denne regel i min CSS

Selv style backendKlikker gem og nu….

Ændre udseende på Shoporama backendHvor nemt er det lige?

Dit stylesheet er tilknyttet den enkelte shop, så du f.eks. kan lave rød baggrund til din danske shop og blå til din svenske. Smart, ikke?

Fragt med i total i ehandelssporing

Vores Google Analytics e-handelssporing har normalt ikke fragt inkluderet i total-beløbet. Hvis du gerne vil have dét, skal du lige modificere koden lidt. Først skal vores total lægges sammen med fragten.

<{math assign="nytotal" equation='x+y' x=$order->getPrice() y=$order->getShippingPrice()}>

Derefter skal vi outputte variablen nytotal i linjen med total. Så der nu står

'<{$nytotal|number_format:2:".":""}>', // total - required

I din Analyticskode i stedet for

'<{$order->getPrice()|number_format:2:".":""}>', // total - required

Ugedage og tidspunkt med Smarty og Shoporama

En vigtig parameter i en god webshopoplevelse er fragten. Både pris og tid. Hvis man er skarp på levering, så er det med at fremhæve dette. Så der er god grund til at flashe en hurtig levering, hvis man har det.  Her er en mulighed for at vise forskellige besked afhængig af tidspunkt på dagen (og ugen).

Lad os antage, at man sender alle dage kl. 17 (med undtagelse af lørdag selvfølgelig). Så kan du outputte det med Smarty sådan her:


<{assign var="tempdato" value=$smarty.now}>
<{if $tempdato|date_format:"%u" == 6}>
<{assign var="nextshipping" value="Vi sender varer i morgen"}>
<{else}>
<{if $tempdato|date_format:"%H" <17}>
<{assign var="nextshipping" value="Vi sender varer kl. 17"}>
<{else}>
<{assign var="nextshipping" value="Vi sender igen i morgen"}>
<{/if}>
<{/if}>

Så skal du bare proppe variablen $nextshipping ind dér, hvor du gerne vil vise din næste levering.

Det her kan naturligvis varieres til noget meget mere avanceret. Du kan finde Smartys koder til datoformattering  her.

(Beklager den manglende indentering)