Improve your website performance

Improve your website performance

Why speed matters, ways to measure it, and best practices to follow to optimize your website for best performance

9ef3b3ebab0ebef4221c9f6834cfbd7e?s=128

Irina Blumenfeld

January 26, 2016
Tweet

Transcript

  1. 1.

    IMPROVE YOUR WEBSITE PERFORMANCE WordPress Meetup - 01/26/16 IRINA BLUMENFELD

    www.twitter.com/irinablumenfeld www.netmagik.com/performance
  2. 3.

    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/
  3. 8.
  4. 14.
  5. 15.
  6. 16.
  7. 19.

    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?
  8. 20.
  9. 34.
  10. 40.

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

    Gzip 5. CDN 6. Reduce Bad Requests 7. Evaluate Fonts 8. Remove Query Strings
  11. 45.

    1. OPTIMIZE IMAGES COMPRESS - reduce size in Kb
 EWWW

    Image Optimizer - Free WordPress Plugin
 Compress JPEG & PNG images - Free WordPress Plugin
 Kraken.io - online tool and paid WP Plugin
 ImageOptim - Free Mac app
 SCALE/RESIZE - set max width/height
 Imsanity - Free WordPress Plugin
 Compress JPEG & PNG images - Free WordPress Plugin
 Kraken.io - Web Interface PRO
  12. 51.

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

    files 10 CSS files 1/3 of the page!
  13. 52.

    2. REDUCE REQUESTS - CONCATENATE Minqueue plugin Autoptimize plugin ZenCache

    (Pro version) CSS file 1 + CSS file 2 + CSS file 3 + CSS file 4… YourSite.com/WP-Content/Resources/CSS/Combined_1234.css =
  14. 55.
  15. 58.

    <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
  16. 63.

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

    Resources insert in functions.php: http://bit.ly/removestrings or
  17. 64.

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

    CSS Evaluate third party calls Sliders and full-screen video background
  18. 65.

    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
  19. 74.

    IN CONCLUSION 1. Optimize Images 2. Reduce Requests 3. Add

    Gzip 4. Caching 5. Use CDN 6. Reduce Bad Requests 7. Evaluate Fonts 8. Remove Query Strings