Why and How to Optimize for Site Speed
0 likes150 views
The document discusses the importance of optimizing website speed, highlighting statistics such as the average website load time of 22 seconds and the fact that 53% of mobile visitors leave if a page takes longer than 3 seconds to load. It provides strategies for improvement, including optimizing images, utilizing server-side enhancements, and leveraging tools like Google PageSpeed Insights and caching techniques to increase conversions and lower cost per lead. Additionally, it emphasizes the need for businesses to enhance their site's performance as significant resources are spent driving traffic without adequate conversion efforts.
Why and How to Optimize for Site Speed
- 1. WHY AND HOW TO OPTIMIZE FOR SITE SPEED JOHN PETERSON
- 2. @JOHNPETERSONTX | #ROCKSDIGITAL | JUNE 29, 2018 GOOGLE/SOASTA RESEARCH 2017 ▸ Average website takes 22-seconds to fully load. ▸ 53% of mobile site visitors leave a page that takes longer than 3- seconds to load.
- 3. The Google “Speed Update” is coming in July! #RocksDigital #SiteSpeed Tweet it Out! @JOHNPETERSONTX | #ROCKSDIGITAL | JUNE 29, 2018 (2:00 PM)
- 4. WHY?….
- 5. @JOHNPETERSONTX | #ROCKSDIGITAL | JUNE 29, 2018 HYPOTHETICAL EXAMPLE: UNOPTIMIZED ▸ Google AdWords: $10,000 ▸ CPC: $1 ▸ Clicks: 10,000 ▸ Conversion Rate: 3.5% ▸ Leads: 350 ▸ Cost per lead (CPL): $28.57
- 6. @JOHNPETERSONTX | #ROCKSDIGITAL | JUNE 29, 2018 HYPOTHETICAL EXAMPLE: OPTIMIZED ▸ Google AdWords: $10,000 ▸ CPC: $1 ▸ Clicks: 10,000 ▸ Conversion Rate: 4.5% (+1%) ▸ Leads: 450 (+29%) ▸ Cost per lead (CPL): $22.22 ▸ Savings: $2,857.50 per month (450 x $28.57 - 450 x $22.22)
- 7. Marketing’s Dirty Little Secret: For every $92 spent driving traffic to a site, only $1 is spent converting it. #ROCKSDIGITAL Tweet it Out! @JOHNPETERSONTX | #ROCKSDIGITAL | JUNE 29, 2018 (2:10 PM)
- 8. @JOHNPETERSONTX | #ROCKSDIGITAL | JUNE 29, 2018 BREAK FREE FROM 92:1 ▸ Speed up your website! ▸ Improve conversions ▸ Lower CPL (Cost Per Lead) ▸ More phone calls ▸ More form signups ▸ Higher Return on Investment
- 10. @JOHNPETERSONTX | #ROCKSDIGITAL | JUNE 29, 2018 PAGESPEED OVERVIEW ▸ Google PageSpeed Score ▸ Range: 0 to 100 ▸ Goal: Score of 85 or higher ▸ Start: First Contentful Paint (FCP) ▸ Stop: DOMContentLoaded (DCL)
- 11. @JOHNPETERSONTX | #ROCKSDIGITAL | JUNE 29, 2018 PAGESPEED & SITE SPEED TOOLS ▸ Google PageSpeed Insights ▸ GTmetrix ▸ Web Page Test
- 12. HOW?….
- 13. @JOHNPETERSONTX | #ROCKSDIGITAL | JUNE 29, 2018 GOOGLE TAG MANAGER ▸ Manage all… err.. most… of your marketing tags ▸ Audit history of tag usage. ▸ Non-developers can maintain. ▸ Has very powerful native tags. ▸ Firing Triggers!
- 14. @JOHNPETERSONTX | #ROCKSDIGITAL | JUNE 29, 2018 OPTIMIZE IMAGES ▸ Kraken.io service and WordPress.org Plugin ▸ Smush Image Compression and Optimization WordPress.org Plugin ▸ WP Smush Pro WordPress Plugins on WPMUDEV ▸ Photon API ▸ Powers WordPress VIP, WordPress.com & JetPack ▸ ImageOptim for macOS ▸ Favorite Windows app? ▸ Google PageSpeed Insights
- 15. @JOHNPETERSONTX | #ROCKSDIGITAL | JUNE 29, 2018 SCALE IMAGES ▸ Images height and width should match their container. ▸ No: <img height=“200” width=“200” src=“biscuits-2400x2400.jpg” ▸ Yes: <img height=“200” width=“200” src=“biscuits-200x200.jpg” ▸ Extra Credit: Switch image based on resolution and DPI using “srcset” attribute. ▸ <img src=“biscuits-200x200.jpg" srcset="biscuits-200x200.jpg 1x, biscuits-400x400.jpg 2x, biscuits-600x600.jpg 3x"> ▸ WordPress 4.4+ has Responsive Image Support.
- 16. @JOHNPETERSONTX | #ROCKSDIGITAL | JUNE 29, 2018 COMBINE IMAGES USING SPRITES ▸ Super important with HTTP/1.x ▸ Still important with HTTP/2 ▸ Still useful for social icons ▸ Still useful for graphics repeated throughout site. ▸ Works better with simple graphics.
- 17. @JOHNPETERSONTX | #ROCKSDIGITAL | JUNE 29, 2018 ▸ Autoptimize WordPress.org Plugin ▸ Concatenates, minifies and caches ▸ Moves styles to the page head ▸ Moves scripts to the footer ▸ Defers styles and scripts ▸ Minifies HTML
- 18. @JOHNPETERSONTX | #ROCKSDIGITAL | JUNE 29, 2018 ▸ Async Javascript WordPress.org Plugin ▸ Adds an “async” or “defer” attribute to script ▸ “async” > script executes in parallel with main thread ▸ “defer” > script executes at end of main thread ▸ Allows us to prioritize what’s important
- 19. @JOHNPETERSONTX | #ROCKSDIGITAL | JUNE 29, 2018 SERVER SIDE: BE SURE YOUR SITE IS RUNNING HTTP/2 ▸ Tool to test your website: HTTP/2 Test by KeyCDN ▸ It’s as easy as 1-2-3… ▸ 1. Web Hosting Support ▸ 2. Install SSL certificate ▸ 3. Change all of your HTTP links to HTTPS ▸ Server Side Redirects (Preferred) ▸ Really Simple SSL WordPress.org Plugin ▸ SSL Insecure Content Fixer WordPress.org Plugin
- 20. @JOHNPETERSONTX | #ROCKSDIGITAL | JUNE 29, 2018 SERVER SIDE: PHP 7 ▸ Major performance boost ▸ Kinsta.com ▸ 3X transactions per second. ▸ 1/2 the latency.
- 21. @JOHNPETERSONTX | #ROCKSDIGITAL | JUNE 29, 2018 CACHING, CDN & HTTP/2 ▸ Fast Servers ▸ Free Lets Encrypt SSL Certificate ▸ HTTP/2 ▸ Object Caching ▸ CDN or Content Delivery Network ▸ …Staging servers!!! YES!… talk more later tonight ;)
- 22. @JOHNPETERSONTX | #ROCKSDIGITAL | JUNE 29, 2018 IMAGE CDN AND VIDEO CDN ▸ Part of JetPack Plugin for WordPress ▸ Image CDN is free ▸ Includes canonical link… ▸ Lazy Loading Images ▸ Video CDN starting at $9 per month ▸ Also used by WordPress VIP & WordPress.com
- 23. @JOHNPETERSONTX | #ROCKSDIGITAL | JUNE 29, 2018 CHECK YOUR CDN FOR CANONICAL LINK ▸ How can I tell if CDN includes SEO friendly canonical link? $ curl -I https://i0.wp.com/s.ma.tt/files/2012/06/DSC01205.jpg? w=300 HTTP/1.1 200 OK Server: nginx Date: Wed, 20 Jun 2018 01:42:34 GMT Content-Type: image/jpeg ... Link: <http://s.ma.tt/files/2012/06/DSC01205.jpg>; rel="canonical" ...
- 24. @JOHNPETERSONTX | #ROCKSDIGITAL | JUNE 29, 2018 COMPRESS THOSE BULKY PAGES ▸ Website Firewall ▸ HTTP/2 ▸ Caching ▸ Compression ▸ Free Lets Encrypt SSL Certificate (nice… prefer SSL on web server) ▸ Price: $19.98 and up
- 25. @JOHNPETERSONTX | #ROCKSDIGITAL | JUNE 29, 2018 COMPRESS THOSE BULKY PAGES ▸ Website Firewall ▸ HTTP/2 ▸ Caching ▸ Compression ▸ SSL ▸ Minification ▸ Price: $0 and up
- 26. @JOHNPETERSONTX | #ROCKSDIGITAL | JUNE 29, 2018 RESOURCES 1. Find Out How You Stack Up to New Industry Benchmarks for Mobile Page Speed. February 2017. Retrieved 19 June 2018. 2. Using page speed in mobile search ranking. 17 January 2018. Retrieved 24 June 2018. 3. How to Decrease Your Bounce Rate 17 April 2014. Retrieved 19 June 2018. 4. Bounce rate. Retrieved 19 June 2018. 5. 5 Research-Backed Strategies to Increase Your Sales Revenues. 21 July 2016. Retrieved 19 June 2018. 6. 92:1: marketing’s dirty little statistic. 15 June 2011. Retrieved 19 June 2018. 7. Responsive Images in WordPress 4.4. 9 November 2015. Retrieved 19 June 2018. 8. HTTP/2 arrives but sprite sets ain’t no dead. 21 December 2015. Retrieved 19 June 2018. 9. A Beginner’s Guide to Website Speed Optimization. 11 May 2018. Retrieved 29 June 2018. 10.Is Jetpack’s Photon bad for SEO. 27 November 2016. Retrieved 19 June 2018. 11. Photon API. Retrieved 19 June 2018. 12.About PageSpeed Insights. Retrieved 24 June 2018.
- 27. @JOHNPETERSONTX | #ROCKSDIGITAL | JUNE 29, 2018 (2:20 PM) JOHN PETERSON ▸ Director of Technology at @MMIAgency ▸ Organizer @HouWP (Houston WordPress Meetup) ▸ Officer with @SearchHOU ▸ Twitter: @JohnPetersonTX