Speed up your website and improve performance - WordCamp Orlando 2016

Speed up your website and improve performance - WordCamp Orlando 2016

Slides from presentation at WordCamp Orlando 2016.

Nobody likes waiting for a slow site. You have less than 5 seconds to engage your customer before they leave. With users increasingly on the go and having mobile connections of varying speeds, page-delivery performance has become more critical.

In this presentation we went over tips and techniques that will dramatically increase your page load times.

In detail we covered: why speed is important, how you can measure it, how you can compare your page speed to your competitors, and ways to improve it.

We also discussed HTTP/2 protocol and how it can benefit website performance.

9ef3b3ebab0ebef4221c9f6834cfbd7e?s=128

Irina Blumenfeld

September 26, 2016
Tweet

Transcript

  1. 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/ #wcorl @irinablumenfeld - netmagik.com
  2. 12.

    GOLDEN RULE 80% of the end-user time is spent on

    the front end. https://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule #wcorl @irinablumenfeld - netmagik.com
  3. 13.

    WHAT IMPACTS PAGE SPEED? Geographic Location Network Browser Number of

    requests File size #wcorl @irinablumenfeld - netmagik.com
  4. 15.
  5. 16.

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

    Profiler #wcorl @irinablumenfeld - netmagik.com
  6. 18.

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


    https://developers.google.com/speed/pagespeed/insights WebPageTest.org HOW DO YOU MEASURE IT? #wcorl @irinablumenfeld - netmagik.com
  7. 19.
  8. 27.

    SPEED INDEX <1000 - Golden standard Source - Paul Irish

    - Google Performance Engineer #wcorl @irinablumenfeld - netmagik.com
  9. 38.

    IMPROVE 1. Optimize Images 2. Caching 3. Gzip 4. Concatenate

    / Minify 5. Evaluate Fonts 6. CDN 7. Remove Bad Requests #wcorl @irinablumenfeld - netmagik.com
  10. 45.

    1. OPTIMIZE IMAGES Before - 762 Kb After - 304

    Kb Lossy Compression #wcorl @irinablumenfeld - netmagik.com
  11. 46.

    1. OPTIMIZE IMAGES COMPRESS - reduce size in Kb
 EWWW

    Image Optimizer - WordPress Plugin
 Compress JPEG & PNG images - WordPress Plugin
 Kraken.io - Web Interface and WP 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) #wcorl @irinablumenfeld - netmagik.com
  12. 49.

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

    to SVG Use CSS3 instead of images #wcorl @irinablumenfeld - netmagik.com
  13. 51.

    2. CACHING Plugins: WP Rocket (premium) WP Super Cache Comet

    Cache (formerly ZenCache) WP Fastest Cache Managed Hosting Caching #wcorl @irinablumenfeld - netmagik.com
  14. 54.

    <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 3. GZIP Add this code - http://bit.ly/gzipcompress After this existing code #wcorl @irinablumenfeld - netmagik.com
  15. 55.

    4. CONCATENATE / MINIFY Autoptimize plugin WP Rocket WP Fastest

    Cache CSS file 1 + CSS file 2 + CSS file 3 + CSS file 4… YourSite.com/WP-Content/Resources/CSS/Combined_1234.css = #wcorl @irinablumenfeld - netmagik.com
  16. 60.

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

    CSS Evaluate third party calls Sliders and full-screen video background #wcorl @irinablumenfeld - netmagik.com
  17. 63.

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

    s Load Time: 0.33 s #wcorl @irinablumenfeld - netmagik.com
  18. 64.

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

    SAME WEBSITE!!!! #wcorl @irinablumenfeld - netmagik.com
  19. 68.

    IN CONCLUSION Optimize Images Caching Gzip Concatenate / Minify Evaluate

    Fonts CDN Remove Bad Requests #wcorl @irinablumenfeld - netmagik.com