Wordcamp 2014 Performance & Optimisation

Performance & Optimisation

!Erlend Eide

@2xe !

25.1.14

DRIV DIGITAL – Raskesider.no/wcn2014

Go to raskesider.no/wcn2014 and click the button!

DRIV DIGITAL – Raskesider.no/wcn2014

• Performance !

• Working Smarter !

• Raskesider.no !• WordPress Optimisation: Redperformance.no

!• WordPress Performance Tips

DRIV DIGITAL – Raskesider.no/wcn2014

The accomplishment of a given task measured against preset known standards of accuracy & completeness, cost and speed.

Performance

DRIV DIGITAL – Raskesider.no/wcn2014

What Makes a WordPress Website Fast?

DRIV DIGITAL – Raskesider.no/wcn2014

Web Page Performance

WordPress Site

Server -> Network -> Client

DRIV DIGITAL – Raskesider.no/wcn2014

Working Smarter• Spend less time on repetitive tasks

Server configuration & setup

Server maintenance

WordPress plugins & optimisation

Efficient project deployment

DRIV DIGITAL – Raskesider.no/wcn2014

raskesider.no

DRIV DIGITAL – Raskesider.no/wcn2014

Raskesider.no• Servers in Norway on a fast network

• High performance hardware

• Driv OS tailored for security and web performance

• Application stack

nginx - front, static content, SPDY, gzip

Apache - application server, PageSpeed

DRIV DIGITAL – Raskesider.no/wcn2014

How fast is a website you would consider to be fast?

DRIV DIGITAL – Raskesider.no/wcn2014

• 85% of mobile users expect pages to load as fast or faster than they load on the desktop.

• Websites load 26% slower since the spring 2012

• Average web page size up 151% in just three years.December 2013: 1575KB, three years back 651KB 50% images

• Median load time among leading European ecommerce sites was 7.04 seconds.

Statistikk fra radware: goo.gl/PXGjSO

DRIV DIGITAL – Raskesider.no/wcn2014

Mobile First &

Responsive Design

DRIV DIGITAL – Raskesider.no/wcn2014

case: Make a fast website even faster

Blog post: Red Performance Wordpress-optimalisering

Testing Plan1. The original website

2. A duplicate, hosted on Raskesider.no

3. Optimisation

4. Optimised version with PageSpeed

DRIV DIGITAL – Raskesider.no/wcn2014

Testing Tools• Pingdom Tools

• GT Metrix

• Google PageSpeed Insights

• Chrome

DRIV DIGITAL – Raskesider.no/wcn2014

Step 1: Moving Red Performance website to Raskesider.no

Original Raskesider ChangePage size 1200KB 1200KB -Loading time (hard reload) 460ms 320ms -140ms (30%)Loading time (logo click) 345ms 165ms -180ms (52%)Subpage 1 412ms 245ms -167ms (40%)Subpage 2 408ms 253ms -155ms (38%)

DRIV DIGITAL – Raskesider.no/wcn2014

Optimisation of Redperformance.no

• Clean up plug-in related issues

• Minor HTML tweaks and improvements

• W3C Validation

• Compressing images

DRIV DIGITAL – Raskesider.no/wcn2014

Step 2 Optimised version on Raskesider.no

Original Optimised ChangeDesktop size 1200KB 452KB -748KB (-62%)Desktop requests 36 43 +7 (+20%)Desktop front hard reload 460ms 255ms -205ms (-45%)Desktop front click 345ms 150ms -195ms (-57%)Mobile size 840KB 423KB -417KB (-50%)Mobile loading time 330ms 220ms -110ms (-33%)Pingdom Perf. Grade 97 80 -17

DRIV DIGITAL – Raskesider.no/wcn2014

Enabling PageSpeed• CSS & Javascript rewriting & aggregation

• Image recompression and conversion

• HTML minifying

!

Google PageSpeed Module, 60+ filters, more info: https://developers.google.com/speed/pagespeed/module/filters

DRIV DIGITAL – Raskesider.no/wcn2014

Pingdom, GT Metrix & PageSpeed Insights

Original Raskesider Change

Pingdom: Performance grade 97% 86% -11

GT Metrix Page Speed 91% 84% -7

GT Metrix YSlow 92% 91% -1

PageSpeed Insights Desktop 93% 93% -

PageSpeed Insights Mobile 83% 79% -4

DRIV DIGITAL – Raskesider.no/wcn2014

Final Test ResultOriginal Raskesider Change

Desktop size 1200KB 452KB -748KB (-62%)

Desktop requests 36 - -

Desktop hard reload 460ms 150ms -310ms (-67%)

Desktop logo click 345ms 90ms -255ms (-74%)

Mobile size 840KB 419KB -421KB (-50%)

Mobile requests 32 34 +2

Mobile page load time 330ms 210ms -120ms (-36%)

DRIV DIGITAL – Raskesider.no/wcn2014

WordPress Performance Tips

• Deploy your sites on a fast webhost

• Use less plugins, try building functionality into the theme.

• Always compress and pay close attention to images.

• Make W3C validation part of the end of your workflow, it does matter.

• Test your websites on lossy connections, thats reality for most visitors. (ex. Network Link Conditioner)

• For sites with many resources, use SPDY (https://)

DRIV DIGITAL – Raskesider.no/wcn2014

Thanks!Erlend Eide

@2xe