FS Data

FS Data - webbhotell, domännamn, e-post, servrar

Tre icke-tekniska WordPress-tips

Vi har tidigare tipsat om många olika tekniska funktioner för WordPress i vår blogg. Det har varit allt från versionshantering, CDN-användning och SSL-säkerställning av WordPress till hur man får en snabbare WordPress-sida, hur man felsöker tillägg och säljer mer med A/B-tester.

Idag bjuder vi på några tips av en helt annan karaktär. Här är tre icke-tekniska tips för WordPress.

1. Kom igång med WordPress

fsdata_wordpress_kom_igangKom igång med WordPress, från IIS, är en av de äldsta och bästa svenska nybörjarguiderna för WordPress. Guiden förklarar vad WordPress är och visar på ett enkelt sett hur grundläggande funktioner hanteras.

Denna guide har nyligen uppdaterats för den senaste versionen av WordPress. Om du vill komma igång med WordPress så är detta rätt guide för dig.

När du sedan vill komma igång med e-handel i WordPress så kan vi rekommendera våra utmärkta guider för WooCommerce!

2. WordPress-podden

Att hålla sig uppdaterad om de senaste nyheterna inom WordPress-världen är inte alltid enkelt. Två personer med bra koll, det är Stanislav Khromov och Erik Bernskiöld. De har nyligen lanserat den första svenska podcasten om WordPress – WordPress-podden.

De har hittills publicerat två (riktigt bra) avsnitt. Så lyssna in er på WordPress-podden!

3. WordCamp Stockholm 2016

fsdata_wordcamp_stockholm_201622-23 november arrangeras WordCamp Stockholm 2016 på Stockholm Waterfront. Det är årets största WordPress-träff i Sverige, med en massa intressanta föreläsare, besökare och projekt. Den första dagen har två spår med föreläsningar medan den andra dagen är en sk. contributor day, där man själv bidrar praktiskt till WordPress.

FS Data var med på föregående WordCamp i Sverige, i Norrköping 2015. Vi är givetvis även med på WordCamp Stockholm 2016. Så passa gärna på att prata WordPress med oss där!

Snabbare hemsida med smartare stilmallar

En snabb hemsida är som bekant en bra hemsida, för såväl besökare som sökmotorer.

Historiskt sett har optimering av hemsidor (dvs, arbetet med att göra en hemsida snabbare) främst handlat om att få ner storleken på bilder, videofilmer och liknande element. Nuförtiden handlar det dock mer om att få ner storleken på script och stilmallar (CSS). Dagens hemsidor består nämligen till allt större del av script och stilmallar.

– Vad består din hemsida av egentligen?

Du kan själv kontrollera vad din egen hemsida består av (i form av bilder, script och stilmallar). Med webbläsaren Firefox, gå in under ”Verktyg”, ”Webbutvecklare” och ”Nätverk”. Besök din hemsida och klicka på länken för ”Växla prestandaanalys” längst ner till höger i Nätverksfältet.

Av de två cirkeldiagram som du nu ser så är det den till höger, under rubriken ”Inaktiverad cache”, mest intressant. Där kan du tydligt se vad din hemsida innehåller i form av script (js), bilder (images), HTML, stilmallar (css) osv.

Här är ett exempel från en rätt så väloptimerad hemsida:

fsdata_element_ssk

– Optimera dina stilmallar enkelt (med WordPress)

Nu ska vi visa hur man kan optimera sina stilmallar, med fokus på WordPress-baserade hemsidor. Man måste inte köra WordPress för att praktisera dessa tips, de hjälper även om man kör andra lösningar eller har en egenutvecklad hemsida, men vi kommer arbeta med ett specifikt WordPress-tillägg.

Vi börjar med att installera/aktivera WordPress-tillägget Autoptimize. Det är ett tillägg som vi har tipsat om tidigare, i vår guide till en snabbare WordPress-sida. Undertecknad har använt detta tillägg i flera års tid och även översatt det till svenska. Det är med andra ord ett väldigt bra tillägg.

Autoptimize hanteras under ”Inställningar” och ”Autoptimize”. Börja med att bocka i alternativen ”Optimera HTML-kod?” och ”Optimera CSS-kod?” och spara ändringarna med rätt knapp längst ner på sidan (välj knapp beroende på om du har ett cache-tillägg eller inte).

