Foredraget om Optimalisering og Ytelse, som ble holdt i januar på «WordCamp Norway 2014». Red Performance WordPress-nettside ble mer enn dobbelt så rask.

1. Performance
& Optimisation
!
Erlend Eide
@2xe
!
25.1.14
DRIV DIGITAL – Raskesider.no/wcn2014
Go to raskesider.no/wcn2014 and click the button!

2. DRIV DIGITAL – Raskesider.no/wcn2014

3. • Performance
!
• Working Smarter
!
• Raskesider.no
!
• WordPress Optimisation: Redperformance.no
!
• WordPress Performance Tips
DRIV DIGITAL – Raskesider.no/wcn2014

4. The accomplishment of a given task
measured against preset known standards of
accuracy & completeness, cost and speed.
Performance
DRIV DIGITAL – Raskesider.no/wcn2014

5. What Makes a
WordPress Website Fast?
DRIV DIGITAL – Raskesider.no/wcn2014

6. Web Page Performance
WordPress Site
Server -> Network -> Client
DRIV DIGITAL – Raskesider.no/wcn2014

7. Working Smarter
• Spend less time on repetitive tasks
Server configuration & setup
Server maintenance
WordPress plugins & optimisation
Efficient project deployment
DRIV DIGITAL – Raskesider.no/wcn2014

8. raskesider.no
DRIV DIGITAL – Raskesider.no/wcn2014

9. 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

10. How fast is a website you
would consider to be fast?
DRIV DIGITAL – Raskesider.no/wcn2014

11. • 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

12. Mobile First
&
Responsive Design
DRIV DIGITAL – Raskesider.no/wcn2014

13. case:
Make a fast website even faster
Blog post: Red Performance Wordpress-optimalisering

15. Testing Plan
1. The original website
2. A duplicate, hosted on Raskesider.no
3. Optimisation
4. Optimised version with PageSpeed
DRIV DIGITAL – Raskesider.no/wcn2014

16. Testing Tools
• Pingdom Tools
• GT Metrix
• Google PageSpeed Insights
• Chrome
DRIV DIGITAL – Raskesider.no/wcn2014

17. Step 1: Moving Red Performance
website to Raskesider.no
Original Raskesider Change
Page 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

18. Optimisation of
Redperformance.no
• Clean up plug-in related issues
• Minor HTML tweaks and improvements
• W3C Validation
• Compressing images
DRIV DIGITAL – Raskesider.no/wcn2014

19. Step 2
Optimised version on Raskesider.no
Original Optimised Change
Desktop 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

20. 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

21. 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

22. Final Test Result
Original 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

24. 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

25. Thanks!
Erlend Eide
@2xe