Shopify är en av de plattformar jag har ett hat-kärleksförhållande med.
Å ena sidan är det bland de mest kraftfulla alternativen för att skapa en e-handelsbutik, och det är ganska lätt att komma igång. Du kan ha en funktionell, snygg onlinebutik fylld med produkter på en dag eller mindre om du vet vad du gör, och mycket av den tiden går åt till att lägga till produkter och publicera innehåll.
Å andra sidan kan deras bloggsystem behöva förbättras. Du är mycket mer begränsad i vad du kan göra med appar än om du använde ett system som WordPress, och standard Shopify-plattformen, även om den är relativt snabb, kommer fortfarande inte att ge dig den eftertraktade 90+ poängen på PageSpeed.
Eftersom webbplatsens hastighet är ett viktigt modernt mått och en användarupplevelsefaktor som Google kommer att belöna, så vill du snabba upp din Shopify-webbplats. Många appar lovar världen att snabba upp din webbplats, men fungerar någon av dem? Vilken är bäst?
Tja, jag provade så många av dessa Shopify-appar som möjligt, och jag har ett definitivt svar på vilket som är bäst för PageSpeed-optimering.
30 sekunders sammanfattning
Shopify är en potent plattform för e-handel men dess hastighetsoptimering behöver förbättras. Bland många appar sticker Hyperspeed: Extreme Page Speed av Rvere ut. Den erbjuder optimerings- och hastighetsverktyg, acceleration av webbplatsen med ett klick och tillåter till och med kontroll över appar på användarnivå. Det kan dock inte korrigera varje sida eller element och kan förbise vissa under optimering. Trots några nackdelar, som att arbeta med ett replikerat tema och en prislapp på $39 per månad, tillgodoser Hyperspeed väl Shopifys hastighetsbehov.
Vinnaren: Hyperspeed
Av alla appar för att öka sidhastigheten som är tillgängliga för Shopify-butiker var den överlägset bästa jag provade Hyperspeed: Extreme Page Speed av Rvere.
Det här alternativet är en ganska omfattande sidhastighetsapp för Shopify, och den ger dig en massa fördelaktiga funktioner, inklusive en array som vanligtvis skulle kräva 3-4 plugins på WordPress. Det är det inte perfekt – Jag har några nackdelar med fördelarna – men det är det mest effektiva av allt jag testat. Du kan använda den utan några kodningsförmåga, och du kommer att få en snabbare Shopify-webbplats med bara ett klick.
Vilka funktioner har Hyperspeed?
Först och främst har de en komplett uppsättning optimerings- och hastighetsverktyg. De kan göra en hel del skriptminifiering och -optimering och skjuta upp skript, så att de inte behöver köras vid sidladdning (vilket är en mördare för grundläggande webbviktigheter.) De kan optimera din Shopify-temakod, som många appar för sidhastighet på Shopify rör inte. De har ett inbyggt verktyg för bildkomprimering/smush för att säkerställa att dina bilder tar så lite plats som möjligt, laddas extremt snabbt och behåller det mesta av sin ursprungliga bildkvalitet. En av de mest anmärkningsvärda funktionerna är kontroll över dina appar på sidnivå, så appar som inte behöver visas på specifika sidor (som målsidor eller produktsidor) laddas inte på dessa sidor.
En funktion som jag inte vill lista som proffs är prediktiv förladdning av sidor.
Förladdning är när du laddar en sida, webbplatsen går och i bakgrunden väljer länkar på sidan och laddar sidorna på andra sidan av dessa länkar om du bestämmer dig för att klicka på dem. Förladdning av länkar är lite resurskrävande, men det gör det mycket snabbare för användaren att surfa på resten av din webbplats. Predictive preloading väljer de mest sannolika länkarna att ladda och laddar bara in några av möjligheterna. Den spelar på att du klickar på rätt länkar för att få snabbare laddningstider vid nästa klick.
Problemet med förladdning är att det bara fungerar om rätt sidor är förinstallerade och fungerar bara när du redan är på sidan. Den kan inte förinläsa den första sidan som en användare besöker, oavsett vilken sida det är. Så det påskyndar besök från personer som tillbringar tid på din webbplats men påskyndar inte de första besöken.
Vad mäter Google för webbplatshastighet? Inledande besök.
Länkförladdning gör ingenting för dina Google PageSpeed Insights-resultat.
Det ger bara lite upplevd hastighet för vissa användare.
Fördelarna med Hyperspeed för Shopify
Några av de väsentliga funktionerna i Hyperspeed finns i min proffskolumn eftersom de är så kraftfulla.
1. Först, det möjliggör lat laddning för bilder och videor du använder på din webbplats. Lazy loading är ett viktigt verktyg för PageSpeed-optimeringar och Core Web Vitals eftersom du vill att köttet på din sida och layout ska laddas så snabbt som möjligt. Att vänta på att stora bilder eller, gud förbjude, videor ska laddas helt innan sidan är färdig att visas är direkt katastrofalt.
Naturligtvis är lat laddning inte unikt för Hyperspeed, inte på långa vägar. Eftersom det är ett av de vanligaste sätten att snabba upp en webbplats, hanterar många appar lat inläsning. Det är bara viktigt nog att jag kallar det som en fördel.
2. Ett av de mer avancerade alternativen som Hyperspeed ger dig är möjligheten att använd responsiva bilder istället för bilder i full storlek på mobilen. Mobile PageSpeed-poäng är de hårdaste och mest utmanande att optimera, och med tanke på mobil-först indexering uppdatering, detta är en stor funktion.
Responsiv design är inbyggd i Shopify. När du skalar fönstret runt ändras och storleksändras element, så att webbplatsen ser bra ut och bibehåller funktionalitet på alla nivåer. Det största problemet med detta är bilder. När du storleksanpassar skärmen uppåt eller nedåt – vanligtvis nedåt – kommer webbplatsen att ladda bilden i full storlek och sedan skala ner den. Det är ingen mening att ladda ett 3000px brett foto på en skärm som bara är 1290px bred. Även en förkrossad bild är större än den behöver vara i det här scenariot.
Den responsiva bildoptimeraren tillåter din webbplats att ladda olika storlekar för dina foton och bara ladda de optimerade bilderna för skärmen som tittar på den. Det är ett mycket kraftfullt sätt att öka hastigheten på mobilwebbplatser. Det är inte aktiverat som standard men jag rekommenderar att du aktiverar det.
Shopify är medveten om responsiva bilder och har varit det har lagt till stöd för det sedan 2017men det är bara tillgängligt i specifika teman. Hyperspeed aktiverar det – och använder det automatiskt – för alla teman. Supercool, eller hur?
3. Ett annat utmärkt sätt att få lite mer webbplatshastighet är med optimerade typsnitt. Typsnitt är i allmänhet ganska små, men de måste existera eller anropas från en tredjepartsserver, vilket kan lägga till förseningar på din webbplats. Genom att optimera typsnitt genom Hyperspeed får du snabbare laddningstider från dina sidor, och vem kan säga nej till det?
Det finns också massor av riktigt coola skriptjusteringar och optimeringar Hyperspeed ger till bordet.
4. Du har skriptminifiering. Minifiering tar bort överflödiga utrymmen, kommentarer och onödiga kram som kommer från att skriva manus som människor kan läsa. Allt det där är till hjälp för oss kodare att hålla reda på vad vi gör, men webbläsaren bryr sig inte. Du kan läsa mer om minifiering här.
CSS, JavaScript och andra skript kan minifieras automatiskt av Hyperspeed för att ge dig högre hastighet genom att minska storleken på filer som behöver laddas. Det är inte ett ton, men några kb här och där räcker ihop.
Det finns dock två fördelaktiga manusfunktioner som jag nämner specifikt.
5. Den första är Critical CSS-extraktion. En av mätvärdena som Google använder för PageSpeed, en av de viktigaste webbviktalen, är First Contentful Paint eller FCP. FCP är den tid det tar från att du begär servern tills de första bitarna av innehåll börjar renderas i webbläsaren. Om du någonsin har laddat en Shopify-webbplats och sett den sitta på en tom vit skärm i någon sekund innan allt kommer på plats, är det förseningen i FCP.
Hyperspeed identifierar element i CSS som behöver renderas för FCP och prioriterar dem samtidigt som andra mindre kritiska bitar av CSS kan laddas senare.
6. Nästa coola manusfunktion i Hyperspeed heter JavaScript-optimering. Den analyserar din webbplatskod, identifierar varje specifik bit av JavaScript och låter dig finjustera laddningen av varje skript individuellt. Skript som behöver laddas direkt kan prioriteras. Andra inkluderar kan vara lata laddade, laddade asynkront eller uppskjutna. Det är viktigt att noggrant testa dina temaändringar innan du distribuerar för att säkerställa att du inte bryter några funktioner eller fördröjer kod som inte bör försenas.
Denna finjusterade kontroll är exceptionellt kraftfull, och ärligt talat är detta den som jag anser vara den viktigaste försäljningsargumentet för Hyperspeed. Jag har inte sett dessa funktioner någon annanstans, och det är mycket värdefullt när du väl har ställt in det.
7. Hyperspeed drar också livedata från Google PageSpeed API i deras instrumentpanel, så att du kan se de senaste uppgifterna om din webbplatshastighet när du förbättrar dig.
Det är ingen jättestor funktion, men det är skönt att inte behöva testa din sajt igen varje gång du byter för att se om den fungerade.
Nackdelarna med Hyperspeed för Shopify
Jag nämnde ovan att även om jag tror att Hyperspeed är det bästa av Shopify-plugins för sidhastighet, är det inte perfekt. Jag måste diskutera några nackdelar om de är deal-breakers för dig. De är inte för mig, men du kan ha en annan situation.
Den första nackdelen är att även om det är väldigt bra på att förminska, skjuta upp och isolera individuella skript, CSS, bilder och allt annat, kommer det inte att fångas allt. Det kan och kommer att missa några, och det är svårt att förutsäga vilka det kommer att hoppa över och svårt att fixa manuellt.
Den här begränsningen innebär att du ibland har vissa sidor eller element som vägrar att laddas snabbare, så de enskilda sidorna hamnar långsammare än resten av din webbplats. Denna begränsning skapar också några irriterande fel i PageSpeed Insights som du antingen måste arbeta för att fixa eller lära dig att ignorera.
Till försvar för appen är detta inte en begränsning av Hyperspeed utan i hur vissa appar injicerar sin kod på din webbplats; vissa JavaScript och bilder kan optimeras, och andra kan inte.
Den andra stora nackdelen är det det fungerar genom att göra en kopia av ditt valda tema och ändra det. Det betyder ibland att om du redan försöker använda ett anpassat barntema eller ett ovanligt tema på något sätt, kanske det inte fungerar riktigt. Det kan också orsaka mindre problem när ett tema uppdateras, främst om det ändrar något som Hyperspeed behöver för att fungera och du måste vänta på att Hyperspeed ska uppdateras. På plussidan gör detta det enkelt att återställa alla ändringar som Hyperspeed gör om du behöver.
Den tredje nackdelen är helt enkelt priset. Av alla Shopify-sidhastighetsappar jag har provat är detta en av de dyrare, till $39 per månad.
Det är mer än vad vissa människor spenderar på sin Shopify-prenumeration! Naturligtvis är det en stor förändring för de flesta företag, men det går ändå ihop. Det finns ingen gratis plan men de erbjuder en 7-dagars provperiod om du vill prova det och se hur bra det fungerar, så du kan bestämma om det är värt besväret.
Förutom de tre nackdelarna finns det inget större jag kan säga för att kritisera det. Jag gillar Hyperspeed, och jag tror att det borde vara en kärnkomponent i alla bra Shopify-webbplatser idag.
Page Speed App Hall of Shame
Av alla appar för sidhastighet jag provade var de flesta bra om kanske lite mediokra. Två stod dock ut som de sämsta alternativen. Dessa två är:
- Booster: Page Speed Optimizer
- Swift – Page Speed Optimizer
Dessa två är i huvudsak identiska och har till och med samma språk på vissa delar av appen och i appen, så mycket att jag misstänkte att samma företag tillverkade dem. Det får mig att undra om någon av dem är vitmärkt.
Vad är problemet? Tja, deras appsidor ger löften om hastighetsförbättringarna du kan få och hur smidig sidladdning är, men när du installerar dem, gissa vad?
Den erbjuder endast länkförladdning; japp, det där som jag gnällde lite om ovanför det gör ingenting för din sidas laddningstid. Användare kan ha en något snabbare webbplats efter den första laddningen, men den första laddningen är vad sökmotorer bedömer din webbplats för. Google använder sidhastighet som ett rankningsmått, och förladdning av länkar gynnar inte dig; det blir noll SEO-boost.
Vad som är olyckligt med dessa två plugins är att de ger dig denna ansvarsfriskrivning efter att du redan har installerat appen och gett dem åtkomst till din webbplats. Det känns lite bedrägligt för mig.
Så här ser processen ut:
- För det första lovar appen att göra din webbplats snabbare.
- Därefter bestämmer du dig för att installera appen och dela dina personuppgifter med utvecklaren.
- Slutligen säger appen till dig att den faktiskt inte snabbar upp din webbplats.
Varför delade jag mina personuppgifter med utvecklaren då?
Det är åtminstone gratis, och jag antar att de positiva recensionerna kommer från användare som inte körde före och efter tester på sina laddningstider. Det lämnade fortfarande en sur smak i min mun.
Din tur
Så det är min rekommendation. Skaffa Hyperspeed, ställ in det och njut av de bästa fördelarna med sidhastighet på Shopify.
Jag är säker på att jag provade alla Shopify page speed appar innan jag kom till denna slutsats, men jag kunde ha missat något. Så om du har en favorit Shopify-butikshastighetsoptimerare får du gärna meddela mig om det. Jag kollar gärna upp det om det är en jag inte har (sett om du inte har ett alternativ för mig att kolla in).
Eller, om du har valt att använda Hyperspeed och inte kan få de resultat jag grälar efter, låt mig veta, så kan jag försöka hjälpa till.