Wordcamp 2014 Performance & Optimisation
-
Upload
erlendeide -
Category
Internet
-
view
31 -
download
0
Transcript of Wordcamp 2014 Performance & Optimisation
![Page 1: Wordcamp 2014 Performance & Optimisation](https://reader033.fdocuments.in/reader033/viewer/2022052907/558eca651a28ab293c8b4625/html5/thumbnails/1.jpg)
Performance & Optimisation
!Erlend Eide
@2xe !
25.1.14
DRIV DIGITAL – Raskesider.no/wcn2014
Go to raskesider.no/wcn2014 and click the button!
![Page 3: Wordcamp 2014 Performance & Optimisation](https://reader033.fdocuments.in/reader033/viewer/2022052907/558eca651a28ab293c8b4625/html5/thumbnails/3.jpg)
• Performance !
• Working Smarter !
• Raskesider.no !• WordPress Optimisation: Redperformance.no
!• WordPress Performance Tips
DRIV DIGITAL – Raskesider.no/wcn2014
![Page 4: Wordcamp 2014 Performance & Optimisation](https://reader033.fdocuments.in/reader033/viewer/2022052907/558eca651a28ab293c8b4625/html5/thumbnails/4.jpg)
The accomplishment of a given task measured against preset known standards of accuracy & completeness, cost and speed.
Performance
DRIV DIGITAL – Raskesider.no/wcn2014
![Page 5: Wordcamp 2014 Performance & Optimisation](https://reader033.fdocuments.in/reader033/viewer/2022052907/558eca651a28ab293c8b4625/html5/thumbnails/5.jpg)
What Makes a WordPress Website Fast?
DRIV DIGITAL – Raskesider.no/wcn2014
![Page 6: Wordcamp 2014 Performance & Optimisation](https://reader033.fdocuments.in/reader033/viewer/2022052907/558eca651a28ab293c8b4625/html5/thumbnails/6.jpg)
Web Page Performance
WordPress Site
Server -> Network -> Client
DRIV DIGITAL – Raskesider.no/wcn2014
![Page 7: Wordcamp 2014 Performance & Optimisation](https://reader033.fdocuments.in/reader033/viewer/2022052907/558eca651a28ab293c8b4625/html5/thumbnails/7.jpg)
Working Smarter• Spend less time on repetitive tasks
Server configuration & setup
Server maintenance
WordPress plugins & optimisation
Efficient project deployment
DRIV DIGITAL – Raskesider.no/wcn2014
![Page 8: Wordcamp 2014 Performance & Optimisation](https://reader033.fdocuments.in/reader033/viewer/2022052907/558eca651a28ab293c8b4625/html5/thumbnails/8.jpg)
raskesider.no
DRIV DIGITAL – Raskesider.no/wcn2014
![Page 9: Wordcamp 2014 Performance & Optimisation](https://reader033.fdocuments.in/reader033/viewer/2022052907/558eca651a28ab293c8b4625/html5/thumbnails/9.jpg)
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
![Page 10: Wordcamp 2014 Performance & Optimisation](https://reader033.fdocuments.in/reader033/viewer/2022052907/558eca651a28ab293c8b4625/html5/thumbnails/10.jpg)
How fast is a website you would consider to be fast?
DRIV DIGITAL – Raskesider.no/wcn2014
![Page 11: Wordcamp 2014 Performance & Optimisation](https://reader033.fdocuments.in/reader033/viewer/2022052907/558eca651a28ab293c8b4625/html5/thumbnails/11.jpg)
• 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
![Page 13: Wordcamp 2014 Performance & Optimisation](https://reader033.fdocuments.in/reader033/viewer/2022052907/558eca651a28ab293c8b4625/html5/thumbnails/13.jpg)
case: Make a fast website even faster
Blog post: Red Performance Wordpress-optimalisering
![Page 14: Wordcamp 2014 Performance & Optimisation](https://reader033.fdocuments.in/reader033/viewer/2022052907/558eca651a28ab293c8b4625/html5/thumbnails/14.jpg)
![Page 15: Wordcamp 2014 Performance & Optimisation](https://reader033.fdocuments.in/reader033/viewer/2022052907/558eca651a28ab293c8b4625/html5/thumbnails/15.jpg)
Testing Plan1. The original website
2. A duplicate, hosted on Raskesider.no
3. Optimisation
4. Optimised version with PageSpeed
DRIV DIGITAL – Raskesider.no/wcn2014
![Page 16: Wordcamp 2014 Performance & Optimisation](https://reader033.fdocuments.in/reader033/viewer/2022052907/558eca651a28ab293c8b4625/html5/thumbnails/16.jpg)
Testing Tools• Pingdom Tools
• GT Metrix
• Google PageSpeed Insights
• Chrome
DRIV DIGITAL – Raskesider.no/wcn2014
![Page 17: Wordcamp 2014 Performance & Optimisation](https://reader033.fdocuments.in/reader033/viewer/2022052907/558eca651a28ab293c8b4625/html5/thumbnails/17.jpg)
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
![Page 18: Wordcamp 2014 Performance & Optimisation](https://reader033.fdocuments.in/reader033/viewer/2022052907/558eca651a28ab293c8b4625/html5/thumbnails/18.jpg)
Optimisation of Redperformance.no
• Clean up plug-in related issues
• Minor HTML tweaks and improvements
• W3C Validation
• Compressing images
DRIV DIGITAL – Raskesider.no/wcn2014
![Page 19: Wordcamp 2014 Performance & Optimisation](https://reader033.fdocuments.in/reader033/viewer/2022052907/558eca651a28ab293c8b4625/html5/thumbnails/19.jpg)
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
![Page 20: Wordcamp 2014 Performance & Optimisation](https://reader033.fdocuments.in/reader033/viewer/2022052907/558eca651a28ab293c8b4625/html5/thumbnails/20.jpg)
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
![Page 21: Wordcamp 2014 Performance & Optimisation](https://reader033.fdocuments.in/reader033/viewer/2022052907/558eca651a28ab293c8b4625/html5/thumbnails/21.jpg)
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
![Page 22: Wordcamp 2014 Performance & Optimisation](https://reader033.fdocuments.in/reader033/viewer/2022052907/558eca651a28ab293c8b4625/html5/thumbnails/22.jpg)
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
![Page 23: Wordcamp 2014 Performance & Optimisation](https://reader033.fdocuments.in/reader033/viewer/2022052907/558eca651a28ab293c8b4625/html5/thumbnails/23.jpg)
![Page 24: Wordcamp 2014 Performance & Optimisation](https://reader033.fdocuments.in/reader033/viewer/2022052907/558eca651a28ab293c8b4625/html5/thumbnails/24.jpg)
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
![Page 25: Wordcamp 2014 Performance & Optimisation](https://reader033.fdocuments.in/reader033/viewer/2022052907/558eca651a28ab293c8b4625/html5/thumbnails/25.jpg)
Thanks!Erlend Eide
@2xe