Improve your website speed - WordCamp Jacksonville

Improve your website speed - WordCamp Jacksonville

Slides from the presentation at WordCamp Jacksonville - 2016.
This talk was for the user track.

We discussed:


  • Why you should care about your website's speed

  • How improving load time impacted well known big companies

  • What affects page speed

  • Several online tools to measure website speed and interpret the results

  • How fast is fast enough?

  • How to compare your website speed to your competitors

  • How to improve it

  • We also discussed new HTTP/2 protocol and how it impacts page load time

9ef3b3ebab0ebef4221c9f6834cfbd7e?s=128

Irina Blumenfeld

April 16, 2016
Tweet

Transcript

  1. 1.

    IMPROVE YOUR WEBSITE SPEED WordCamp Jacksonville - 2016 #WCJAX IRINA

    BLUMENFELD @irinablumenfeld netmagik.com/wordcamp-jacksonville-2016
  2. 4.

    74% of mobile users will abandon a site if it

    takes longer then 5 sec to load http://loadstorm.com/2014/04/infographic-web-performance-impacts-conversion-rates/ #wcjax @irinablumenfeld - netmagik.com
  3. 13.

    WHAT IMPACTS PAGE SPEED? Geographic Location Network Browser Number of

    requests File size #wcjax @irinablumenfeld - netmagik.com
  4. 18.

    HOW DO YOU MEASURE IT? Plugin Load: P3 Plugin Performance

    Profiler #wcjax @irinablumenfeld - netmagik.com
  5. 20.

    GT Metrix
 http://www.gtmetrix.com Pingdom Tools
 http://tools.pingdom.com/fpt/ Google Page Speed Insights


    https://developers.google.com/speed/pagespeed/insights/ WebPageTest.org HOW DO YOU MEASURE IT? #wcjax @irinablumenfeld - netmagik.com
  6. 21.
  7. 30.

    SPEED INDEX <1000 - Golden standard Source - Paul Irish

    - Google Performance Engineer #wcjax @irinablumenfeld - netmagik.com
  8. 46.

    IMPROVE 1. Optimize Images 2. Concatenate/Minify Files 3. Caching 4.

    Gzip 5. CDN 6. Evaluate Fonts 7. Remove Query Strings 8. Remove Bad Requests #wcjax @irinablumenfeld - netmagik.com
  9. 52.

    1. OPTIMIZE IMAGES Before - 762 Kb After - 304

    Kb Lossy Compression #wcjax @irinablumenfeld - netmagik.com
  10. 53.

    1. OPTIMIZE IMAGES COMPRESS - reduce size in Kb
 EWWW

    Image Optimizer - WordPress Plugin
 Tinypng.com - Web Interface
 Compress JPEG & PNG images - WordPress Plugin
 Kraken.io/web-interface - Web Interface
 Kraken Image Optimizer - WordPress Plugin
 ImageOptim - Free Mac app
 SCALE/RESIZE - set max width/height
 Imsanity - WordPress Plugin
 Compress JPEG & PNG images - WordPress Plugin
 Kraken.io - PRO (Web Interface) #wcjax @irinablumenfeld - netmagik.com
  11. 56.

    1. OPTIMIZE IMAGES Re-evaluate all your images Delete unnecessary Convert

    to SVG Use CSS3 instead of images #wcjax @irinablumenfeld - netmagik.com
  12. 57.

    2. REDUCE REQUESTS - CONCATENATE 100 HTTP requests: 20 JS

    files 10 CSS files 1/3 of the page! #wcjax @irinablumenfeld - netmagik.com
  13. 58.

    2. REDUCE REQUESTS - CONCATENATE Minqueue plugin Autoptimize plugin WP

    Rocket plugin Comet Cache (Pro version) - former ZenCache CSS file 1 + CSS file 2 + CSS file 3 + CSS file 4… YourSite.com/WP-Content/Resources/CSS/Combined_1234.css =
  14. 61.

    3. CACHING Plugins W3 Total Cache WP Rocket WP Fastest

    Cache WP Super Cache Comet Cache (formerly ZenCache) Managed Hosting Caching #wcjax @irinablumenfeld - netmagik.com
  15. 64.

    <IfModule deflate_module> <IfModule filter_module> AddOutputFilterByType DEFLATE text/plain text/html AddOutputFilterByType DEFLATE

    text/xml application/xml application/xhtml+xml application/xml-dtd AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml image/svg+xml AddOutputFilterByType DEFLATE text/css text/javascript application/javascript application/x-javascript AddOutputFilterByType DEFLATE font/otf font/opentype application/font-otf application/x-font-otf AddOutputFilterByType DEFLATE font/ttf font/truetype application/font-ttf application/x-font-ttf </IfModule> </IfModule> # BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On RewriteBase /your-site/ RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /your-site/index.php [L] </IfModule> # END WordPress .htaccess file 4. GZIP Add this code - http://bit.ly/gzipcompress After this existing code #wcjax @irinablumenfeld - netmagik.com
  16. 68.

    7. REMOVE QUERY STRINGS Plugin: Remove Query Strings from Static

    Resources insert in functions.php: http://bit.ly/removestrings or #wcjax @irinablumenfeld - netmagik.com
  17. 70.

    LESS IS BETTER Blog posts (<5, use excerpts) Remove unused

    CSS Evaluate third party calls Sliders and full-screen video background #wcjax @irinablumenfeld - netmagik.com
  18. 71.

    Case Study Before Removed image slider - replaced with 1

    image Removed query strings Added Gzip Added Minqueue Plugin to combine CSS and JS Cleaned up CSS After #wcjax @irinablumenfeld - netmagik.com
  19. 74.

    HTTP/1.1 AND HTTP/2 COMPARISON Demo from Cloudflare Load Time: 1.95

    s Load Time: 0.33 s #wcjax @irinablumenfeld - netmagik.com
  20. 75.

    HTTP/1.1 AND HTTP/2 COMPARISON HTTP/1.1 Waterfall Chart HTTP/2 Waterfall Chart

    SAME WEBSITE!!!! #wcjax @irinablumenfeld - netmagik.com
  21. 80.

    IN CONCLUSION Optimize Images Concatenate/Minify Files Caching Gzip CDN Evaluate

    Fonts Remove Query Strings Remove Bad Requests #wcjax @irinablumenfeld - netmagik.com