Building faster websites: web performance with WordPress

Building faster websites
Web performance with WordPress
Johannes Siipola / Wordpress Meetup Helsinki 4.4.2018

Why web performance matters

Why performance matters
• Web page size and complexity is increasing every year
• More and more people are browsing the web on phones and 3g connections
• You need to have empathy for your users. Not everyone is visiting your site
on a MacBook pro with a ﬁber optic connection

Performance business impact
• More performance means happier users
• Google’s research says that 50% of users abandon site if it takes more than 3
seconds to load
• Fast loading increases conversions and revenue, can improve your SEO
• For more statistics visit https://wpostats.com

Web server performance

Use a VPS or Managed
WordPress hosting instead of
shared hosting

Web server performance / Upgrade your hosting
Shared hosting
• Slow performance
• Often no caching on the server level
• Limited conﬁguration options

VPS (Virtual Private Server)
• You can conﬁgure it however you like
• Server side caching, Gzip, Expires…
• You need sysadmin skills (or hire someone who does)

Managed WordPress hosting
• WP-Palvelu, WP Engine, WordPress VIP, Kinsta, Pantheon…
• Optimized for WordPress
• Very little conﬁguration options
• Optimized for performance: Server side caching, CDN, HTTP2, Gzip

Caching

Web server performance / Caching
Time to first byte
• Time to first byte: how much server processing and network latency before
first byte is transferred
• Critical because no other resources can be downloaded before this is done

Caching
• Generating page in WordPress is slow: you need to process PHP, do SQL
queries
• Caching generates static copies of your pages and bypasses all this
• Don’t optimise you code, just add caching

Why cache?
• In addition to speed, caching is also important for scalability. If you end up
on the front page of Reddit with no caching, most servers won’t be able to
handle it if all requests go to WordPress

Cache plugins
• Caching is most effective when implemented server side: Nginx, Varnish
• There are dozens of caching plugins for WordPress: W3 Total Cache, WP Super Cache etc.
• By default cache plugins still execute PHP - bad
• In some plugins you can conﬁgure enhanced caching so cached pages are server by web
server instead of PHP
• At least it’s better than nothing

Caching problems
• Caching works well for blogs and news sites
• Problematic if your site has logged in users (non-admins), shopping carts, geolocation
• You can exclude pages from cache using paths or cookies or use cache bins to isolate by
geolocation or device type (mobile, desktop)
• Or use Javascript and AJAX to implement user-speciﬁc features
• Make sure to switch to a real cron if you use caching so your cron jobs run on time

Use HTTP/2

Web server performance / HTTP2
HTTP/2
• Browsers communicate with servers using HTTP protocol
• HTTP/2 is the latest version of the protocol
• Allows connection multiplexing and HTTP header compression
• Supported in recent Nginx and Apache versions - but you need HTTPS

Use compression

Web server performance / Compression
Compression
• Makes resources smaller by formatting them differently
• Text ﬁles like HTML, CSS and JS compress well, images or ﬁles don’t
• Gzip compression is supported by all browsers since IE6
• Enable in Nginx or Apache and it just works

Optimize asset delivery

Don’t load unnessary resources

Optimize asset delivery / Don’t load unnessary resources
• Less resources, faster the site
• Don’t load anything you don’t use
• Disable plugins you don’t use

Optimize asset delivery / Don’t load unnessary resources
• Audit your CSS with unCSS
• If you use Bootstrap or Foundation, use sass to comment out parts you don’t
use
• Avoid using ready-made themes or plugins with front end dependencies
• Don’t use a plugin if you don’t have to

Minify assets

Optimize asset delivery / Minify assets
What is minification?
• CSS and js files contain data that is useful to humans but not computers
• Minification makes files smaller but doesn’t change it’s meaning
• Use Source maps to debug minified files in production

How to minify?
• Use UglifyJS for JavaScript files
• Use Clean CSS or CSSNano for CSS files
• These are command line tools you can integrate into your workflow using
Gulp or Webpack

What about ﬁles added by plugins?
• You can use Autoptimize plugin to automatically minify and bundle assets
added by themes or plugins
• Exclude your own ﬁles if you want the source maps to work

Cache assets

Optimize asset delivery / Cache assets
Cache assets
• When browser downloads an asset like image, CSS or JavaScript ﬁle, it’s
cached in the browser
• Loading ﬁle from cache is much faster than downloading it again
• Caching in controlled according to cache control HTTP headers sent by the
server

How to set cache control headers?
• Cache control is configured in server settings: nginx.conf or .htaccess
• For example configurations, go to https://github.com/h5bp/server-configs
• Some plugins like W3 total cache can write these config files for you

Cache busting
• Expires are great for performance but if CSS and JavaScript files are updated
but user have older versions in their cache, it can break your site
• This can be fixed by changing the file every time the file is updated
• With cache busting, you can use far future expires, cache assets up to a year

Cache busting strategies
• File version like /style.css?v=1 and /style.css?v=2 is simple but easy to
forget
• Modiﬁcation date: /style.css?v=1522515085
• Hash: /style.css?v=5f4dcc3b5aa765d61d8327deb882cf99

Where to put the hash?
• Query string /style.css?v=5f4dcc3b5aa765d61d8327deb882cf99 works
great in most cases, no changes to the server configuration
• File name /style.5f4dcc3b5aa765d61d8327deb882cf99.css is sometimes
needed but you need to either change the file names or use a rewrite to
redirect hashed url to the file on the disk

