Optimising for Performance
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Optimising for Performance

  • 194 views
Uploaded on

Getting full score on Google PageSpeed, Pingdom and GTMetrix

Getting full score on Google PageSpeed, Pingdom and GTMetrix

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
194
On Slideshare
194
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
4
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. GETTING FULL SCORE ON GOOGLE PA G E S P E E D , P I N G D O M A N D G T M E T R I X OPTIMISING FOR PERFORMANCE
  • 2. THOMAS BENSMANN LEAD DEVELOPER AND SOLUTIONS ARCHITECT M E T R O N E T A S - M E T R O N E T. N O
  • 3. WHY SPEED M AT T E R S ? • More returning visitors • More page views
 
 
 
 

  • 4. First impressions matter
  • 5. WHY SPEED M AT T E R S ? • More returning visitors • More page views • Google cares (SEO) • When you know something
 could be better…
  • 6. “Fast is better than slow.”
  • 7. SERVER TECH TERMINOLOGY
  • 8. TERMINOLOGY • Nginx - known for speed
 and resource usage • Varnish - used for caching and/or load balancing • Apache - very common • Google PageSpeed mod - Google’s module for Apache and Nginx
  • 9. “I’ve hugged a lot of servers in my life, and believe me, they do not hug you back. They hate you.” – AMAZON CTO, WERNER VOGELS
  • 10. SAVING BANDWIDTH COMPRESSION
  • 11. COMPRESSION • Save bandwidth • No difference in content • Gzip • mod-deflate (apache)
  • 12. WHO DOESN’T LIKE WAITING IN LINE? RENDER BLOCKING
  • 13. RENDER BLOCKING • Scripts • Styles • The page has to wait
 • Load CSS before JS • Load JS in the footer • Load JS async
  • 14. KEEP IT SHORT M I N I F Y…
  • 15. MINIFY • CSS, JS and HTML • Reduced file sizes • YUI Compressor • Google PageSpeed mod
 for Apache and Nginx
  • 16. OPTIMISE IMAGES • ImageOptim (on your mac) • Atomised with Grunt or Gulp • Server-side optimisers (jpegtran, optipng/pngout) • WordPress plugin (EWWW image optimizer) • Google PageSpeed mod
  • 17. Lazy loading GETTING RESOURCES WHEN NEEDED IF NEEDED PLUGIN: BJ LAZY LOAD
  • 18. W H Y M A K E I T D I F F I C U LT F O R O U R S E L F ? REDUCE REQUESTS
  • 19. REDUCE REQUESTS • Why keep asking the server? • Combine files • Inline small files • Reduce request P L U G I N : M I N I T B Y K A S PA R S D
  • 20. Keep your content in stock
  • 21. CACHING PLUGINS • W3 Total Cache • Batcache • WP Super Cache • Quick Cache
  • 22. CACHING ENGINES • APC (PHP < 5.5) • Memcache • Redis
  • 23. CACHING SOLUTIONS • Varnish • Nginx • Cloudflare (external)
  • 24. CLIENT SIDE CACHING • Setting HTTP headers • expires • cache-control/pragma • Version numbers in name x script.js x script.js?v=1.2 ✓ script-1.2.js
  • 25. M O D _ PA G E S P E E D • Caches • Combines and/or inlines files • Minifies JS, CSS and HTML • Optimizes images (metadata, compression, dimensions) • Lazy loading images
  • 26. A F R I E N D LY WARNING
  • 27. T E S T I N G A N D E V A L U AT I O N • Google Pagespeed Insights • Pingdom Website Speed Test • GTMetrix ! • Most importantly, the people who visit the site
  • 28. CHECKING OUT R E S U LT S
  • 29. CHECKING OUT R E S U LT S
  • 30. CHECKING OUT R E S U LT S
  • 31. GOALS • Full score should not be a goal • Use it as guidelines • Don’t follow it blindly • Know why
  • 32. THAT’S ALL I HAD THANK YOU FOR YOUR TIME – ANY QUESTIONS?