Postat av under Lästips, WordPress.

På min kampanjsida WordPressUtvecklare.nu så har jag skrivit en guide hur du rensar upp din WordPress-hemsida från spam när det är i en större mängd än vad du har tid att sitta och radera manuellt. Som i mitt exempel där jag rensar upp en blogg med nästan 100K spamkommentarer.

Till inlägget “WordPress tips & tricks: Radera spamkommentarer i bulk” >>

Postat av under Sökmotoroptimering, Webbdesign, WordPress.

Förbättra din hemsidas laddningstid

Bild baserad på fotot Speedometer av Kevin Krejci

I mitten av juni skrev CNN om att hemsidor har blivit långsammare att ladda de senaste åren. En genomsnittlig sida är idag enligt HTTP archive 2.1 MB stor, vilket är dubbelt så stort som genomsnittet för tre år sedan. I artikeln nämns bland annat ökad och användning av videos, bilder och tracking scripts från tredjepart som bidragande orsaker.

Förutom att en långsam sida är frustrerande för dina besökare så är hastighet likt att en hemsida är mobilvänlig, något som Google värderar i deras rakning i sökresultaten.

Idag tar vi en titt på hur du som webbansvarig för en hemsida kan göra hemsidan snabbare att ladda på 7 olika sätt. Det är lite varierande svårighetsgrad på dessa beroende på om du är mer en webbredaktör som mest skriver och laddar upp bilder eller en webbutvecklare som utvecklar hemsidor från grunden, men jag har försökt hålla mig främst till lite enklare knep som har flera bra verktyg som kan hjälpa dig på traven.

OBS! Innan du sätter igång med ändringar som dessa: Se till att genomföra en backup av hela din hemsidas filer och databas(er), samt din sidas .htaccess-fil! Läs gärna en detaljerad guide om hur du gör innan du sätter igång.

Jag har själv testat de flesta metoderna och verktygen i det här inlägget och använder flera av metoderna på den här sidan dagligen i mitt arbete, men jag har inte testat alla de verktyg jag länkar till här. Så skriv gärna en kommentar om dina erfarenheter av dem eller om det är något du rekommenderar istället!

1. Ladda in stilmallar i toppen och script i botten av koden

Att se till att ladda stilmallar (.CSS) i toppen inom <head>-taggen på en hemsida och script (.JS) i botten av sidan före </body>-taggen är något som lätt kan glömmas bort även av erfarna webbutvecklare.

Vad som sker när ett tungt script ligger i toppen av koden istället för i botten, är att webbläsaren då försöker ladda in innehållet i den före det som kommer under, vilket skapar en blockering och gör laddningstiden för hemsidan långsammare. Är scriptet istället placerat i botten så kan all information på resten av sidan som HTML-formatering och bilder börjas laddas samtidigt som scriptet laddar i bakgrunden vilket ger en trevligare upplevelse för användaren.

Om man laddar stilmallen i botten istället för i toppen av hemsidan så finns det en risk att besökaren hinner se en del fult, oformaterat innehåll innan webbläsaren hinner dit och laddar in CSS-reglerna för sidan.

Script i botten i WordPress och jQuery

Ett problem i WordPress är att många teman och plugin laddar in .JS-filer i toppen och även filer för Javascript-biblioteket jQuery laddas i sidhuvudet som standard i WordPress. När det kommer till plugins så erbjuder flera välgjorda plugins numera möjligheten att ställa in så scripten laddas i sidfoten och ibland även att de bara laddas in på de sidor där plugin:et faktiskt används, så att till exempel script för en slider inte laddas på varenda undersida.

Eftersom jQuery laddas i sidhuvudet som standard i WordPress så kan tyvärr en del teman och plugins ger felmeddelanden eller slutar fundera som de ska om du laddar in jQuery i sidfoten, då utvecklaren har skrivit koden med det i åtanke. Om det nu inte är fallet för de teman och plugins du använder, så är det ändå viktigt att se till så att jQuery laddas in före alla andra plugins script som kan tänkas behöva biblioteket för att fundera.

Plugins för WordPress:

  • Autoptimize: Autoptimize är ett plugin jag använder ofta då det på ett väldigt smidigt sätt komprimerar och kombinerar JS-filer och placerad dem i hemsidans sidfot som en eller ett par få filer med attributet defer påkopplat. Defer är ett attribut till <script>-taggen vilket innebär att scriptet väntas med att köras tills att webbläsaren har gått igenom resten av sidans innehåll. Nya filer genereras automatiskt och laddas in från en cache-mapp på din server och om du har olika script på olika sidor så genererar den flera kombinerade filer.

