Improving Website's Performance at WordCamp Miami 2016

Improving Website's Performance at WordCamp Miami 2016

Slides from presentation at WordCamp Miami 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’ll go over tips and techniques that can dramatically increase your site performance. We’ll also go over some examples of before and after site optimization.

In detail we’ll cover:

Why speed matters – why should you care about website performance
How you can measure it – a variety of online tools to measure your page load time, page size, and any bottlenecks.
Ways to improve it – expect to learn best practices for optimizing and loading images, using gzip, caching, reducing requests and more.
We’ll also discuss new HTTP/2 protocol and how it can benefit your business.

9ef3b3ebab0ebef4221c9f6834cfbd7e?s=128

Irina Blumenfeld

February 17, 2016
Tweet

Transcript

  1. 1.

    IMPROVE YOUR WEBSITE PERFORMANCE WordCamp Miami - 2016 IRINA BLUMENFELD

    @irinablumenfeld www.netmagik.com/wordcampmiami2016
  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. 45.

    IMPROVE 1. Optimize Images 2. Concatenate/Minify Files 3. Defer/Async JS

    4. Caching 5. Gzip 6. CDN 7. Evaluate Fonts 8. Remove Query Strings 9. Remove Bad Requests 10. Prefetch/Prerender
  10. 50.

    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)
  11. 54.

    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 =
  12. 56.

    3. DEFER / ASYNC JAVASCRIPT Render-Blocking JavaScript <script type=“tex/javascript” defer

    async src=“//yourwebsite.com/wp-content/file.js”></script>
  13. 58.

    4. CACHING Plugins W3 Total Cache Zen Cache WP Rocket

    WP Super Cache Managed Hosting Caching
  14. 61.

    <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 5. GZIP Add this code - http://bit.ly/gzipcompress After this existing code
  15. 65.

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

    Resources insert in functions.php: http://bit.ly/removestrings or
  16. 67.

    10. PREFETCH OR PRERENDER Plugin: Per page add to head

    <link rel=“dns-prefetch” href=“hostname_to_resolve.com”> <link rel=“prefetch” href=“/images/big.jpeg”> <link rel=“prerender” href=“//yoursite.com/pricing-page”> Pre-resolve DNS hostnames for assets later in the page Place asset in cache Load entire page in the background - Resource Heavy!
  17. 68.

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

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

    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. 78.

    IN CONCLUSION Optimize Images Concatenate/Minify Files Defer/Async JS Caching Gzip

    CDN Evaluate Fonts Remove Query Strings Remove Bad Requests Prefetch/Prerender