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.

Web Performance: 3 Stages to Success

1,257 views

Published on

A performance optimization presentation for WordCamp Sacramento 2016. Presented by Austin Gil.

This presentation addresses issues in design, development, and project management, where performance is most greatly affected. We look at various opportunities and techniques within each stage that may offer more speed. The subjects range from beginner to advanced with tips and advice that just about anyone can walk away with, and we end with a collection of recommended tools.

This presentation was designed so the slides would be useful even out of context of the presentation. Please enjoy.

Published in: Technology
  • Be the first to comment

Web Performance: 3 Stages to Success

  1. 1. Web Performance: 3 Stages to Success
  2. 2. About Me Austin Gil (@Stegosource) Lead developer at Visceral (thisisvisceral.com) 3 years WordPress experience
  3. 3. Presentation Overview 1. Importance of performance 2. Introduce 3-stage approach 3. In-depth look at individual stages 4. Testing & recap 5. Questions & recommended tools
  4. 4. Performance: Why Do We Care? (Super quick overview)
  5. 5. User Experience Faster loading websites have been proven to keep visitor on the site and interacting longer. Visitors also are more likely to return to fast sites, or avoid slow sites. SEO In 2010, Google decided that page speed would be incorporated in their page ranking algorithm. It is not the most important ranking signal, but worth noting. Money Performance factors directly affect conversion. Speed affects time spent on site management. Lightweight sites are easier data.
  6. 6. Over-cited Example “Amazon found every 100ms of latency cost them 1% in sales.” Amazon earns over $100 BILLION per year ...so 100ms = $1 billion
  7. 7. Great! Let’s Go!
  8. 8. 1. Choose a good host 2. Enable Gzip compression 3. Minimize redirects 4. Combine JS files 5. Defer JS parsing 6. Off-load the assets 7. Remove unused plugins 8. Use image srcset 9. Optimize database 19. Minify HTML 20. Minify CSS 21. Minify Javascript 22. Avoid CSS @import 23. Remove query strings 24. Specify image dimensions 25. Use data URIs 26. Serve scaled images 27. Specify character set 28. Reduce database calls And so on, and so forth... 10. Use image sprites 11. Styles in header 12. Scripts in footer 13. Lazy load images 14. Enable caching 15. Optimize Images 16. Optimize WP_Query 17. Reduce DNS Lookups 18. Combine CSS files COMMANDMENTS OF WEB PERFORMANCE!!! “Thou shalt not take the name of thy lord Performance in vain”
  9. 9. It’s Not That Complicated - Send fewer things - Send smaller things - Send using with better tools
  10. 10. Apply to 3 Stages Item 2 1. Foundation 3. Code 2. Design
  11. 11. Foundation
  12. 12. Big Players - Client “requirements” (see: sliders) - CDN (Cloudflare) - Client uploads - Hosting
  13. 13. Be the Expert Item 2 Designers - Educate & position yourself - Educate your clients (use metrics) - Share examples - Learn to compromise (a.k.a. say “no”)
  14. 14. Show Up Prepared Item 2 Designers - Know your hosts (PHP 7, SSD) - Know your CDN’s (cost & effort) - Know your client (budget & needs)
  15. 15. Make Things Easy Item 2 Designers- Manage uploads - Share useful tools - Provide detailed documentation - Do it for them...with a maintenance plan :) - Image dimensions (Imsanity) - Image quality (EWWW) - Image editors (Pixlr)
  16. 16. Design
  17. 17. Big Players - Amount of content - Multimedia (images, videos, audio) - Complexity
  18. 18. Content & Layouts Item 2 Designers- Grids - Break up content (multi-page, AJAX) - Replace images
  19. 19. Less is More Item 2 Designers - Font families (Google fonts) - Icon libraries (Fontello, Icomoon) - 3rd party elements (ads, maps, social)
  20. 20. 0.3s load time - Motherfuckingwebsite.com
  21. 21. Icon Libraries Compared Item 2 Designers Font Awesome: Font + CSS 270kb Fontello (10): Font + CSS -93% Glyphicons: Font + CSS -60%
  22. 22. Sliders/Carousels Item 2 Designers- Just don’t - There are alternatives - They bloat your page - They don’t convert (about 1% after first slide) - They’re bad for SEO - They’re bad for accessibility - Yoast said so
  23. 23. Images Item 2 Designers- Save for web - Automate - Simpler images (flat design) - Know your file types (jpg, png, svg)
  24. 24. Item 2 Designers Image Optimization Example Original 621 kb Save for web (60%) 275 kb -56% Original Image = 1250 x 877px, complex, many colors Compressed (TinyPNG) 192 kb -69%
  25. 25. The Affect of Image Effects (we can go even smaller)
  26. 26. B & W 131kb -32%
  27. 27. Monochrome 99kb -49%
  28. 28. Gaussian Blur (5px) 77kb -60%
  29. 29. Partial Effects
  30. 30. B & W Mask 167kb -13%
  31. 31. Blur Mask 162kb -16%
  32. 32. Transparent Overlay 135kb -30%
  33. 33. Color Mask 130kb -32%
  34. 34. Be creative!
  35. 35. Code
  36. 36. Big players Item 2 Designers - Caching - How you <img> - Unnecessary resources - Database
  37. 37. Caching Item 2 Designers - Manually… - WP Rocket (Paid) - WP Fastest Cache - W3 Total Cache - The WordPress way
  38. 38. Image Markup Item 2 Designers - Image sizes (Settings > Media) - Use srcset: <img src=“...” srcset=“...” /> - get_post_thumbnail( $post_id ) - wp_get_attachment_image( $img_id ) - Match to major breakpoints - HTML background images (Gist) (Pen)
  39. 39. Lazy Load Images Item 2 Designers- Lazy Load (Lazy Load) - Progressive Lazy Load (Gist) - Load thumbnail overlay (blur with CSS) - Javascript load full size - Fade out thumbnail - Load tiny transparent img - User interaction (scroll, click) - Use JS to replace with actual image - Accessibility...?
  40. 40. Scripts & Styles Item 2 Designers - Minify & concatenate - Conditional load - Plugins (Autoptimize) - Taks runners (Gulp, Grunt, Webpack) - Manually (Shrinker) - What about http/2? - If ( is_font_page() ) { wp_enqueue_script(“...”) } - Plugins (Plugin Organizer, WP Asset Clean Up) - It’s ok to dequeue
  41. 41. CSS Frameworks Compared Item 2 Designers Bootstrap: CSS & JS: 152kb BS Grid Only: CSS: 12kb -92% PureCSS: CSS: 27kb -82% More cool CSS info and tools at CSSPurge.com
  42. 42. Queries Item 2 Designers- Learn WP_Query (Codex) - Reuse same query - wp_reset_query() - Filter in query (post_type, posts_per_page, meta_query, tax_query) - WP_Query optimization tricks - Optimize database (Optimize Database after Deleting Revisions)
  43. 43. Offload Resources Item 2 Designers - Understand what you’re doing - Images (Flickr, ImageEngine) - Videos (YouTube, Vimeo) - Audio (SoundCloud) - Scripts & styles (JSDelivr) (Gist) - Take advantage of services
  44. 44. What About Servers? Item 2 Designers - A look at the modern WordPress server stack - Carl Alexander is AWESOME
  45. 45. Test, Analyze, Repeat
  46. 46. Item 2 Designers - Query Monitor - Too much goodness to write Testing Tools - GT Metrix - Webpage grades and advice - P3 - Compare plugin load times - Bitcatcha - Server speed testing
  47. 47. Item 2 Designers Address Biggest Impactors First - Upgrade your host - Turn on caching - Check your file sizes
  48. 48. Item 2 Designers - Swap out plugins Low Hanging Fruit - Optimization plugins - Remove unnecessary things
  49. 49. [clap_hands]
  50. 50. Designers Image Optimization Tools - TinyPNG or Kraken: Support batch uploads/downloads. Results vary. Image Optimization Plugins (choose one): EWWW: Plug n’ play. Free. Good for agencies with lots of projects. Compress JPEG & PNG images: Better performance. Freemium. Requires account. Imsanity (plugin): Automatically resize super large uploads. Plug n’ play. WP ImageEngine Responsive Image Resizer (plugin): Image hosting service File Minification & Concatenation Tools: Autoptimize (plugin): Easy to use, but be careful, it can break things sometimes. Test it. Gulp, Grunt, or Webpack: Task runners. Add to workflow to automate file optimization (advanced) Shrinker: Online tool. Supports inserted code, upload files, or upload from URL Conditional Load Assets Plugins (choose one): Plugin Organizer: Lot’s of setup work. Good for individuals fine tuning. WP Asset Clean Up: Not as powerful, but much more simple to set up. JSDelivr: Scripts & styles CDN. Also can minify and concatenate. Optimize Database after Deleting Revisions: Database optimization plugin. Supports schedules. Cloudflare: Free CDN

×