2. Minifiering av HTML, script och stilmallar

Om du tittar i källkoden på en modern hemsida idag så ser du ofta att en mängd olika Javascript och CSS-stilmallar läses in. Används flera tunga sådana filer så finns det risken att sidan laddar långsamt på en sämre uppkoppling och att delar av sidan buggar ur eller ser konstig ut tills allt är färdigladdat. Ett sätt att minska risken för detta är genom så kallad minifiering av script och CSS.

Vid minifiering så går ett verktyg genom din kod och tar automatiskt bort sådant som radbrytningar, blanksteg och kommentarer ur koden så att den ofta blir en enda lång rad. Det är inte särskilt enkelt att läsa sen som kodare men för webbläsaren gör det inget och minifieringen gör att filerna kan minska en del i storlek. Du kan fortfarande arbeta med din normala kod men sen se till att minifiera den och se till att hemsidan läser in den minifierade versionen av scriptet och/eller stilmallen när det är dags för sidan att publiceras.

När du laddar ner script för till exempel sliders eller liknande så kommer de ofta i en version i full storlek likt “scriptet.js”, “style.css” och en mindre, minifierad uppsättning likt “scriptet.min.js”, “style.min.css” – på samma sätt kan du göra för ditt eget innehåll och läsa in de filerna istället.

WordPress-plugin för minifiering:

  • WP Rocket: WP Rocket är ett betal-plugin jag själv använder för just caching, men det har även stöd för minifiering av HTML, CSS och JS med olika val av metoder för att låta plugin:et utföra detta automatiskt. Letar du efter ett gratis alternativ finns t.ex. W3 Total Cache
  • Autoptimize: Förutom att kombinera JS-filer och placera dem i footern, så komprimerar Autoptimize även JS-filer. Plugin:et kombinerar och komprimerar även CSS-filer och komprimerar HTML-kod så att den visas utan radbrytningar etc. Allt detta innebär en mindre storlek på sidan och färre requests vilket också ger snabbare inladdning. Autoptimize har funktioner som gör att du kan exkludera JS-filer du inte vill ta med att skicka kombinerade och komprimerade till sidfoten- till exempel jQuery eller om det är något script som slutar fungera korrekt med detta plugin eller som av någon anledning måste vara i sidhuvudet. Nackdelen med Autoptimize är att det kan kräva en del testande för att få det att fungera men om du inte har massor med olika plugins och egna script så är det nog inga konstigheter.

Hemsidor för minifiering online:

Mjukvara för minifiering:

  • Grunt: Körs i terminalen, kanske inte något jag skulle rekommendera för en nybörjare- men effektivt när man fått det att rulla.
  • Codekit 2: Endast till Mac, kostar 32$ men har gratis provversion. Minifierar dock endast Javascript, ej CSS.

3. Användning av CDN för innehåll

CDN står för Content Delivery Network och innebär förenklat att ett system med sammankopplade servrar i olika datacenters runt om i världen levererar data till användare, ofta från det datacenter som ligger närmast användaren geografiskt för snabbast åtkomst. Många populära script och ramverk finns idag uppladdade hos olika gratis CDN:s som du kan använda i din kod istället för att ladda in innehållet från din server så att det går snabbare.

Fördelar med användning av CDN:

  • När ett script laddas från en CDN så ökar chansen att samma fil redan har laddats från samma server av användaren på en annan hemsida (t.ex. jQuery), vilket gör att den inte behöver laddas ner igen inne på din då filen redan finns i webbläsarens cache.
  • Med CDN så laddar din hemsida innehåll från flera olika servrar parallellt, vilket är särskild bra om din sida har mycket innehåll då webbläsare begränsar antalet parallella uppkopplingar för en värd.
  • Har du en högtrafikerad hemsida så kan inladdning av innehåll med CDN minska användningen av bandbredd på din server för övriga innehållet och i längden hålla nere dina kostnader för webhotell.
  • Användning av CDN sprider ut risken för att filer inte ska svara: Skulle en datacentral vara nere så laddas filen från en annan istället, jämför detta med om du har alla filer på ett vanligt webbhotell där det bara finns en plats som alla filer kan laddas från och sidan blir väldigt beroende av webbhotellets upptid. Om du är bekväm med en del kodande kan du även lägga till så kallade “fallbacks” som gör att filer först försöker laddas genom CDN, men om det inte skulle fungera så försöker den ladda från din egna server istället.

Exempel på hur det kan se ut med cookie-scriptet jQuery Cookie i din kod med användning av CDN:

