https://2017.stlouis.wordcamp.org/session/how-to-battle-google-page-speed-insights-and-win/

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

18. 18
- jasonyingling.me/
pagespeed-resources
Questions &
Resources