Optimizing Your WordPress Site: Why speed matters, and how to get there
-
Upload
stephen-bell -
Category
Small Business & Entrepreneurship
-
view
712 -
download
0
Transcript of Optimizing Your WordPress Site: Why speed matters, and how to get there
![Page 1: Optimizing Your WordPress Site: Why speed matters, and how to get there](https://reader031.fdocuments.us/reader031/viewer/2022030309/58f279001a28abb02a8b45e1/html5/thumbnails/1.jpg)
Optimizing Your WordPress SiteWhy speed matters, and how to get there
Stephen BellSteed Interactive
![Page 2: Optimizing Your WordPress Site: Why speed matters, and how to get there](https://reader031.fdocuments.us/reader031/viewer/2022030309/58f279001a28abb02a8b45e1/html5/thumbnails/2.jpg)
Stephen Bell
• Worked in web marketing at Oklahoma Christian University for 10 years
• Started design and web development company with my wife this year
steedokc.com
About Me
![Page 3: Optimizing Your WordPress Site: Why speed matters, and how to get there](https://reader031.fdocuments.us/reader031/viewer/2022030309/58f279001a28abb02a8b45e1/html5/thumbnails/3.jpg)
Why Bother Optimizing?
![Page 4: Optimizing Your WordPress Site: Why speed matters, and how to get there](https://reader031.fdocuments.us/reader031/viewer/2022030309/58f279001a28abb02a8b45e1/html5/thumbnails/4.jpg)
https://blog.kissmetrics.com/loading-time/ (2011)
Keep People on Your Site
![Page 5: Optimizing Your WordPress Site: Why speed matters, and how to get there](https://reader031.fdocuments.us/reader031/viewer/2022030309/58f279001a28abb02a8b45e1/html5/thumbnails/5.jpg)
https://blog.kissmetrics.com/loading-time/ (2011)
“A one-second delay in page response can
result in a 7% reduction in
conversions."
More Interactions & Purchases
![Page 6: Optimizing Your WordPress Site: Why speed matters, and how to get there](https://reader031.fdocuments.us/reader031/viewer/2022030309/58f279001a28abb02a8b45e1/html5/thumbnails/6.jpg)
https://blog.kissmetrics.com/loading-time/ (2011)
“47% of consumers expect a web page to load in 2 seconds or
less.”
Visitor Expectations
![Page 7: Optimizing Your WordPress Site: Why speed matters, and how to get there](https://reader031.fdocuments.us/reader031/viewer/2022030309/58f279001a28abb02a8b45e1/html5/thumbnails/7.jpg)
https://moz.com/learn/seo/page-speed
“Google has indicated site speed is one of the signals used by its algorithm to rank pages.”
Google Search Results Ranking
“A slow page speed means that search engines can crawl fewer pages using their allocated crawl budget.”
![Page 8: Optimizing Your WordPress Site: Why speed matters, and how to get there](https://reader031.fdocuments.us/reader031/viewer/2022030309/58f279001a28abb02a8b45e1/html5/thumbnails/8.jpg)
How Fast is My Site?
(Aim for less than 3 seconds)
![Page 9: Optimizing Your WordPress Site: Why speed matters, and how to get there](https://reader031.fdocuments.us/reader031/viewer/2022030309/58f279001a28abb02a8b45e1/html5/thumbnails/9.jpg)
tools.pingdom.com - Select a US city under “Settings”
Note: This only shows you your site speed on a very fast connection. To test different speeds on your own computer, learn about
Chrome Developer Tools.
![Page 10: Optimizing Your WordPress Site: Why speed matters, and how to get there](https://reader031.fdocuments.us/reader031/viewer/2022030309/58f279001a28abb02a8b45e1/html5/thumbnails/10.jpg)
1. Load smaller things2. Load fewer things3. Load closer things4. Cache things (save completed pieces for later)
5. Load the important things first6. Get a faster server
Ways of Improving Site Speed
![Page 11: Optimizing Your WordPress Site: Why speed matters, and how to get there](https://reader031.fdocuments.us/reader031/viewer/2022030309/58f279001a28abb02a8b45e1/html5/thumbnails/11.jpg)
• JPG - Photos, scanned drawings or art• PNG - Images with solid colors, simple
gradients• SVG - Logos saved as paths instead of pixels• GIF - Funny animated things
When in doubt, use JPG!
Load smaller thingsUse the Right Image File Type
![Page 12: Optimizing Your WordPress Site: Why speed matters, and how to get there](https://reader031.fdocuments.us/reader031/viewer/2022030309/58f279001a28abb02a8b45e1/html5/thumbnails/12.jpg)
PNG664 KB
Load smaller thingsUse the Right Image File Type
JPG (80% quality)157 KB
Don’t use PNG for photos! They take up 4X as much space!
![Page 13: Optimizing Your WordPress Site: Why speed matters, and how to get there](https://reader031.fdocuments.us/reader031/viewer/2022030309/58f279001a28abb02a8b45e1/html5/thumbnails/13.jpg)
• Get a WordPress plugin that recompresses images as they’re uploaded (40-50% off of each image, with no visible loss of quality)
• “Compress JPEG & PNG images” (TinyPNG) Free for up to 500 images/monthhttps://wordpress.org/plugins/tiny-compress-images/
• “WP Smush”• Free, with premium version available
https://wordpress.org/plugins/wp-smushit/
Load smaller thingsRecompress Images with WP Plugins
![Page 14: Optimizing Your WordPress Site: Why speed matters, and how to get there](https://reader031.fdocuments.us/reader031/viewer/2022030309/58f279001a28abb02a8b45e1/html5/thumbnails/14.jpg)
Load smaller things
Responsive Images
2560px wide 640px wide
• Give people the correct image size for the browser/device they’re using
![Page 15: Optimizing Your WordPress Site: Why speed matters, and how to get there](https://reader031.fdocuments.us/reader031/viewer/2022030309/58f279001a28abb02a8b45e1/html5/thumbnails/15.jpg)
Load smaller things
Responsive Images
<img src="image.jpg" width="800" height="600"srcset="image-400x300.jpg 400w, image-600x450.jpg 600w, image.jpg 1000w"sizes="(min-width:1024px) 33.3vw, (min-width:640px) 50vw, 100vw">
• srcset - These are the images that are available, and their sizes.
• sizes - These are the rules that tell the browser which image to pick.
• Code example:
Steed site (portfolio)
![Page 16: Optimizing Your WordPress Site: Why speed matters, and how to get there](https://reader031.fdocuments.us/reader031/viewer/2022030309/58f279001a28abb02a8b45e1/html5/thumbnails/16.jpg)
Load smaller things
Responsive Images• RICG Responsive Images plugin
https://wordpress.org/plugins/ricg-responsive-images/• “Bringing automatic default responsive images to
WordPress.”• Automatically adds simple “srcset” and “sizes” to
images in your posts.• Keeps images in your posts from being higher
resolution than your browser width.• You still need to add new image thumbnail sizes to
WordPress to make sure they’re available.• If you’re making templates yourself, plugin gives
you functions, lets you write your own “sizes” for better fitting images.
![Page 17: Optimizing Your WordPress Site: Why speed matters, and how to get there](https://reader031.fdocuments.us/reader031/viewer/2022030309/58f279001a28abb02a8b45e1/html5/thumbnails/17.jpg)
Load smaller things
Turn on GZIP• Similar to “zipping” a file, the server
compresses text files as they’re sent out.• Can be turned on by editing settings files, or
done with a plugin like W3 Total Cache.http://softstribe.com/wordpress/enable-gzip-compression-in-wordpress
![Page 18: Optimizing Your WordPress Site: Why speed matters, and how to get there](https://reader031.fdocuments.us/reader031/viewer/2022030309/58f279001a28abb02a8b45e1/html5/thumbnails/18.jpg)
Load fewer thingsMinify and Combine CSS & JavaScript
• Every extra file you ask the server for makes things just a little bit slower
• Whitespace (extra spaces, tabs, line breaks) and comments aren’t useful to visitor, make the page load slower
• “Minifying” removes unnecessary code and combines files
![Page 19: Optimizing Your WordPress Site: Why speed matters, and how to get there](https://reader031.fdocuments.us/reader031/viewer/2022030309/58f279001a28abb02a8b45e1/html5/thumbnails/19.jpg)
Load fewer thingsMinify and Combine CSS & JavaScript
• WordPress Plugin: “Autoptimize”https://wordpress.org/plugins/autoptimize/ • Minifies CSS, JS and HTML• Combines CSS files together, JS files
together• Typically, just install it, check boxes, and it
works
![Page 20: Optimizing Your WordPress Site: Why speed matters, and how to get there](https://reader031.fdocuments.us/reader031/viewer/2022030309/58f279001a28abb02a8b45e1/html5/thumbnails/20.jpg)
Load fewer things
Get Rid of Things You Don’t Need• Prioritize what you need and don’t need on
your pages• Social sharing buttons?• Big web fonts?• Video embeds? • Unnecessary tracking code?• Complex advertising network code?
![Page 21: Optimizing Your WordPress Site: Why speed matters, and how to get there](https://reader031.fdocuments.us/reader031/viewer/2022030309/58f279001a28abb02a8b45e1/html5/thumbnails/21.jpg)
Load closer things
Content Delivery Network
• If your visitor is in a different part of the world than your web hosting, it takes longer to get to them.
• A Content Delivery Network (CDN) saves your files on different computers around the world to speed things up.
![Page 22: Optimizing Your WordPress Site: Why speed matters, and how to get there](https://reader031.fdocuments.us/reader031/viewer/2022030309/58f279001a28abb02a8b45e1/html5/thumbnails/22.jpg)
Load closer things
Content Delivery Network
• Free service that sits between your domain name server and your hosting server
• Automatically saves all your images, static pages to a CDN
• Bonus: A bit of extra security
Another option: JetPack plugin - Photonhttps://developer.wordpress.com/docs/photon/
https://www.cloudflare.com
![Page 23: Optimizing Your WordPress Site: Why speed matters, and how to get there](https://reader031.fdocuments.us/reader031/viewer/2022030309/58f279001a28abb02a8b45e1/html5/thumbnails/23.jpg)
Cache things
Turn on Server-Side Caching• WordPress assembles your page each time
someone visits it. It makes your page out of database information, PHP files, and outside sources, which takes time.
• When you “cache,” you’re pre-assembling your page code to be handed off to your visitor
• Caching can happen on multiple levels:• Your web host (i.e. SiteGround Super Cacher)• As a plugin in your WordPress (i.e. W3 Total
Cache)• On another server (i.e. CloudFlare)
![Page 24: Optimizing Your WordPress Site: Why speed matters, and how to get there](https://reader031.fdocuments.us/reader031/viewer/2022030309/58f279001a28abb02a8b45e1/html5/thumbnails/24.jpg)
Cache things
Turn on Server-Side Caching
• W3 Total Cache https://wordpress.org/plugins/w3-total-cache/ • Be sure to enable “page
cache”
![Page 25: Optimizing Your WordPress Site: Why speed matters, and how to get there](https://reader031.fdocuments.us/reader031/viewer/2022030309/58f279001a28abb02a8b45e1/html5/thumbnails/25.jpg)
Load the Important Things FirstPrioritize “Above the Fold” Content• “Lazy load” images - Stops images from
loading until you actually get to them on the pagehttp://www.elegantthemes.com/blog/tips-tricks/how-to-add-lazy-loading-to-wordpress
• “Critical path” CSS - Load the CSS for the top of the page inline first, separately from all the other CSS, which gets loaded at the bottomhttps://developers.google.com/web/fundamentals/performance/critical-rendering-path/• Autoptimize plugin can do this, but doesn’t
let you do different CSS for each page
![Page 26: Optimizing Your WordPress Site: Why speed matters, and how to get there](https://reader031.fdocuments.us/reader031/viewer/2022030309/58f279001a28abb02a8b45e1/html5/thumbnails/26.jpg)
Get a Faster Server
Use a Reputable Host• Sometimes your site is slow because your web
host is slow. Greedy companies try to cram too many sites, too much traffic on their servers.
• Reputable, fast hosts that people keep telling me about:
siteground.com
asmallorange.com wpengine.com
![Page 27: Optimizing Your WordPress Site: Why speed matters, and how to get there](https://reader031.fdocuments.us/reader031/viewer/2022030309/58f279001a28abb02a8b45e1/html5/thumbnails/27.jpg)
Get a Faster Server
Use a Reputable Host
• A list of web site hosts, arranged by what percentage of people say positive or negative things about them on Twitter:http://reviewsignal.com/webhosting/compare/
![Page 28: Optimizing Your WordPress Site: Why speed matters, and how to get there](https://reader031.fdocuments.us/reader031/viewer/2022030309/58f279001a28abb02a8b45e1/html5/thumbnails/28.jpg)
Case Study: Splendry.com• Before:
• Problem: 15-30 second delay before page starts loading
• Page loads in 8.5 seconds• Page weight: 4.5 MB
• Now:• No noticeable delay• Page loads in 1.5 seconds• Page weight: 1.2 MB
![Page 29: Optimizing Your WordPress Site: Why speed matters, and how to get there](https://reader031.fdocuments.us/reader031/viewer/2022030309/58f279001a28abb02a8b45e1/html5/thumbnails/29.jpg)
Case Study: Splendry.com• What we did (in order of
loading time importance):• Moved from GoDaddy to
SiteGround• Change all PNG photos to JPGs• Smush WP plugin• SuperCacher (SiteGround) and
W3 Total Cache plugins• Autoptimize plugin• CloudFlare• Other small tweaks
![Page 30: Optimizing Your WordPress Site: Why speed matters, and how to get there](https://reader031.fdocuments.us/reader031/viewer/2022030309/58f279001a28abb02a8b45e1/html5/thumbnails/30.jpg)
You Can’t Fix Everything
It’s up to you which optimizations make a significant impact, and how much time you’re willing to spend on each site.
![Page 31: Optimizing Your WordPress Site: Why speed matters, and how to get there](https://reader031.fdocuments.us/reader031/viewer/2022030309/58f279001a28abb02a8b45e1/html5/thumbnails/31.jpg)
Quick and Easy Fixes• Always use JPG for photos.• Install Smush WP or “Compress JPEG &
PNG images” plugin - Let it compress your whole media library, and each new image when uploaded.
• Install Autoptimize plugin - Turn on HTML, JS, CSS compression. If nothing breaks, you’re good.
• Install RICG Responsive Images plugin - If nothing breaks, you’re good.
• If you don’t already have a caching plugin, install W3 Total Cache - If nothing breaks, you’re good.
Review
![Page 32: Optimizing Your WordPress Site: Why speed matters, and how to get there](https://reader031.fdocuments.us/reader031/viewer/2022030309/58f279001a28abb02a8b45e1/html5/thumbnails/32.jpg)
More Complicated Fixes• Add image thumbnail sizes for Responsive
Images plugin to use.• Write templates with custom img “sizes”
attributes to load exactly the size of responsive image you need.
• Set up a CDN - CloudFlare isn’t too hard, but requires changing name servers, records.
• Move your site to a better web host.
Review
![Page 33: Optimizing Your WordPress Site: Why speed matters, and how to get there](https://reader031.fdocuments.us/reader031/viewer/2022030309/58f279001a28abb02a8b45e1/html5/thumbnails/33.jpg)
Learn More About Website Optimization
Load your page in Google PageSpeed Insights, then dig through the recommendationshttps://developers.google.com/speed/pagespeed/insights/
Load your page in YSlow (Chrome/Firefox plugin) then dig through the recommendationshttp://yslow.org
![Page 34: Optimizing Your WordPress Site: Why speed matters, and how to get there](https://reader031.fdocuments.us/reader031/viewer/2022030309/58f279001a28abb02a8b45e1/html5/thumbnails/34.jpg)
Where to Find Me@stephenjbell
steedokc.com
Download this presentation: http://www.steedokc.com/wordpress-optimization/