Före:

<script type="text/javascript" src="js/jquery.cookie.min.js"></script>

Efter:

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

Vill du läsa in ett populärt script i WordPress från CDN istället för det som följer med i t.ex. det plugin som använder det så kan antingen använda ett plugin som W3 Cache:s CDN-funktion eller leta upp ID för scriptet och gå in och redigera i functions.php och ta bort scriptet ur den kö med script som läses in av sidan. Till exempel wp_dequeue_script( 'jquery-cookie' ); där “jquery-cookie” är scriptets ID. Sedan kör du enqueue det på nytt igen fast med adressen till CDN. Läs mer i WordPress Codex.

Skaffa en eget CDN:

Du kan även sätta upp en egen CDN-tjänst för att ladda upp exakt de filer du vill nå från den och alltså inte bara populära bibliotek eller stilmallar som många andra har användning av. Att starta och använda en eget CDN hos någon stor leverantör är inte mycket svårare än att ladda upp filer via FTP och det finns idag även flera program för tjänster som Amazon S3 där du kan dra in filer på precis samma enkla sätt. Några av dessa är S3 Browser för Windows och Cyberduck för Mac, där den sistnämnda också fungerar för FTP och SFTP.

Ladda in bilder och videoklipp med CDN:

Det är inte bara mindre filer som Javascript och CSS-filer som du kan använda CDN för. Särskilt lite tyngre filer som bilder och videoklipp är extra passande för att slänga upp på ett eget CDN. Idag finns det hela företag backade med miljontals dollar i investeringar som bygger på användning av CDN för stora filer, så som filuppladdningstjänsten WeTransfer. Högupplöst, tunga bilder som annars kan vara en av de stora bovarna för långsamma sidor (mer om detta längre ner), kan plötsligt laddas snabbt med användning av CDN och skillnaden kan bli särskilt stor om du inte har världens snabbaste webbhotell.

Exempel på gratis CDN-bibliotek:

Tjänster för att starta ditt eget CDN

WordPress-plugin för användning av CDN

  • WP Rocket: Plugin:et låter dig byta ut sökvägar till alla filer eller utvalda filer på hemsidan från valfri CDN-adress. Du kan även välja att exkludera vissa filer från denna hantering och istället ladda dem från ditt webbhotell.
  • W3 Total CachePlugin:et är förberett för att koppla ihop med MaxCDN men du kan även ställa in användning för andra som Amazon CloudFront, Amazon S3, Microsoft Azure Storage och egen FTP.
  • WP Offload S3: Ett plugin som på ett smidigt sätt låter dig koppla Amazon S3 till ditt mediabibliotek i WordPress så att filer laddas upp till Amazon istället för lokalt. Detta plugin kostar pengar, men det billigaste alternativet låter dig använda plugin:et för ett obegränsat antal hemsidor och max 2 000 mediauppladdningar.

4. Undvik brutet innehåll

Brutet innehåll i form av länkar, bilder och videos som ger svarskoden 404 ej funnen i webbläsaren, innebär onödiga begäran av webbläsaren och försämrar användarupplevelsen. Försök ta reda på varför innehållet är brutet, beror det på en felstavning i koden, en bugg eller innehåll på den egna eller en extern server som har tagits bort? Om du har en hemsida med mycket innehåll med många gamla sidor kan det vara väldigt tidskrävande att försöka lösa det här manuellt, men som tur är finns det flera olika bra verktyg för att söka igenom ditt innehåll och se om något är brutet och behöver hanteras.

Verktyg online:

  • BrokenLinkChecker.comDet finns en del olika gratis verktyg på nätet för att analysera efter brutet innehåll på en sida, som BrokenLinkChecker.com som dock endast letar efter länkar. Som oftast med bra verktyg så kostar de bästa tjänsterna och funktionerna pengar.

Verktyg för WordPress:

  • Broken Link Checker: Ett gratis plugin som låter dig scanna igenom din hemsida efter brutna länkar, bilder och videos. Efter en scanning så får du sedan en sammanställning över innehållet och att tillämpa lämplig åtgärd för det som att ta bort, byta ut eller ignorera.

Mjukvara:

För hemsidor som inte använder WordPress finns det crawlers i form av program du installerar i din dator som scannar igenom hemsidans innehåll, t.ex. Xenu och Screaming Frog.

5. Dra ner på bildstorlekar och optimera bilder

