wordcamp 2014 performance & optimisation
TRANSCRIPT
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
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