Why and How to Optimize for Site Speed

WHY AND HOW TO OPTIMIZE
FOR SITE SPEED
JOHN PETERSON

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

The Google “Speed Update” is
coming in July! #RocksDigital
#SiteSpeed
Tweet it Out!
@JOHNPETERSONTX | #ROCKSDIGITAL | JUNE 29, 2018 (2:00 PM)

HYPOTHETICAL EXAMPLE: UNOPTIMIZED
▸ Google AdWords: $10,000
▸ CPC: $1
▸ Clicks: 10,000
▸ Conversion Rate: 3.5%
▸ Leads: 350
▸ Cost per lead (CPL): $28.57

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)

Marketing’s Dirty Little Secret:
For every $92 spent driving
trafﬁc to a site, only $1 is spent
converting it. #ROCKSDIGITAL
Tweet it Out!

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

PAGESPEED OVERVIEW
▸ Google PageSpeed Score
▸ Range: 0 to 100
▸ Goal: Score of 85 or higher
▸ Start: First Contentful Paint (FCP)
▸ Stop: DOMContentLoaded (DCL)

PAGESPEED & SITE SPEED TOOLS
▸ Google PageSpeed Insights
▸ GTmetrix
▸ Web Page Test

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!

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

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.

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.

▸ Autoptimize WordPress.org Plugin
▸ Concatenates, miniﬁes and caches
▸ Moves styles to the page head
▸ Moves scripts to the footer
▸ Defers styles and scripts
▸ Miniﬁes HTML

▸ 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

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 certiﬁcate
▸ 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

SERVER SIDE: PHP 7
▸ Major performance boost
▸ Kinsta.com
▸ 3X transactions per
second.
▸ 1/2 the latency.

CACHING, CDN & HTTP/2
▸ Fast Servers
▸ Free Lets Encrypt SSL Certiﬁcate
▸ HTTP/2
▸ Object Caching
▸ CDN or Content Delivery Network
▸ …Staging servers!!! YES!… talk more later tonight ;)

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

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/ﬁles/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/ﬁles/2012/06/DSC01205.jpg>; rel="canonical" 
...

COMPRESS THOSE BULKY PAGES
▸ Website Firewall
▸ HTTP/2
▸ Caching
▸ Compression
▸ Free Lets Encrypt SSL Certiﬁcate 
(nice… prefer SSL on web server)
▸ Price: $19.98 and up

COMPRESS THOSE BULKY PAGES
▸ Website Firewall
▸ HTTP/2
▸ Caching
▸ Compression
▸ SSL
▸ Miniﬁcation
▸ Price: $0 and up

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.

JOHN PETERSON
▸ Director of Technology at @MMIAgency
▸ Organizer @HouWP 
(Houston WordPress Meetup)
▸ Ofﬁcer with @SearchHOU
▸ Twitter: @JohnPetersonTX

Why and How to Optimize for Site Speed

Why and How to Optimize for Site Speed

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Why and How to Optimize for Site Speed

Ähnlich wie Why and How to Optimize for Site Speed (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Why and How to Optimize for Site Speed