Senaste åren har det exploderat med användning av många och stora bilder på hemsidor. Det brukar sägas att en bild säger mer än tusen ord men tyvärr för din webbläsaren så säger den även ofta mer än flera tusen kilobytes om bilden inte är optimerad. Särskilt i en mobiltelefon med sämre uppkoppling så kan problemet ofta uppstå att en bild som annars skulle fylla upp en stor datorskärm laddas i sin fulla storlek fast den nu bara behöver visas i en bråkdel av sin originalstorlek på mobilskärmen. Just detta med att ladda in bilder i olika stora format beroende på plattform är lite mer komplicerat, men vad du som mer vanlig användare kan göra är att försöka tänka på bildstorleken från att du sparar ner bilden i ett bildbehandlingsprogram till hur du infogar den på din hemsida eller i t.ex. WordPress.

Spara ner i mindre storlek i bildbehandlingsprogram

Populära bildbehandlingsprogram som Photoshop har en funktion som heter “Save for web” vilket låter dig komprimera och ställa in dina bilder så de tar mindre storlek. För bildformatet JPEGs så brukar jag se liten märkbar skillnad uppe vid 80% komprimering men det beror mycket på vad bilden innehåller och hur känslig du är med att den ska vara i toppkvalitet. Driver du en fotosida är du kanske mer känslig att bilderna ska vara i toppkvalitet men om det bara är en enkel bild i ett blogginlägg är det nog inte lika viktigt.

Infoga bilder på rätt sätt i WordPress

När du laddar upp en bild i WordPress så sparas den utan att du riktigt ser det, ner i flera olika storlekar på din server. Dessa är sedan de bilder du kan välja bland “Small”, “Large”, “Full Size” osv. när du infogar en bild senare. Ett vanligt misstag är att välja “Full Size” när man lägger in en bild fast bilden är betydligt större än ytan den läggs in i, t.ex. att det är ett fullstort fotografi på flera Megapixlar som läggs in i ett inlägg på en blogg med en sidebar.

Komprimering av redan sparade bilder med plugins & verktyg

Så vad gör man om man har en hel sida med mer än hundratals tunga bilder som skulle ta otaliga timmar att gå in och spara om i ett bildbehandlingsprogram och infoga på nytt? Det finns en mängd olika plugins och verktyg för att lösa detta.

Verktyg online:

  • Kraken: Från 5$/månad men de har gratis provversion
  • GTmetrixFörutom att ge dig en rapport med råd om förbättringar för din hemsida, så kan får du länkar direkt till optimerade versioner av dina bilder som kan behöva det.

Plugin för WordPress:

  • EWWW Image Optimizer: Detta plugin komprimera bilder allt eftersom de laddas upp i ditt mediabibliotek. Du kan även utföra en “bulk optimize”, vilket gör att den automatiskt komprimerar alla bilder i biblioteket. Du kan även låta plugin:et optimera bilder utanför mediabiblioteket, så som bilder som följer med i plugins och liknande. Med standardinställningarna så utför EWWW Image Optimizer komprimering utan någon synbar kvalitetsförlust och det handlar ofta om några få procents mindre storlek, men du kan även gå in och rota i inställningarna för att till exempel ersätta transparens i PNG-bilder till en bakgrundsfärg, komprimera JPEG-bilder med kvalitetsförlust och konvertera olika bildformat. Ibland kan det ta en bra stund för en bulk-optimering, särskilt om du har många filer och servern är lite trött och jag har upplevt att plugin:et drar en del prestanda även när det inte är i aktiv användning. Därför kan det vara en idé att kanske ha det avaktiverat när du inte använder det och manuellt göra körningar för nya bilder och ta definitivt backup på dina bilder innan ifall de skulle se för fula ut efter en optimering!

Mjukvara:

  • ImageOptim – Gratis, endast till Mac
  • Codekit 2: Codekit 2 har förutom en mängd smidiga funktioner som minifiering jag nämnt tidigare, även inbyggt stöd för optimering av bilder i din hemsida.

6. Håll nere med avancerat innehåll

