Optimizing your WordPress website

Mary White

Optimizing your WordPress website for Speed & Performance

WordPressKCwww.wpkansascity.org | #wpkc

Grandview Triangle early 90’s

Why should I optimize my website?

How long do you stay and wait for a website to load? Make a mental note……..

SHHH don’t Tell anyone

Question?

Lower your hands as you hear your number…..

Every raise your hand

1-3 seconds

3-5 seconds

6-10 seconds

11-15 seconds

Look around who would be waiting on a slow site to load?

“Studies show that users leave a site if it hasn't loaded in 4 seconds; keep your users happy and engaged by providing a fast performing website! ~~From gtmetric”

“According to Kissmetrics, nearly half of web users expect a site to load in two seconds or less, and they tend to abandon sites that don’t load within three seconds.”

Bounce rate-- the amount of time before someone leaves your web page

One of Google points for ranking a website is the speed at which it loads. Google uses many factors but you don’t want to lose out on this one

Couple more reasons Why?

• Hosting

• Hardware

• Server Load

• Themes

• PlugIns

• Graphics

• Geographical Distance

What Affects Performance?

Dedicated

Hosting Service

Shared

The number of processors

The processors speed

Amount of memory and disk space

Hardware

“Wiki --- If the amount of data required exceeds the initial congestion window (typically 14.6kB compressed), it will require additional round trips between your server and the user’s browser. For users on networks with high latencies such as mobile networks this can cause significant delays to page loading”

Server Load

Graphics

Styles

Code JS jQuery

Look for Light frameworks andvery minimalistic theme Layouts

Theme

Theme Frank was created just for speed

Not are Candy

PlugIns

Geographical Distance

Google PageSpeed

GT metrix

Pingdom*

How do you Check your speed?

Google Developers: PageSpeed Insights

Mozilla Firefox + Firebug + Hammerhead

Yahoo! YSlow

Google Chrome + Google Speed Tracer

Pingdom

WebPagetest

Gomez Instant Test Pro

Resource Expert Droid

Web Caching Tests

Port80 Compression Check

A simple online web page compression / deflate / gzip test tool

Web Page Analyzer

GT Metrix

**From WordPress.org/WordPress_Optimization

Tools for Performance Testing**

I first took a Baseline with the following three tools..

Three times the first day to see if the time of day impacted the results..

• http://tools.pingdom.com/fpt/

• PageSpeed Insights

• http://gtmetrix.com/

What I did….

at 10:30 am on a Wednesday using Firefox Browser

PageSpeed Insight gave me 58/100

Pingdom gave me 73/100 load time 3.10s

GT Metric gave me 56% on pagespeed and 71 on Yslow Grade loadtime8.38s

at 11:00 am on a Wednesday using Chrome Browser

pageSpeed Insight gave me 70/100

Pingdom gave me 73/100 load time 2.42s

GT Metrix gave me 75% on pagespeed and 72 on Yslow Grade loadtime4.11s

My early Baselines

About 1:45 using Firefox Browser

PageSpeed Insight gave me 69/100

Pingdom gave me 85/100 load time 3.01

GT Metrix gave me 75% on pagespeed and 72 on Yslow Grade loadtime4.42s

Afternoon Baselines

Pagespeed Insight

Pagespeed Insight

GT Metrix

GT Metrix

Please backup your site and have an exit strategy if something causes problems with your site configurations.

I have always been told there is no Silver Bullet strategy that works for everyone.

Disclaimer….

Backup Your WordPress Website

Quick fixes

Remove all unused code

• Extra themes

• Extra plugin

• Extra photos

Off site Storage

• Off Load Images (Flikr, Amazon AWS, Amazon S3…)

• Use Third Party Videos (Vimeo, YouTube..)

Cache your webpages

http://www.wpbeginner.com/plugins/how-to-install-and-setup-w3-total-cache-for-beginners/

• W3 total Cache

• WP Super Cache

• WP Fastest Cache

• Quick Cache

WordPress for PlugIns Caching

I used W3 total Cache working with GTMetrix

About 1:45 Using Firefox browser

PageSpeed Insight gave me 71/100 server speed 1.3s

Pingdom gave me 75/100 load time 1.3s

Gtmetric gave me 81% on pagespeed and 79 on Yslow Grade loadtime 3.35s

Back to Case Study

cPanel

I was able to setup CloudFlare via a Hostgator Icon on C-panel

CloudFlare is a Free CDN

-Other CDN------------------------------

maxcdn…. www.maxcdn.com

Amazon cloudfront… http://aws.amazon.com/cloudfront/

Setup CDN (Content Delivery Network)

A Picture is worth a thousand words......

Images

… Unless no one sees it

a. WP smush.it

b. EWWW Image Optimizer

c. CW Image Optimizer

d. Imsanity

e. Hammy

f. PB Responsive Images

g. SEO Friendly Images

Optimizing Images Plug-Ins

???

What Other Plug-Ins

Change Hosting Services

Digital Ocean ssd

WPEngine Managed Hosting SiteGround Managed Hosting

FlyWheel Managed Hosting

Larger Changes

Design with a Minimalist view

What is the purpose and work from that point out

Remove Bells and Whistles

Slider or Carousel on the Home Page

Parallax

Re-Work your Theme

Code for Humans

Whitespace

Comments

Readability

Code for Computers

Just the Facts

Minify CSS…Minify JS

body{background-color:#d0e4fe}h1{color:orange;text-align:center}p{font-family:"Times New Roman";font-size:20px}

body {background-color: #d0e4fe;

}

h1 {color: orange;text-align: center;

}

p {font-family: "Times New Roman";font-size: 20px;

}

Manually Minify Codehttp://www.willpeavy.com/minifier/

Minify Plug-In

• Autoptimize

• W3 Total Cache

• WP Super Cache

• Quick Cache

You can place this above the end body tag </body>

<script type="text/javascript" defer="defer” src="YOUR_SOURCE_HERE"></script>

Defer parsing of Scripts

Redirects of your pages or posts

• Old URL to New URL

• www.websitename.com to websitename.com

Redirect 301 /oldpage.html http://www.yourdomain.com/newpage.html Redirect 301 /oldpage2.html http://www.yourdomain.com/newpage2.html

Plug-Ins

• Quick Page Post Redirect

• Redirections

.htacess redirects

This is something you want as part of your maintenance

You never know when things are going to change

• new admin add a ton of pictures without optimizing

• Shared server gets a client that is hogging most of your processing

• Other…

Check again and check often

• WPEngine

• SiteGround

• FlyWheel

Or Hire someone to do it

• Google Pagespeed Insights Premium

• GT Metrix Pro

• Quick Cache Pro

Give aways

Google Pagespeed Insights Premium

Report Summary

GT Metrix

Quick Cache Pro

Mary White

MW for Designs

[email protected]

MWforDesigns.com

@mw4designs

Continuing Educator at JCCC