Bättre resultat i Google PageSpeed Insights

Laddtid är en het rankingfaktor. Du kan kolla hur bra din webbsajt presterar med hjälp av PageSpeed Insights. Nu har jag rensat och packat kod för att få bättre prestanda. Så här gick det till.

Från och med juli 2018 kommer laddtider för webbsidor att bli en rankingfaktor i mobila indexet, enligt Googles tillkännagivande i januari i år. Laddtider har tidigare varit en rankingfaktor främst i Googles desktop-index.

Principen är enkel. Du ska ha så kort laddtid som möjligt när din webbsajt renderar upp en webbsida i en webbläsare. Praktiken är däremot inte lika enkel. Du måste packa och rensa kod, cacha resurser, flytta skript och komprimera bilder. Ett tufft jobb för vilken smartskalle som helst.

Nu har jag lyckats att få upp prestandan på den här sajten till en acceptabel nivå. Åtminstone enligt Google PageSpeed Insights. (Du kan göra prestanda-analyser av din sajt även på sidorna GTmetrix och Pingdom.) Och jag tänkte dela med mig av hur jag gjort.

Grunderna för PageSpeed i Wordpress

För att lyckas måste flera saker göras. Här är en lista över principer och åtgärder som ger bäst effekt. Under förutsättning att sajten för övrigt är kodad enligt Wordpress Coding Standards. Det kan förekomma inslag av tekniska begrepp här. Svårt att komma undan.

1) Använd få tillägg

Grundregel nr 1 för alla Wordpress-sajter. Eftersom Wordpress har öppen källkod finns det kodsnuttar ihopsnickrade av alla möjliga utvecklare i världen. Det är bra, men alla tillägg är inte bra. De kan också vara orsak till trassel. Skapa så mycket funktionalitet du kan direkt i Wordpress-temat i första hand. Du får en renare och kvickare kodbas.

Inspiration från Googles AMP-konferens den 13 februari, 2018. Automattic och Google samarbetar i projektet för ett snabbare internet.

Dåliga tillägg är såna som inte direkt bidrar med nåt. De har en funktion som du lätt kan lösa på annat sätt själv eller i samarbete med din utvecklare. Dåliga tillägg är också slarvigt kodade och hamnar ofta på kodkyrkogården eftersom de uppdateras alltför sällan.

Det är på nåt vis baksidan med öppen källkod. Du är tvungen att ta mer ansvar själv. Det är lite mer rocknroll, helt enkelt. Även om fördelarna naturligtvis överväger. Vilket företrädarna för licens-plattformarna aldrig skulle erkänna.

Här ser du de tillägg jag använder

Egentligen har jag själv lite för många tillägg. Men alla är noga utvalda med avseende på kvalitet och funktion och gör inte något onödigt. Simple Share Buttons Adder kommer jag nog att steka. Känns inte aktuellt längre med dela-knappar, eftersom den möjligheten redan finns i de flesta mobila webbläsare.

aktiverade (25) favoriter (8) nya (1)

• Akismet Anti Spam 4.03
• AMP 0.6.2
• Contact Form 7 5.01
• Contact Form 7 MailChimp Extension 0.4.50
• Cookie meddelande 1.2.42
• Flamingo 1.8
• Gallery Factory 2.1.0
• Glue for Yoast SEO & AMP 0.4.2
• HubSpot Marketing Free 6.1.4
• Instant Articles for WP 4.0.6
• Intercom 2.6.1
• Loco Translate 2.1.2
• Most and Least Read Posts Widget 2.5.10
• Post Tags and Categories for Pages 1.4.1
• Really Simple Twitter Feed Widget 3.1.1
• Regenerate Thumbnails 3.0.2
• Simple Share Buttons Adder 7.4.16
• Simple Sitemap 2.4
• Tabby Responsive Tabs 1.2.3
• Toggle wpautop 1.2.5
• W3 Total Cache 0.9.6
• Widget CSS Classes 1.5.2.1
• Widget Logic 5.9.0
• WP Smush 2.7.8
• Yoast SEO Premium 7.2

2) Slå på gzip-komprimering

Det här är en typ av standardiserad komprimering av olika filtyper som servern gör. gzip-komprimering kan göras både för Apache- och NGinx-servrar.

Använd inte ett tillägg för att göra det. Det är lätt att bara lägga in dessa koder i htaccess-filen. Har du Yoast SEO så kommer du åt htaccess-filen den vägen.