Många moderna hemsidor har idag betydligt fler animationer, script och häftigt innehåll idag än för några år sedan. Problemet är att om man har lite väl mycket av detta så krävs det att mer innehåll laddas in och även att det kräver mer av webbläsaren och enhetens prestanda för att visa sidan korrekt. Framförallt i mobilen märker jag själv på många sidor jag besöker som har animationer och slideshows att det tar en stund att ladda och inte riktigt flyter på så bra som i en dator. Är du mån om att användaren snabbt ska kunna ta del av ditt innehåll och att det inte ska kännas trögt med interaktionen, så kan det vara en bra idé att hålla nere på vad jag kallar “avancerat innehåll”. Med det tänker jag bland annat på:

  • Animationer genom Javascript: Animerade sliders och parallax-bakgrunder ser häftiga ut men de laddar ofta in tunga bilder och script och ger lätt en hackig känsla vid scroll.
  • CSS3-animationer: Även detta är bra att spara med om du är ute efter hög hastiget och vill ha en sida som fungerar även för de stackare som fortfarande dras med föråldrade webbläsare.
  • Videoklipp: Videos är ett effektivt sätt att berätta om din produkt eller tjänst, men särskilt i mobila enheter kan det vara bra att hålla nere antalet videos eller åtminstone tänka på storleken då tyvärr inte alla har 4G-uppkoppling med perfekt täckning.
  • Flash: Jag har skrivit ett separat inlägg tidigare om varför du bör sluta använda Flash och storlek på filerna är en faktor i det hela. Ja det och att det inte fungerar alls på enheter med iOS förstås.

7. Använd caching och rätt inställningar i .htaccess

Caching för en hemsida innebär förenklat att det genereras filer som säger “det här det senaste materialet i form av script, stilmallar, bilder och HTML-innehåll – du behöver inte göra körningar med PHP eller andra serverspråk eller leta i databasen för att få fram innehållet”. Så till exempel i WordPress, istället för att en besökare går in och det körs ett antal frågor till servern med PHP och som letar i sidans MySQL-databas, så presenteras en redan förberedd HTML-sida med resultatet som finns på sidans server, då de redan är fastställt att det är så det senaste innehållet ser ut. Detta sparar en hel del i bandbredd och prestanda för din server och caching är särskilt användbart för högtrafikerade hemsidor.

Med caching så kan du även ange att filer som script och stilmallar kan lagras och hämtas lokalt i besökarens webbläsare under en längre tid och inte behöver läsas in på nytt varje gång vid ett återbesök då de inte uppdateras så ofta, utan de läses bara in på nytt om filerna skiljer sig från de som redan finns lokalt hos besökaren.

Inställningarna för detta görs i hemsidans .htaccess-fil, vilket använder ett språk som jag inte tycker är super-pedagogiskt, därför är det väldigt smidigt med CMS:er som WordPress där det finns kraftfulla plugins som genererar den koden åt dig med inställningar istället.

WordPress-plugin för caching:

  • GZip Ninja Speed CompressionOm du inte har tid och kunskap att grotta ner dig så mycket om hur caching fungerar och vad olika inställningar i andra mer avancerade plugin gör så är detta ett alternativ. Det ger dig en enda checkbox vilket aktiverar GZip i din .htaccess-fil.
  • W3 Total Cache: W3 Total Cache, plugin:et jag nämnt tidigare här i inlägget – har förutom inbyggt stöd för GZip, även en stor mängd med inställningar för caching av HTML, CSS, JS och databas. Det kan vara lite invecklat att förstå vad allt gör till en början och det kan krävas en del trixande och testande om du till exempel använder en sida som använder cookies och dynamiskt innehåll. Jag har även märkt att beroende på serverkonfiguration och hur din sida fungerar så kan W3 Total Cache ibland göra vissa delar av det besökaren ser eller WordPress admin-del lite långsammare än vad det borde vara med de inställningarna – dock har jag inte upplevt långsammare för besökare än vad det var innan! Detta kan då kan kräva lite extra meckande för att få till det precis rätt, men i övrigt är det mitt favorit-plugin för caching i WordPress då det är så heltäckande.
  • WP RocketDetta betal-plugin är lättare att sätta sig in i än W3 Total Cache och har färre alternativ att gå vilse bland. För en avancerad användare finns det lite färre alternativ att finjustera, men jag upplever att det oftast fungerar bättre och är mer snabbt i admin än W3 Total cache. För en nyare användare och om du har en enklare WordPress-hemsida så är det här ett kanonval då grundinställningarna täcker majoriteten av alla behov väldigt snabbt för de flesta.

Verktyg för att testa och utvärdera din hemsidas hastighet


Du har väl inte missat mina andra guider från tidigare som:

7 sätt att testa mobil responsiv design i din dator
5 verktyg för att testa din hemsida i Internet Explorer 6 och andra webbläsare

Kontakta mig om att snabba upp din hemsida »

Postat av under Webbdesign, WordPress.

Välj rätt köpta WordPress-tema

Bild baserad på fotot “Engagement Ring Luxury Tax Monopoloy” av Philip Taylor, CC BY 2.0

