PRESENTED TO WORDCAMP OMAHA

BY ANDY MELICHAR

FIRST THINGS FIRSTA LITTLE ABOUT ME…

THIS IS MY FIRST WORCAMP SPEAKING GIG… WOOO!!

Thanks for the opportunity!

I LOVE KARAOKE.

Serial Hobbyist

Current obsession: HAM Radio.

My callsign is KEØATA

I just might know my way around the kitchen…

Look familiar?

Omaha, born and raised!

And now I live in Ypsilanti, Michigan

What the heck does a serial hobbyist, karaoke-singing culinary guy know about WordPress?

Director of Web Development andAgile Product Ownerfor A2 Hosting

We spend a lot of time on making WordPress better for our customers!

Ask me about Agile/Scrum!

From the Perspective of a Hosting Company…

A high percentage of our current and new customers are WordPress users, and the number keeps rising

Being on the hosting end, we can dig into common performance issues MUCH deeper because we know our web servers inside and out

The very high percentage of WordPress related support requests that we receive are performance related, so we’ve looked at many different ways to improve performance

SECOND THINGS SECONDTIME FOR YOU ALL TO FESS UP!

How many of you…

Have attempted to optimize your WP Site?

Have installed/configured a caching plugin?

Know what a CDN is?

Have added configurations to an .htaccess file

Are running your own server (VPS/dedicated/cloud) ?

Why should we care about performance?

Some statistics…

40% of people abandon a website that takes more than 3 seconds to load

A 1 second delay in page response can result in a 7% reduction in conversions

If an e-commerce site is making $100,000 per day, a 1 second page delay could potentially cost you $2.5 million in lost sales every year

Source: https://blog.kissmetrics.com/loading-time/

Bottom line…

A poorly optimized website can cost you real $$ in support and hosting costs

By diving into performance and optimization, you’ll learn more about WordPress, and more about web systems and infrastructure

By becoming a performance expert, you’ll be able to deliver a much more reliable, robust product to your customers!

How do you measure performance?

Performance Measurement Tools

Gtmetrix.com – my favorite!

Free

Easy to use/understand

Has a WordPress Plugin

WebPageTest.org

Also Free

Lots of great detailed information

LoadImpact.com

Free + Paid plans

Simulates multiple, concurrent users hitting your site

What Measurements Matter?

Page Load Time

Most representative of the customer experience

Best “overall” performance metric

Total Page Size

Good to keep an eye on this for major problems such as

Uncompressed images

High-resource themes/plugins

Let’s Look at our Before

Where can we “haz more performanz?”

Areas of Focus for Performance

Optimizations within WordPress

Our Web Server Environment

External Services

Optimizations within WordPress

Clean house!

Get rid of unused themes/plugins/etc.

Don’t just deactivate… DELETE

Be sure everything is up-to-date

Most recent WordPress version

Plugins are all updated to latest version

Optimizations within WordPress

Utilize a Caching Plugin

Optimizations within WordPress

Utilize a Caching Plugin

W3 Total Cache or Fix-W3TC

Free and HIGHLY configurable

WP Rocket

Paid, but comes well-recommended

WP Super Cache

Robust and easy to use

The Client/Server Process

WITHOUT Caching

The orange arrows repeat for every:• Image• CSS File• JavaScript File• Video• Etc.

The Client/Server Process

WITH Caching

With Caching, we skip a bunch of steps!• File System• PHP• Database

Enable Caching – Results (Gtmetrix)

Before Caching

After Caching

25 Concurrent Virtual UsersUsing LoadImpact.com

No Caching: 1.5s Page Load Time Caching: 180ms Page Load Time

Optimizations within WordPress

Turn on Minification

Most caching plugins will have an option for this, but it may not be enabled by default

You DO have to be careful, because Minification can break some themes/plugins, YMMV

Minification – JQuery Before / After

Before10,220 Lines261KB File Size

After3 (LONG) Lines85KB File Size

~60% Reduction

In size

Optimizations within WordPress

Turn on GZip Compression

Vast majority of hosts (especially shared hosts) support GZip from the server level, it just needs to be enabled

Easily enabled via .htaccess rules

Most caching plugins will also have an option to enable GZip compression

https://codex.wordpress.org/Output_Compression

Enable GZip – Results (Gtmetrix)

Before Gzip

After Gzip

Optimizations within WordPress

Optimize Images

Images are a significant amount of data that has to get transferred from the server to the client

Compress them!

Before you upload

During upload with a plugin, such as WP Smush

Now let’s look at the server!

Server-Side Optimizations for WordPress

Add “Expires” headers for static content

This tells the user’s browser to cache static files locally so they don’t have to transferred repeatedly

Done in either .htaccess or nginx config

Plugins like W3 Total Cache can help you do this, though you may still need to edit an .htaccess or nginxconfig file

Server-Side Optimizations for WordPress

Switch Web Servers

Apache – most common, not as robust

Nginx – increasingly more common, way better at serving up static files

LiteSpeed – licensed software, drop in replacement for Apache, does well with high volume, concurrent traffic

Server-Side Optimizations for WordPress

Switch Web Servers

To switch, typically need to be on your own server (VPS/Dedicated/Cloud) OR you can find a host that specifically offers hosting that uses one of the alternative web servers

Server-Side Optimizations for WordPress

Enable APC/OpCache

APC (for PHP < 5.5) or OpCache (for PHP 5.5 and greater) reduces the amount of time it takes the server to process PHP files

Few shared hosts have this enabled on their servers

Typically need to have a VPS or Dedicated server with APC or OpCache Installed

Once enabled on the server, nothing to configure or turn on in WordPress

External Service OptimizationsAKA CDN’S

What is a CDN?(Content Delivery Network)

CDN Sits between the server and the client, and handles serving up some/all of your files

CDN’s typically have a large infrastructure of multiple servers located in strategic geographic locations

What is a CDN?(Content Delivery Network)

Benefits:

They can reduce the load on your server

They can shorten the distance (hops) it takes for the client to get your data

They also can act as a protection tool for things like DDoS (Distributed Denial of Service) attacks, brute force attacks, and other attack vectors

Without a CDNRemember this mess?

With a CDNThings flowdifferently!

With a CDNThings flowdifferently!

DDoS AttackThe traffic neverhits your server!

Some Popular CDNs

CloudFlare

MaxCDN

CacheFly

Softlayer

More in the Codex: https://codex.wordpress.org/WordPress_Optimization#Use_a_content_Delivery_Network_.28CDN.29

The Downside of CDNs

To be effective they required DNS entry changes

Typically also need to have a corresponding WordPress plugin to talk to the CDN and coordinate content updates

Depending on how much protection / caching / etc, can cost $$$

What all did we do to our test site?

Enabled GZip

Added Expires Headers

Installed W3 Total Cache

Turned on Minification

Enabled CloudFlare CDN

Utilized nginx

Enabled opCache

The Results!

What’s up with that ‘C’ ?

What’s up with that ‘C’ ?

If we wanted to further optimize, we could bring these JS/CSS files local so they would get Minified/GZipped

Look a little closer at our “After”

On a repeat view we are REALLY flying

Only 1 request needed

Under 1s load time

Bytes in: 16KB!

Final Thoughts

There are LOTS of options to optimize/gain performance

You don’t have to do them all

Many people in the WordPress community know how to help you with these configurations

The Codex is your friend!

Questions?