BATTLING GOOGLE PAGESPEED INSIGHTSJason Yingling | Red8 Interactive | @jason_yingling | jasonyingling.me

2

Happy Users Happy Google

Why Site Speed Matters

HUGE images Too many scripts Too many custom fonts Bad plugins or themes

Common Causes of Slow Sites

Tools For Measuring Site Speed

Google PageSpeed Insights GTMetrix

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

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 Insightshttps://developers.google.com/speed/pagespeed/insights/

JavaScript and CSS resources that need to be loaded before a web page can be rendered

Eliminate Render Blocking Scripts

8

Concatenate too. Plugin: Autoptimize

Minify All of the Things!

So you’re getting a JavaScript error. Exclude scripts from concatenation

Oh no! Something Broke!

10

Load what appears above the fold first

Prioritize Visible Content

Load below the fold content later Works for images, embeds, and iframe Plugin: BJ Lazy Load

Lazy Load Below the Fold

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

Remove extra data from images and compress quality Plugin: Imagify (25mb/month) Fully Free: ImageOptim, FileOptimizer (Windows)

Optimize Images

14

Store and serve static files to visitors Hosting: WordPress hosts may have their own options Plugins: WP Super Cache

Leverage Browser Caching

Add custom expire headers to your .htaccess file Be careful in there Gist: https://gist.github.com/yingles/

3bc3c111137c47a2981e3e405a4ce577

Custom Expire Headers

16

- Upgrade your PHP - Upgrade your hosting - Determine the cause

with Query Monitor

Reduce Server Response Time

- Enable GZIP Compression in the .htaccess - Gist: https://gist.github.com/

yingles/3d61caa4910e8919b948be7b5abf5a50

- Avoid landing page redirects

A Few For The Road

18

- jasonyingling.me/pagespeed-resources

Questions & Resources