Nu har Autoptimize kombinerat alla stilmallar (med vissa undantag) på din hemsida till en enda optimerad fil. Om du kontrollerade innehållet på din hemsida med Firefox tidigare, testa gärna att göra det nu igen. Inte illa va?

Dags att gräva ner sig i de lite mer avancerade inställningarna. Klicka på knappen ”Visa avancerade inställningar” högst upp på sidan. Under ”CSS-alternativ” visas nu följande:

CSS-alternativ i Autoptimize

Här är en genomgång av dessa olika alternativ:

– Det första alternativet, ”Generera data: URI för bilder?”, innebär att mindre bilder infogas på hemsidan via CSS, istället för separata filer. Det fungerar inte för alla bilder, men testa gärna att aktivera detta och kontrollera hur hemsidan ser ut därefter.

– Alternativet ”Remove Google Fonts?” kan man använda om man har inbäddade typsnitt från Google, t ex i sitt tema, som man egentligen inte behöver. Det är inte tvunget, men innebär ofta en tydlig hastighetsförbättring (då hemsidan inte laddar in dessa externa filer från Google).

– Det tredje alternativet, ”Also aggregate inline CSS?”, bör man aktivera. Autoptimize optimerar som standard stilmallar som inkluderas externt, men med detta alternativ inkluderas (och optimeras) även stilmallar som är inbäddade i HTML-koden för sidan.

– Därefter behöver man välja mellan alternativen ”Inkludera och senarelägg inladdning av CSS?” och ”Inkludera all CSS”. I båda dessa fall bäddar Autoptimize in den optimerade stilmallen i HTML-koden för hemsidan. Det som skiljer dem åt är hur mycket av stilmallarna som inkluderas i HTML-koden.

– Har du besökt en hemsida där du märkt att sidan i princip ”väntar” på att få renderas/visas upp?

Detta kan man reglera genom att inkludera den del av stilmallen som krävs för att den första renderingen ska ske (above the fold) direkt i HTML-koden. Men hur avgör man vilken del av stilmallen som reglerar detta? Jo, med en svensk webbtjänst: Critical Path CSS Generator.

Besök Critical Path CSS Generator och ange adressen till din hemsida under ”Enter Page URL” samt klistra in din stilmall i fältet för ”Full CSS”. Du hittar din fullständiga (optimerade) stilmall i källkoden för din hemsida. Med Autoptimize heter stilmallen alltid ”autoptimize_” följt av slumpmässiga tecken och ”.css”.

Därefter klickar du på knappen ”Create Critical Path CSS”. Efter en stund visas ett fält med den del av stilmallen som krävs för att den första renderingen ska ske. Kopiera detta, återgå till inställningarna för Autoptimize, klicka på ”Inkludera och senarelägg inladdning av CSS?” och klistra in stilmallen i fältet där.

Om din hemsida inte har så många besökare och en rätt så liten stilmall så kan alternativet ”Inkludera all CSS” vara bättre här. Men överlag så brukar det första av dessa två alternativ vara bäst.

– Under det sista alternativet i Autoptimize kan man exkludera stilmallar från att optimeras. Om du upplever problem med stilmallen för en viss del av hemsidan eller specifika funktioner, inaktivera CSS-optimeringen i Autoptimize, kontrollera vilken stilmall det är som berörs och lägg till den här (och aktivera CSS-optimeringen i Autoptimize igen).

– Avslutningsvis

Om du följer denna guide, se då även till att testa din hemsida ordentligt också. Autoptimize har bra dokumentation och dess utvecklare är aktiv i supportforumet hos WordPress (så sök/ställ gärna frågor där).

Mycket av det vi gått igenom kan man även applicera för att optimera script. Man bör dock vara mer insatt i vilka funktioner som scripten på hemsidan hanterar innan man gör det. Det är därför vi inte har gått igenom scriptoptimeringen i Autoptimize här.

Om du har några frågor eller funderingar kring detta – eller tips på hur du själv arbetar med dina stilmallar – så får du gärna lämna en kommentar här nedan!

Sälj mer med A/B-tester i WordPress

På FS Data arbetar vi väldigt aktivt med försäljning på nätet. Även om vi inte kallar oss för ett e-handelsföretag så är det egentligen vad vi är och vad vi har gjort sedan 1997. Och vi har fått viss erfarenhet under dessa år. 🙂