När jag utvecklar hemsidor i WordPress så blir ofta en tidig frågeställning om kunden vill använda sig av ett köpt WordPress-tema (även känt som ett Premium theme) som grund eller ett unikt, egenutvecklat. Köpta teman kostar ofta bara några hundralappar och kan i bästa fall spara en del tid då man får en färdig, testad design direkt utan något skissande. Förutom designen finns det teman med flera smidiga funktioner och plugins förberedda som enkelt låter dig bygga en egen sida för till exempel hotellbokning, jobbannonser eller en modebutik. Men det kan ibland ändå innebära att jag som utvecklare behöver lägga en del tid på anpassning och att avaktivera delar av temat så att inte sidan blir långsam.

En del webbutvecklare eller webbyråer använder tyvärr köpta teman eller gratisteman utan att det framgår tydligt för kunden, men jag tror på transparens med köpta WordPress-teman i kundprojekt. Köpta teman och egenutvecklade har båda har sina för- och nackdelar, men idag tar vi en titt på några tips och frågeställningar för att välja rätt betal-tema för WordPress.

1. Använd en seriös leverantör

Det finns en hel uppsjö med hemsidor som säljer så kallade “Premium themes” för WordPress och idag finns det till och med företag med flera anställda som arbetar heltid med att vidareutveckla och ge support för köpta teman och plugins för WordPress. Som med mycket annat på nätet så kan en del sidor som dyker upp genom Google-sökningar se seriösa ut, men alla teman som dyker upp i toppen är nödvändigtvis inte de mest användarvänliga, säkra, väldokumenterade och uppdaterade teman som finns. De större arkiven som låter privatpersoner och företag lägga upp teman för försäljning ställer en del krav på kvalitet och säkerhet för att ett tema ska få vara med och de företag jag listar nedan har tusentals nöjda kunder.

Några seriösa sidor som jag har använt tidigare för köpta WordPress-teman med framgång är:

  • Themeforest: Har mängder av teman för WordPress och WooCommerce
  • Kreisi: Har bland annat temat Enfold
  • Theme Fusion: Kända för temat Avada som är en av de mest sålda på Themeforest

Andra som jag inte använt själv än men som jag hört mycket gott om är:

2. Jämför betyg och antal köp

Detta kan ses som en självklarhet, men ett stort antal köp kombinerat med ett högre betyg antyder om att många användare har köpt temat och är nöjda med det. En större användarbas ökar även chanserna för att du kan hitta svar även från andra användare i temats supportdel eller på andra forum eller bloggar runt omkring på nätet om det skulle dyka upp problem. Ofta kan det vara värt att lägga lite extra pengar på ett bra tema där du slipper lägga tid på plötsliga begränsningar eller buggar längre fram.

De mer populära teman jag själv har köpt har uppdaterats mer kontinuerligt för bättre optimeringar, nya funktioner och säkerhetsfixar än de mer obskyra teman jag använt. Det är ju inte så konstigt då det finns fler användare som motiverar uppdateringar och tema-skaparna vill ju att nöjda användare ska köpa fler licenser eller köpa av deras andra produkter och tjänster.

3. Är temat användarvänligt, flexibelt? Går det att enkelt anpassa och återanvända i framtiden?

Något jag brukar titta efter direkt när jag väljer ett tema att köpa är om det finns inbyggt stöd för så kallade child themes och inställningar för custom CSS. Det förstnämnda gör det enkelt för mig som utvecklare att utgå från temats design för att lägga till några ändringar och egna block med design vid behov och det sistnämnda är mer för enklare småfixar direkt i WordPress admin utan behov av FTP-uppladdning.

För mig som WordPress-utvecklare är inte designen huggen i sten ändå men det sparar lite tid om det går enkelt att ändra redan från start. Många teman har även med en speciell del i admin som låter användare ändra typsnitt, färger och storlekar utan att behöva kunna någon kod – detta är också något som brukar uppskattas av kunder som vill testa lite andra mindre ändringar av designen längre fram.

En del teman innehåller flera olika layouter och kan anpassas olika vare sig du vill ha en snygg blogg, företagssida eller butik. Om du har till exempel ett start up-företag och kanske först bara vill börja med en enkel landningssida, för att sedan utöka med en bloggdel och egen butik i WooCommerce så är detta kanon! Men annars kan det lätt bli plottrigt och ta med väldigt mycket extra kod i form av stilmallar och script som tynger ner sidan och gör den även svårare att administrera då det finns fler val att hålla reda på. Vid det sistnämnda exemplet kan det då vara bättre att välja ett tema som fokuserar på just det du behöver och som har ett mindre “jack of all trades”-tänk.