3) Använd en cache-metod du behärskar

Här finns framför allt två favoriter i Wordpress-världen. WP Super Cache och W3 Total Cache.

WP Super Cache

Den här är utvecklad av Automattic själva. Samma team som ligger bakom Wordpress. Dock har den fått lite kritik för att vara gammalmodig. Många gillar den, fördelen är att den är enkel att ställa in, men jag tycker inte den ger lika bra resultat som alternativet nedan.

W3 Total Cache

Ok, den är helt klart mer komplicerad att jobba med. Särskilt om du inte är bekant med begrepp som Last-Modified header, Expires header och ETags. Men det är värt det.

4) Kör enbart en enda komprimerad css-fil

Är din Wordpress-sajt framtagen i samarbete med en professionell utvecklare så har du redan detta. Om du har en äldre sajt, som kanske har byggts på något annat sätt, kan du tjäna på att kolla upp det här.

CSS-filerna är de filer som ser till att det ser bra ut visuellt längst fram i gränssnittet. Det man kallar för GUI. (Graphical User Interface.)

Minska antalet begäranden

Varje gång en css-fil (och även en del annat) ska hämtas och läsas in görs en begäran till servern. Har du då många filer som ska hämtas tar det tid. Det är inte bra. Du vill ha så få begäranden (requests) som möjligt för att korta ned laddtiden. Har du flera css-filer som hämtas kan du åtgärda saken genom att helt enkelt baka ihop dem till en enda.

Därefter ska du helst komprimera innehållet till en enda kodrad. Det kallas på utvecklarspråk för att förfula den. (Uglify) Det betyder egentligen inte att den blir ful, utan snarare svår att läsa. Ur ett PageSpeed-perspektiv blir den vackrare.

Jag använder kodeditorn Atom för att fixa det. Så här ser min komprimerade css-fil ut. Vacker, eller hur?

5) Ladda in javascript i sidfoten

I de flesta fall är det också en del javascript-filer som ska läsas in. Det är lätt att huvudvärken sätter in här, men det är faktiskt enklare än det först verkar. Låt oss ta det från början.

Asynkron laddning

Jobbar du med marknadsföring har du troligen behov av olika mätskript. Jag använder exempelvis Hubspot. Tidigare använde jag även Hotjar för att kolla heatmaps, det vill säga kartor över hur användare rör sig på sajten. Och de flesta av oss använder förstås Google Analytics.

Av den anledningen har Google tagit fram produkten Tag Manager. Marknadsavdelningen kan då lägga in mätskript själva utan att kontakta IT-gänget. Fördelen är också att du enbart behöver ett enda skript, för att hämta alla andra mätskript, på sajten. Google Tag Manager laddas asynkront, vilket betyder att den jobbar samtidigt som webbsidan hämtas till webbläsaren. Det ger snabbare laddtider.

One script to rule them all

Inne i Google Tag Manager kan du placera flera olika mätskript i olika behållare utan att påverka prestandan negativt.

Allt annat i sidfoten

Övriga javaskript som sajten behöver för att funka ligger ofta mellan <head>-taggarna. Därför läses de in tidigt, vilket medför att sidladdningen blir seg och trist.

Om du istället hämtar javaskripten från sidfoten så sker hämtningen senare. Det är en enkel åtgärd som kan göra underverk för PageSpeed-testet och även för användarupplevelsen. (UX)

Det fina är att du kan tala om för Wordpress när javaskripten ska läsas in. Det är en parameter i funktionen wp_register_script som måste sättas till true om du vill skicka ner skripten i källaren. Nu snackar vi php-kod. Det kan vara överkurs. Ta kontakt med din utvecklare i så fall.

Såhär ser det ut hos mig efter justeringen. (Scrolla höger för att se hela koden.) Sex javaskript hämtas i sidfoten vilket snabbar upp laddningen i toppen av webbsidan.

// Register scripts
wp_register_script( 'theme', ERICL_THEMEURI . '/_js/theme.js', array('jquery'), null, true  );
wp_register_script( 'superfish', ERICL_THEMEURI . '/_js/superfish.js', array(), null, true );
wp_register_script( 'hover-intent', ERICL_THEMEURI . '/_js/hoverIntent.js', array(), null, true );
wp_register_script( 'supersubs', ERICL_THEMEURI . '/_js/supersubs.js', array(), null, true );
wp_register_script( 'polyfill', ERICL_THEMEURI . '/_js/smooth-scroll.polyfills.min.js', array(), null, true );
wp_register_script( 'smooth-scroll', ERICL_THEMEURI . '/_js/smooth-scroll.min.js', array(), null, true );