A/B-test med WordPress hos FS DataEn av de saker som vi arbetar aktivt med och som vi tror att många av våra kunder kan dra mer nytta av är sk. A/B-tester. Det är tester där olika versioner av samma sida eller innehåll jämförs med varandra, för att ta fram den optimala lösningen (t ex den som säljer bäst eller ger besökare rätt information snabbast).

Nu har vi flera olika verktyg för detta, men vi vill tipsa om ett sätt som är extra enkelt och snabbt att komma igång med. Vi är som bekant ett WordPress-vänligt webbhotell så detta är ett tips om WordPress-tillägget Nelio A/B Testing.

Nelio A/B Testing är ett tillägg som lämpar sig såväl för nybörjare som för experter. Det är enkelt att komma igång men erbjuder även avancerade funktioner. Nelio A/B Testing erbjuds både som en kostnadsfri testversion samt med en månadsavgift.

A/B-testa en sida i WordPress

Börja med att installera/aktivera Nelio A/B Testing. I WordPress administrationsgränssnitt går du sedan in under ”Nelio A/B Testing” och ”Add Experiment” i menyn till vänster. Här visas de olika tester man kan skapa, från landningssidor till värmekartor/heatmaps.

Nelio - Testalternativ

Nu ska vi A/B-testa en vanlig sida, så vi klickar på ”New A/B Test for Pages”. Därefter anger vi ett lämpligt namn, en beskrivning och väljer den sida som vi vill skapa flera versioner av för testet. Klicka sedan på ”Next” för att gå vidare.

Nelio - Sidtest

Nu får vi skapa den alternativa versionen av vår sida. Det enklaste är att skapa en kopia av den befintliga sidan, via ”New Alternative (based on an existing)” samt genom att välja sidan ifråga igen. Men man kan även skapa en helt ny sida här. Klicka på ”Next” därefter.

Nelio - Alternativ sida

Till slut väljer man målet för sitt test. Det kan t ex vara om besökare går vidare från en sida till ett orderformulär. Längst ner på denna sida finns bra tips om olika mål. När du är nöjd klickar du bara på ”Create” för att sätta igång med ditt A/B-test.

Nelio - Följ konvertering

Nu visas dessa olika versioner av samma sida för olika besökare på din hemsida. Under testets gång kan du enkelt se aktuellt resultat, även i realtid. När du är nöjd med testet kan du avsluta det så skapar Nelio A/B Testing en specifik resultatsida, med fina grafer som underlättar ditt val av den optimala lösningen.

Nelio - Resultat

Om du vill komma igång snabbt med A/B-tester i WordPress så är Nelio A/B Testing rätt tillägg för dig. Förutom att det är enkelt så finns det bra dokumentation till tillägget, samt att det inte påverkar prestandan för din WordPress-sida märkbart. Vi kan därför rekommendera detta tillägg varmt.

Har du egen erfarenhet av detta tillägg eller tips på andra verktyg för A/B-tester? Lämna gärna en kommentar här nedan!

Viktigt: stäng av XML-RPC i WordPress

Den vanligaste attacken mot WordPress-baserade hemsidor är en sk. brute force-attack. Det innebär att man försöker få åtkomst/kontroll till en hemsida genom att gissa sig till ett lösenord väldigt många gånger. Med dagens kraftfulla datorer och servrar kan man gissa hundratals, om inte tusentals, lösenord på en minut.

Brute force-attacker är dock rätt så enkla att upptäcka. Om man ansluter x antal gånger, under en viss tid, mot wp-login.php (WordPress-inloggningssida) så kan man anta att en attack pågår. Den senaste veckan har t ex vår brandväggslösning blockerat ca 130 000 brute force-attacker mot våra kunders WordPress-sidor (det är den näst mest ”populära” attacken i vårt nätverk).

– Men tänk om man kan testa flera lösenord via en och samma anslutning?

Sedan WordPress version 3.5 är XML-RPC aktiverat som standard. XML-RPC är ett gränssnitt som används t ex av mobila appar, vissa tillägg (däribland Jetpack) samt för sk. pingbacks (att man automatiskt länkar tillbaka om man får en länk till sig). Det var från början en bra sak, men det har visat sig medföra flera säkerhetsrisker.

