Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Performance 

& Optimisation
!
Erlend Eide 

@2xe
!
25.1.14
DRIV DIGITAL – Raskesider.no/wcn2014
Go to raskesider.no/wcn20...
DRIV DIGITAL – Raskesider.no/wcn2014
• Performance
!
• Working Smarter
!
• Raskesider.no
!
• WordPress Optimisation: Redperformance.no
!
• WordPress Performanc...
The accomplishment of a given task 

measured against preset known standards of
accuracy & completeness, cost and speed.
P...
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 & o...
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 pe...
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 sin...
Mobile First
&
Responsive Design
DRIV DIGITAL – Raskesider.no/wcn2014
case:
Make a fast website even faster
Blog post: Red Performance Wordpress-optimalisering
Testing Plan
1. The original website
2. A duplicate, hosted on Raskesider.no
3. Optimisation
4. Optimised version with Pag...
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 Change
Page size 1200KB 1200KB -
Loading time ...
Optimisation of
Redperformance.no
• Clean up plug-in related issues
• Minor HTML tweaks and improvements
• W3C Validation
...
Step 2 

Optimised version on Raskesider.no
Original Optimised Change
Desktop size 1200KB 452KB -748KB (-62%)
Desktop requ...
Enabling PageSpeed
• CSS & Javascript rewriting & aggregation
• Image recompression and conversion
• HTML minifying
!
Goog...
Pingdom, GT Metrix
& PageSpeed Insights
Original Raskesider Change
Pingdom: Performance grade 97% 86% -11
GT Metrix Page S...
Final Test Result
Original Raskesider Change
Desktop size 1200KB 452KB -748KB (-62%)
Desktop requests 36 - -
Desktop hard ...
WordPress
Performance Tips
• Deploy your sites on a fast webhost
• Use less plugins, try building functionality into the t...
Thanks!
Erlend Eide
@2xe
Wordcamp 2014 Performance Optimisation av Erlend Eide
Wordcamp 2014 Performance Optimisation av Erlend Eide
Upcoming SlideShare
Loading in …5
×

Wordcamp 2014 Performance Optimisation av Erlend Eide

360 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Wordcamp 2014 Performance Optimisation av Erlend Eide

  1. 1. Performance 
 & Optimisation ! Erlend Eide 
 @2xe ! 25.1.14 DRIV DIGITAL – Raskesider.no/wcn2014 Go to raskesider.no/wcn2014 and click the button!
  2. 2. DRIV DIGITAL – Raskesider.no/wcn2014
  3. 3. • Performance ! • Working Smarter ! • Raskesider.no ! • WordPress Optimisation: Redperformance.no ! • WordPress Performance Tips DRIV DIGITAL – Raskesider.no/wcn2014
  4. 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. 5. What Makes a 
 WordPress Website Fast? DRIV DIGITAL – Raskesider.no/wcn2014
  6. 6. Web Page Performance WordPress Site Server -> Network -> Client DRIV DIGITAL – Raskesider.no/wcn2014
  7. 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. 8. raskesider.no DRIV DIGITAL – Raskesider.no/wcn2014
  9. 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. 10. How fast is a website you would consider to be fast? DRIV DIGITAL – Raskesider.no/wcn2014
  11. 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. 12. Mobile First & Responsive Design DRIV DIGITAL – Raskesider.no/wcn2014
  13. 13. case: Make a fast website even faster Blog post: Red Performance Wordpress-optimalisering
  14. 14. 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
  15. 15. Testing Tools • Pingdom Tools • GT Metrix • Google PageSpeed Insights • Chrome DRIV DIGITAL – Raskesider.no/wcn2014
  16. 16. 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
  17. 17. Optimisation of Redperformance.no • Clean up plug-in related issues • Minor HTML tweaks and improvements • W3C Validation • Compressing images DRIV DIGITAL – Raskesider.no/wcn2014
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. Thanks! Erlend Eide @2xe

×