Battling Google PageSpeed Insights
1 like613 views
This document discusses how to improve website speed by optimizing page loading performance. It provides tips for reducing render-blocking scripts, minifying files, prioritizing visible content, lazy loading below the fold content, optimizing images, leveraging browser caching with custom expire headers, reducing server response time, and enabling GZIP compression. Tools mentioned for measuring site speed include Google PageSpeed Insights and GTMetrix.
Battling Google PageSpeed Insights
- 1. BATTLING GOOGLE PAGESPEED INSIGHTSJason Yingling | Red8 Interactive | @jason_yingling | jasonyingling.me
- 2. 2 Happy Users Happy Google Why Site Speed Matters
- 3. HUGE images Too many scripts Too many custom fonts Bad plugins or themes Common Causes of Slow Sites
- 4. Tools For Measuring Site Speed Google PageSpeed Insights GTMetrix
- 5. 5 Chrome - Right Click - Select “Inspect” - Select “Network” tab Safari - Safari > Preferences > Advanced - Check “Show Develop menu in menu bar” - Right Click - Select “Inspect” - Select “Network” tab Inspector
- 6. PageSpeed Insights measures how the page can improve its performance on: -time to above-the-fold load: Elapsed time from the moment a user requests a new page and to the moment the above-the-fold content is rendered by the browser. -time to full page load: Elapsed time from the moment a user requests a new page to the moment the page is fully rendered by the browser. Google PageSpeed Insights https://developers.google.com/speed/pagespeed/insights/
- 7. JavaScript and CSS resources that need to be loaded before a web page can be rendered Eliminate Render Blocking Scripts
- 8. 8 Concatenate too. Plugin: Autoptimize Minify All of the Things!
- 9. So you’re getting a JavaScript error. Exclude scripts from concatenation Oh no! Something Broke!
- 10. 10 Load what appears above the fold first Prioritize Visible Content
- 11. Load below the fold content later Works for images, embeds, and iframe Plugin: BJ Lazy Load Lazy Load Below the Fold
- 12. 12 CSS Needed to load initial view of the site How to get it - Go to https://gist.github.com/ PaulKinlan/6284142 - Copy the script to your clipboard - Navigate to your page - Open the Console tab in the Inspector - Paste the code and press enter - Copy the results Critical CSS
- 13. Remove extra data from images and compress quality Plugin: Imagify (25mb/ month) Fully Free: ImageOptim, FileOptimizer (Windows) Optimize Images
- 14. 14 Store and serve static files to visitors Hosting: WordPress hosts may have their own options Plugins: WP Super Cache Leverage Browser Caching
- 15. Add custom expire headers to your .htaccess file Be careful in there Gist: https://gist.github.com/yingles/ 3bc3c111137c47a2981e3e405a4ce577 Custom Expire Headers
- 16. 16 - Upgrade your PHP - Upgrade your hosting - Determine the cause with Query Monitor Reduce Server Response Time
- 17. - Enable GZIP Compression in the .htaccess - Gist: https://gist.github.com/ yingles/ 3d61caa4910e8919b948be7b5abf5a50 - Avoid landing page redirects A Few For The Road