En av de mindre kända funktionerna i XML-RPC är en metod som heter system.multicall, som innebär att man kan utföra flera anrop inom en och samma anslutning. Det är bra om man t ex vill köra flera olika kommandon via en HTTP-anslutning. Men det har börjat missbrukas rejält de senaste månaderna.

Via system.multicall i XML-RPC kan man testa 100-tals, om inte 1 000-tals, lösenord med en enda anslutning mot WordPress.

Säkerhetsföretaget Sucuri har även uppmärksammat dessa attacker. Denna graf från dem illustrerar detta tydligt:

Attacker via system.multicall i XML-RPC

Det här är ett allvarligt problem, då dessa attacker inte lika enkelt kan uppfattas/identifieras och stoppas av våra brandväggar (och andra lösningar). Det enda vettiga sätt att skydda sig mot detta är att stänga av XML-RPC i WordPress. Det är vad vi nu vill rekommendera er att göra.

FS Data är ett säkert webbhotell– Stäng av XML-RPC i WordPress

Det enklaste sättet att stänga av XML-RPC i WordPress är att installera och aktivera ett tillägg som heter Disable XML-RPC. Tillägget fungerar bra med senaste versionen av WordPress (4.3.1 i skrivande stund), både för enklare WordPress-sidor samt för WordPress-nätverk (nätverksaktivering).

Man kan även blockera extern åtkomst till filen xmlrpc.php (som används för XML-RPC i WordPress) via .htaccess. Lägg bara in nedanstående kod i filen .htaccess som ligger i rotmappen för din WordPress-sida.

# Blockera anslutningar till xmlrpc.php

order deny,allow
deny from all

Ovanstående kod fungerar med webbservern Apache (som vi använder för våra webbhotellspaket). Man kan även begränsa åtkomsten till xmlrpc.php specifika IP-adresser genom att lägga in följande rad i .htaccess (efter raden som inleds med ”deny”):

allow from 127.0.0.1

Där man då ersätter 127.0.0.1 med den IP-adress som behöver kommunicera med WordPress via XML-RPC.

Ett tredje sätt att stänga av XML-RPC är att lägga in följande rad i wp-config.php (i rotmappen för din WordPress-sida):

add_filter( 'xmlrpc_enabled', '__return_false' );

Den raden behöver läggas in efter följande rad:

require_once(ABSPATH . 'wp-settings.php');

– När ska man inte stänga av XML-RPC i WordPress?

Den enda gång man inte bör stänga av XML-RPC är om man har en viktig applikation eller tillägg som kommunicerar med WordPress via detta gränssnitt. De mobila apparna är nuförtiden överflödiga, då WordPress är fullt ut mobilanpassat. Fundera gärna över om tillägget är tillräckligt viktigt. Att man tappar pingbacks är tråkigt, men det är det värt sett till säkerheten.

– Framtiden för XML-RPC i WordPress

Sedan en tid tillbaka pågår arbete med ett helt nytt REST API (ett annat gränssnitt) för WordPress. Om allt går enligt plan så kommer detta API att erbjudas från WordPress 4.5 (som släpps nästa år). Med det nya API:et på plats är det högst sannolikt att XML-RPC kommer vara inaktiverat som standard för WordPress.

Vi vill avslutningsvis rekommendera er alla att stänga av XML-RPC i WordPress.

Om du har några frågor kring detta, eller kanske förslag på andra lösningar, så får du gärna lämna en kommentar här nedan.

Hacka din egen hemsida!

En hackareAtt få sin hemsida hackad är något av det värsta som finns. Förutom intrånget och dess påföljder så uppstår en massa merarbete med att identifiera orsaken till hackningen samt rensa upp och säkerställa hemsidan igen. Om man erbjuder tjänster/produkter via sin hemsida kan man även behöva återuppbygga sina kunders förtroende.

Även om man aldrig kan vara 100 % säker med sin hemsida (allt som är uppkopplat kan hackas) så finns det saker man kan göra för att hålla sig så säker som möjligt. Om man använder en hemsidelösning så måste man hålla sin hemsida uppdaterad. Man kan även använda säkerhetstillägg, såsom Wordfence.