Helst ska det precis som i fallet med css-filen vara en enda. Här är det ju sex stycken. Det ska jag fixa, men det påverkar inte direkt PageSpeed-poängen just nu.

Så här ser min header.php ut. Google Tag Manager-skriptet ligger direkt efter <head>– och <body>-taggarna. Detta är lätt att lägga in själv utan något extra installerat tillägg. Precis som skriptet för att hämta Google Fonts. Du ser också att det inte finns några andra javaskript-filer. De läses in i sidfoten.

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
	<!-- Google Tag Manager -->
	<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','ericl-GTM-id');</script>
	<!-- End Google Tag Manager -->
	<!-- Basic -->
	<meta charset="<?php echo strtolower( get_option('blog_charset') ); ?>">
	<title><?php bloginfo('name'); ?> <?php is_single() ? wp_title('|') : print '| '.get_bloginfo('description'); ?></title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!-- Chrome, Firefox OS and Opera -->
	<meta name="theme-color" content="#464646">
	<!-- Instant Articles -->
	<meta property="fb:pages" content="ericl-FB-id" />
	<!-- iOS -->
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no">
	<!-- Favicon -->
	<link rel="apple-touch-icon" sizes="180x180" href="<?php echo ERICL_THEMEURI; ?>/_images/favicons/apple-touch-icon.png">
	<link rel="icon" type="image/png" href="<?php echo ERICL_THEMEURI; ?>/_images/favicons/favicon-32x32.png" sizes="32x32">
	<link rel="icon" type="image/png" href="<?php echo ERICL_THEMEURI; ?>/_images/favicons/favicon-16x16.png" sizes="16x16">
	<link rel="manifest" href="<?php echo ERICL_THEMEURI; ?>/_images/favicons/manifest.json">
	<link rel="mask-icon" href="<?php echo ERICL_THEMEURI; ?>/_images/favicons/safari-pinned-tab.svg" color="#ed7c34">
	<link rel="shortcut icon" href="<?php echo ERICL_THEMEURI; ?>/_images/favicons/favicon.ico">
	<meta name="msapplication-config" content="<?php echo ERICL_THEMEURI; ?>/_images/favicons/browserconfig.xml">
	<meta name="theme-color" content="#ffffff">
	<!-- Google Fonts -->
	<link href="https://fonts.googleapis.com/css?family=Inconsolata|News+Cycle:400,700|Source+Sans+Pro:400,400i,600,600i|Space+Mono:400,700&subset=latin&effect=anaglyph" rel="stylesheet">
	<!-- AMP -->
	<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
	<!-- Generated -->
	<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=ericl-id"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

<div id="wrap">
	<div class="container">
		<header class="sixteen columns" id="header">
			<?php ericl_display_header(); ?>
		</header><!-- END #header -->
		<div class="sixteen columns" id="menu-select">
			<!-- Mobile SELECT Menu Container -->
		</div><!-- end #menu-select -->
		<?php ericl_nav_menu(); ?>

6) Komprimera bilder med ImageOptim

Slutligen den kanske enklaste men samtidigt mest omfattande åtgärden. Att komprimera alla bilder på rätt sätt. Det är ett repetitivt jobb som kräver stora mängder gott kaffe.

Här använder jag det suveräna lilla hjälpprogrammet ImageOptim. Det går mycket snabbare än att sitta med stora bildredigeringsprogram som Photoshop.

Bilder är den stora boven i laddtidsdramat. Bilder kan stå för så mycket som 80–90 procent av webbsidans storlek. En bra komprimeringsrutin i ditt arbetsflöde kan därför spela stor roll. Toppbilden som är den största på min startsida fick jag ner med hela 91 procent utan synbara förluster. Helt otroligt.

Det är också värt att nämna det här med hur sajten hanterar bilder responsivt. Det kallas source sets och finns sedan version 4.4 inbyggt i Wordpress. Däremot kan sättet sajten jobbar med source sets förfinas och utvecklas. Men det är en annan historia.

Och lycka till med ditt nya PageSpeed-test!

(Det här blogginlägget har lästs 6799 gånger.)