Content Delivery Network
(CDN)

Optimize asset delivery / CDN
Why do need CDNs?
• Your servers are located in one place but your site might have users from all
over the world
• Further the users are located from your servers, more latency will incur

What is a CDN?
• CDN is geographically distributed cache that serves content close to your
users
• Most CDNs only cache static content

Do I need a CDN?
• If you have visitors from all over the world, CDN can improve the experience
for your users
• If you have visitors mostly from one country and servers are located close by,
there is no need for a CDN

How to use CDN
• Sign up for a CDN and enter your origin URL
• Just change the assets paths
• CDN enabler plugin from KeyCDN
• Some caching plugins like W3 total cache have CDN support built in

Optimize images

Responsive images

Optimize asset delivery / Optimize images
Responsive images
• High resolution screens on devices like phones and Retina Macs
• Normal resolution images look bad on high res screens
• Doubling the image resolution is wasteful for normal resolution displays
• Responsive images with scrset and sizes solve this problem. Serve right
image to the right screen

How to use responsive images?
• Srcset is the standard for responsive images
• Srcset support is baked into WordPress since 4.4 - but just for images in the
content area

How to use responsive images?
• Set the content area width using wp_calculate_image_sizes ﬁlter
• You might want to add new images using add_image_size()

Optimize image ﬁle size

• Use correct ﬁle types
• JPEG for photos
• PNG or SVG for charts and graphics

• Photoshop’s Save for web and WordPress’s GD or ImageMagic resizing don’t output
particularly optimised images
• Tools like MozJPEG and PNGQUANT can optimize ﬁles even more with minimal quality loss
• Remove image metadata like camera model or geo coordinates
• Chroma subsampling takes advantage how human eye works, it can save up to 20% in ﬁle
size

Progressive JPEGs
• By encoding images as progressive JPEGs, they are often smaller and load
by incrementally increasing resolution rather than from top to bottom - faster
perceived loading

Source:
http://bbshowcase.org/
progressive/

How to automate image compression?
• There is no single right quality setting because every image it different
• Nobody wants to ﬁddle with compression settings, upload best quality
images into WordPress and use a compression plugin to optimise images
automatically

Image optimization plugins
• WP Smush, kraken.io, optimus.io, EWWW.io, ShortPixel, Imagify
• SaaS services that optimise image on cloud servers - for a fee
• Also optimise image thumbnails
• If you use a plugin, set the WordPress thumbnail quality to 100 so you don’t
double compress your images

Optimize web fonts

Optimize asset delivery / Optimize web fonts
Optimize Web fonts
• Load as few typefaces and font weights as possible
• Use latest formats like WOFF2
• Subset fonts (check the license beforehand!)
• Preload most critical fonts to avoid FOIT

Optimize JavaScript loading

Optimize asset delivery / Optimize JavaScript loading
Optimize JavaScript loading
• Most of the time, JavaScript is not needed for the initial view to load.
• Script tags in the header are parser blocking
• Avoid blocking by putting script tags at the bottom

Optimize asset delivery / Optimize JavaScript
Optimize JavaScript
• Some plugins add scripts to document head but you can use Scripts to
footer plugin to force them to footer
• Some scripts in the head like Google Analytics are actually asynchronous so
they don’t beneﬁt from moving them to the footer

Optimize CSS loading

Optimize asset delivery / Optimize CSS loading
Optimize CSS loading
• Google recommends inlining critical CSS and deferring rest - but this only
works for simple and static sites
• Split CSS based on page templates or elements, this way you don’t load
unnessary CSS rules on a page.

Web performance tools

Auditing tools

Web performance tools / Auditing tools
Browser developer tools
• Browser timeline tool is your best friend to see what resources are being
loaded and how fast
• Latest versions of Chrome also include auditing tool you can use to measure
your site performance

Google PageSpeed Insights
• Scans your page, assigns a score and offers performance improvement
suggestions
• PageSpeed score is a meaningless number - focus of fast site rather than
high score
• PSI nowadays also offers RUM statistics in addition to synthetic score

WebPageTest
• Loads your site in real / VM browser from locations all around the world
• Waterfall charts, timelines, video recordings, speed scores
• Can also emulate mobile browsers, different network conditions

Monitoring tools

Web performance tools / Monitoring tools
Pingdom
• Monitor real life loading times from all over the world
• Compare desktop and mobile browsers
• Can also do synthetic benchmarks over time

Web performance tools / Monitoring tools
New Relic
• Similar to Pingdom with additional features, for example monitoring for
AJAX and SPA applications - but more expensive
• New Relic also offers APM tool that you can use to monitor WordPress
backend performance

How to get started with web
performance optimization?

1. Audit your site using 
PageSpeed insights /
WebPageTest

2. Follow suggestions, start with
easy wins like miniﬁcation, GZIP,
image optimisation and HTTP2

3. Monitor performance over
time

4. Consider advanced
performance techiques

Thank you! Questions?

Building faster websites: web performance with WordPress

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Building faster websites: web performance with WordPress

Similar to Building faster websites: web performance with WordPress (20)

Recently uploaded

Recently uploaded (20)

Building faster websites: web performance with WordPress