4. Har temat support? Finns det några vanliga problem för temat?

En fördel med de mest populära premium teman är att de har rätt snabb support, både där du kan ställa frågor före ditt köp och där du kan få svar om något krånglar efter ditt köp. Förutom att de kan ha support på deras sida i till exempel Themeforest så kan en del även ha egna support-forum eller gå så långt som att erbjuda betald support av en tekniker för att hjälpa till om du skulle få riktigt frustrerande problem.

Supportdelen för temat kan vara bra att skumma igenom för att se om det finns några vanliga problem för temat. Detta är särskilt bra om du har någon speciell funktion du har tänkt för sidan som det inte är solklart om den kommer fungera tillsammans med temat baserat på dess beskrivning, så som översättning med WPML eller om det är ett speciellt plugin du har tänkt använda.

5. Testa temats demo

Här menar jag inte enbart att klicka runt lite i demon för temat och se så att allt ser OK ut, utan även om du har möjlighet: att testa den i olika webbläsare och upplösningar och i mobilen. Jag har använt flera snygga Premium-teman där det sen visat sig att utvecklarna har gjort några små missar och glömt mobilanpassa delar av designen  och en del teman som verkar lovande kan till och med ge felmeddelanden i din webbläsares konsol om du tar en titt på demon.

Testa hastigheten

Om du surfat runt bland en del teman så har du nog snart sett att de likt många moderna sidor följer trenderna med stora ytor och bilder, animationer och mycket scroll. Det kan se häftigt ut men i många teman så resulterar det i att det är mycket innehåll som behöver laddas och många olika script som behöver hämtas, vilket kan göra att sidan lätt blir långsam att ladda och/eller upplevs som hackig i mobiltelefoner eller enheter med lite lägre prestanda. Därför kan det vara bra att köra demo-sidan för ett tema genom en tjänst som Pingdom Tools eller PageSpeed Insights för att se sidans prestanda och om det är mycket delar som behöver laddas in.

Tyvärr är det lite missvisande ibland med demos för teman då de gärna lassar på med alla kombinationer av design och funktioner på en gång på startsidan eller flera av undersidorna för att visa allt som är möjligt med temat, men de har ofta också lite mer trimmade sidor för t.ex. kontaktformulär som går att testa. Det bästa är om du kan testa en av länkarna på demosidan som mest efterliknar den design du tror att du kommer vilja ha.

6. Om det ingår plugins: Är de etablerade och nödvändiga?

Flera betal-teman för WordPress brukar bjuda på ett eller flera populära plugins utan någon extra kostnad för att locka lite extra till ett köp. Vanliga plugins kan vara slider-plugin som LayerSlider och plugin som Visual Composer vilka gör det väldigt enkelt för slutanvändaren att lägga in innehåll med drag’n’drop eller förinställda knappar för kolumner och innehåll. Båda dessa plugins är även separat prisvärda men likt jag beskrev tidigare i texten så kan det snabbt bli för förvirrande med alla extra val där man kanske inte behöver mer än en bråkdel av det som erbjuds. Dessa plugins lägger också de till fler stilmallar och script som behöver laddas in och som standard så är de sällan komprimerade eller särskilt optimerade vilket gör sidan långsammare och inte lika omtyckt av Google och besökare.

TL;DR:

Sammanfattningsvis är rätt betal-tema för WordPress enligt mig ett som…:

  • …är från en seriös leverantör
  • …har ett högt betyg, flera köp och en stabil användarbas med nöjda kunder
  • …passar din sidas syfte utan att det blir massa förvirrande administration p.g.a. design och funktioner du inte behöver
  • …har bra support av skaparna och av andra användare
  • …är hyfsat snabb och inte har ett berg av stilmallar och script som bromsar ner sidans hastighet
  • …har etablerade och nödvändiga plugins om de ingår utan extra kostnad

Kontakta mig för hjälp med WordPress-utveckling »

Postat av under Företagande, Webbdesign, WordPress.

Köpta premium WordPress teman

Antalet hemsidor i världen som använder WordPress fortsätter att öka och en stor andel av dem använder säkert färdiga köpta teman från till exempel ThemeForest, StudioPress eller WooThemes.

Som webbutvecklare av WordPress-hemsidor så kan det i en del projekt, spara massor med tid för ett projekt genom att använda ett köpt Premium-tema för några hundralappar. Dessa premium-teman kan ofta innehålla flera bra mallar, förberett för E-commerce plugin:et WooCommerce och flera extra funktioner och extra plugins på köpet som annars skulle kostat extra.