På samma sätt kan man välja webbhotell av säkerhetsskäl. På FS Data arbetar vi aktivt för att skydda våra kunders hemsidor bl a med en av marknadens bästa brandväggslösningar, regelbundna säkerhetskontroller av alla hemsidor samt automatiska uppdateringar av WordPress m.m. Säkerhet är extremt viktigt hos oss.

Finns det något mer man kan göra då? Jo, du kan hacka din egen hemsida!

Med att ”hacka din egen hemsida” menar vi givetvis inte att du ska förstöra eller påverka din hemsida negativt på något sätt. Det handlar istället om att testa din hemsida, mot olika kända/potentiella säkerhetshål, för att kunna vidta skyddsåtgärder därefter. Det är – i princip – så hackare agerar.

En av de vanligaste orsakerna till att en hemsida blir hackad är att den innehåller ett/flera kända säkerhetshål. Hur är dessa säkerhetshål kända? Jo, tack vare hemsidor med information om dessa säkerhetshål. Dessa hemsidor är väldigt bra – då de gör att säkerhetshål rapporteras, testas, bekräftas och åtgärdas – men de utnyttjas oavsett även av hackare.

Det finns lyckligtvis ett antal webbtjänster, baserade på dessa hemsidor med säkerhetshål, där man som hemsideägare kan testa sin hemsida. Vi ska titta närmare på en av dessa tjänster, som faktiskt utvecklas av svenskar. Tjänsten ifråga heter Detectify.

detectify-logoDetectify är en relativt ny tjänst, som dels erbjuds kostnadsfritt för privatpersoner/ideella organisationer samt som betaltjänst för företag. Tjänsten baseras på en egenutvecklad crawler (spindel), som utför över 100 st automatiserade tester mot kända säkerhetshål (baserat på OWASP Top Ten). Resultatet betygssätts sedan efter ”allvarlighet” (enligt CVSSv2).

Låter det intressant? Så här gör du då:

1. Börja med att skapa ett (kostnadsfritt) konto hos Detectify (under ”Sign up”, ”Get started”).
2. När du har bekräftat ditt konto, ange din hemsideadress i fältet ”URL for the domain to scan” i deras kontrollpanel.
3. Bekräfta sedan att du äger hemsidan. Enklast är nog att välja ”File” och lägga upp angiven fil i hemsidans hemkatalog via FTP.
4. När det är klart behöver du bara klicka på ”Start scan”.

Detectifys kontroll av din hemsida är ingående och tar några timmar att genomföra. Du kan följa händelseutvecklingen i deras kontrollpanel om du vill. När kontrollen är klar så får du ett e-postmeddelande, med en länk direkt till resultatsidan.

detectify_sulo_se

De potentiella säkerhetshål (resultat) som är kritiska (”Critical”) bör du främst kontrollera/åtgärda om möjligt. Du kan klicka på ett resultat för att få en mer ingående beskrivning. Vi kan inte förklara alla potentiella resultat här, men Detectify har en väldigt bra kunskapsdatabas med mer information om olika säkerhetshål.

Detectify en renodlad säkerhetstjänst och är som sådan väldigt ingående med att presentera alla potentiella säkerhetshål. Du bör därför även bilda dig en egen uppfattning om hur allvarligt ett resultat egentligen är genom att söka efter dess rubrik eller beskrivning i en sökmotor.

Även de resultat som är ”Medium” är bra att kolla upp, även om de inte är kritiska. När du har åtgärdat ett resultat kan du markera det som åtgärdat, så blir det enklare att hantera resultatsidan.

Om ni använder Detectify som företag eller behöver mer funktionalitet/support så kan vi rekommendera en uppgradering till ”Professional”. Denna tjänst är rätt ny, den utvecklas i Sverige och har potential till att bli riktigt stor. Det bör uppmuntras!

– Avslutningsvis

Detectify är en av många webbtjänster som man kan kontrollera säkerheten för sin hemsida med. Några andra bra tjänster är Web Inspector, Quttera, Sucuri SiteCheck och ScanMyServer. Testa gärna din hemsida med flera olika tjänster!

Kontentan här är att man bör agera proaktivt med säkerheten för sin hemsida. Det är bättre att ”hacka sin egen hemsida” än att få den hackad (och förstörd) av någon annan.

Om du har några kommentarer eller frågor kring detta, lämna då gärna en kommentar här nedan.