Optimizing your WordPress website
-
Upload
mwfordesigns -
Category
Education
-
view
130 -
download
1
Transcript of Optimizing your WordPress website
Mary White
Optimizing your WordPress website for Speed & Performance
WordPressKCwww.wpkansascity.org | #wpkc
How long do you stay and wait for a website to load? Make a mental note……..
SHHH don’t Tell anyone
Question?
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?
“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
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
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/
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
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. 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
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;
}
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
Mary White
MW for Designs
MWforDesigns.com
@mw4designs
Continuing Educator at JCCC