Ibland kan såklart ett premium-tema inkludera lite för många tunga script och funktioner som inte behövs och då får man ändå lägga lite tid på att ta bort detta för att inte göra hemsidan långsam eller göra det förvirrande för kunden. Dessutom så har jag stött på en del köpta teman som inte var fullt responsiva eller som redan i demo-läget ger buggar och felmeddelanden i webbläsarens konsol.

Men när ett köpt tema är sjysst så är det särskilt bra för företag med lite mindre budgetar, som t.ex. start ups som vill ha något snyggt med deras egen logotyp och färger, men där det snarare ligger fokus på att få ut något snabbt och kostnadseffektivt och inte nödvändigtvis att ha en sida med en revolutionerande unik design och funktioner.

När det handlar om att använda ett köpt premium tema som grund för en WordPress-hemsida så försöker jag alltid vara transparent med det och ge förslag till kunden på olika teman som jag bedömer vara bra som kan användas för hemsidan. Det händer oftare och oftare att det är kunden själv först som föreslår att vi utgår från ett färdigt köpt tema snarare än ett eget från grunden. Det finns ofta annat än själva utvecklingen och designen av temat som man kan ta betald tid för, så som flytt från ett publiceringsverktyg till ett annat, sökmotoroptimering och ompekningar och att utveckla nya funktioner.

Nu är tyvärr inte alla webbutvecklare/webbyråer som är transparenta om de använder ett köpt tema utan några större ändringar åt kunden. Jag var till exempel en gång i kontakt med en företagare vars affärsidé i princip var att:

  1. Sälja in en hemsida till ett företag som har hög omsättning.
  2. Ta hjälp av en webbutvecklare (som mig) för att lägga några timmar på att anpassa ett köpt tema som kostar några hundralappar till kundens färger och att lägga in deras logotyp. Eventuellt läggs några få timmar till på projektledning och att få in material till sidan.
  3. Skicka faktura för hemsidan till slutkunden för upp till 40 – 50 000 kr(!)
  4. Rinse and repeat

Värt att nämna är att jag inte förde vidare dialogen med den personen. Jag har även varit inne på flera hemsidor för olika Svenska webbyråer där det är rätt uppenbart att de säljer antingen ett färdigpaketerat eget tema som de återanvänder för överpris, eller att de använder köpta premium-teman utan att meddela kunden om det.

En liten sidokommentar, vad är grejen med webbyråer eller frilansare inom webb som använder ett köpt tema med minimalt med ändringar i designen för deras egen sida? Varför inte flexa er kreativitet, tekniska kunskaper och visa att ni kan göra något eget direkt där? Det är lite som en personlig tränare som har haft flera kunder med bra resultat, men som själv är tanig med ölmage.

Visst, jag skulle säkert kunna tjäna mer pengar kortsiktigt på att ta stora summor betalt och använda köpta teman med några få timmars anpassning utan att meddela kunden i fråga om det om de inte har så bra koll. Men det är inte hållbart långsiktigt och jag skulle verkligen inte vara stolt över mitt arbete då.

När en webbutvecklare eller webbyrå tar gott betalt och levererar en hemsida åt en kund med ett knappt modifierat köpt tema så blir säkert kunden nöjda till en början.

“Oj, vad snabbt det gick att få hemsidan och snygg är den ju också!”

Men vad händer sedan om de råkar halka in på något annat företags sida och märker att de har i princip samma layout med bara några mindre skillnader i logotyp, färger och innehåll? Ännu värre, tänk om de halkar in på en hemsida som är utvecklad av samma person eller byrå och den har nästan samma utseende? Då om de utlovats en unikt utvecklad och designad hemsida så ligger inte en reklamation, smutskastning eller till och med ett juridiskt fall långt borta.

Jag tror inte man ska underskatta kunders teknikkunnighet eller hur rykten kan spridas över nätet. Även om kunden som betalar överpris för en “klonad” design kanske inte är så kunnig inom webbutveckling och WordPress, så kanske han eller hon känner någon som är det och som tar en snabb titt i källkoden eller ser direkt vad designen använder för populärt tema.

Jag tror på transparens när det kommer till användning av köpta teman och plugins och jag tror att man tjänar igen det på längre sikt genom att kunden får ett förtroende för en, man får mer jobb och det blir en mer långvarig relation och fler ringar på vattnet i form av rekommendationer. Detta istället för ett par snabba klipp av kundprojekt som löper en stor risk till missnöje längre fram.

Hur ser du som utvecklare eller beställare på användning av köpta WordPress-teman i kundprojekt?

Kontakta mig om WordPress utveckling »