Jon-Mikel Bailey - Your Website’s Performance Matters to Google AND Your Clients!

@woodstreetweb@jonmikelbailey
Why Speed Matters to Google AND Your Clients!
WebsitePerformanceAnxiety?

Performance Enhancing Tips
To reach optimal website performance …
• Identify the problems that matter
• Take hosting choices seriously
• Optimize images and video
• Prioritize the use of smart coding techniques
• Use responsive design, AMP, and/or PWA for mobile users
Let’s take a look…

Your website
has issues.

What’s wrong with your website?
Tests
• Google
• GTMetrix
• YSlow
Stay calm…

Don’t Freak Out!
It might not be that bad
• Reports are just raw data
• Reports are automated
• Don’t try to fix everything
• Prioritize based on needs
• What’s the full story?

Take Stock
Firefox Trick
• Open site in Firefox
• Select F12
• Click Net and enable
• Refresh the site
• Roll over to see details

Too Much Bling?
Do you need it?
• Animation, plugins, scrolls, etc.
• Is it slowing things down?
• Does it help the user’s experience?
• Does it support the brand?
• What if it wasn’t there?

Hosting

What is Web Hosting?
web host·ing
noun
Providing storage space and
access for websites.

You think you have this…

But,is it more like this?

Hosting Checklist…
When purchasing hosting,look at…
• Reputation and Reliability
• Customer Service/Support
• Scalability/Flexibility
• Latest PHP, MySQL, Plesk, cPanel, etc.
Don’t shop on price. Go for specs and support!

What’s Your Uptime?
A website only works when it’s accessible…
• Uptime = time server is accessible per year
• 99.5% uptime = 3.6 hours of downtime per month
• Repairs, hacks, out of memory, overloaded affect uptime
A user visits your site. It’s down. They’re thinking…

What Matters in Hosting?
Shared Hosting – only as good as your worst neighbor

What Matters in Hosting?
Dedicated Hosting: all that space, just for you!

What about the cloud,man?
CDN,Content Delivery Networks:
• Host site assets in the cloud
• Faster page load speed
• Traffic spikes balanced between servers
• Block spammers, scrapers and other bad bots
• Protect your website from DDoS (denial of service) attacks

Standard Hosting CDN Hosting

Images & Video

Optimizing Images
500 KB 25 KB

Optimizing Images
It’s easy to fix one of the most common performance issues:
• JPEGMini – Free trial or $100 for pro
• ImageOptim (Mac) – Free and open source
• Free Image Compressors
• Online Compressor.io
• WordPress Plugin like Smush

Optimizing Video
• It’s free and anyone can use it
• Harder to limit access and sharing
• Less control with ads
• Limited features available to you
• Google owns YouTube = SEO benefits

YouTube
Video
Embed

Optimizing Video
• Limitations on free accounts
• Stronger visual and content controls
• Vimeo Pro account ($199/yr) best for commercial use
• Flexibility for volume and player appearance
• Stronger privacy controls and no ad overlays on Vimeo

Vimeo
Video
Embed

Embedded Video - WordPress

Embedded Video - Drupal

Embedded Video Benefits
• Files not stored on your server
• Simple to post and embed
• Optimized for all users/devices
• Streams from cloud, not a fixed server
• SEO and content marketing benefits

Smart Coding

Smart Coding – Progressive Enhancement
• Define a baseline of functionality
• Build with semantic markup first
• Can it function without JavaScript?
• Cake  icing  sprinkles  decorations
• HTML  CSS  JavaScript  Other Assets
Analogy credit – Tiffany Tse
Serve only what they can handle.

Smart Coding – Limit and Minify
• Only serve assets on pages that use them
• Use secondary images for mobile or remove
• Strip out all code that is unnecessary
• Limit web services/calls like REST
• Serve minified CSS, JavaScript, etc.
Only give them what they need.

Non-Minified Code
6,ooo Bytes (6k)

Minified Code
94 Bytes

Smart Coding - Plugins
• Is it time for an audit and housecleaning?
• Do you need a plugin or can it be coded?
• Is it loading on every page? Should it?
• Are any out of date or broken?
• Is your theme or template loaded with junk?
Know what’s what in your website. Clean house!

Mobile

Responsive Design
• One website for all devices
• Not a cure all, requires planning
• Layout and assets scale
• Pay attention to menus, usability
• Consider content, images for mobile

AMP
Accelerated Mobile Pages
• Stripped to essential elements
• Minimal branding and design
• Loads quickly
• Limited engagement/conversion
• Complicated to setup

PWA
Progressive Web Apps
• No separate code, HTML5
• Modified website to work natively
• PWAs can send push notices
• Stored on phone with icon
• Fingerprint and Bluetooth not available

Performance Enhancing Tips
To reach optimal website performance …
• Tackle the problems that matter
• Make smart hosting choices
• Serve images and video the quick way
• Insist on smart coding techniques
• Use responsive design, AMP, and/or PWA for mobile users
Speed kills… if it’s slow!

Questions???
Suggested resources:
• www.searchenginejournal.com
• www.moz.com
• www.gtmetrix.com
• developers.google.com/speed
• www.boagworld.com
• www.searchenginewatch.com
Contact me/us:
• www.woodst.com
• jbailey@woodst.com
• @woodstreetweb
• @jonmikelbailey
• Facebook.com/woodstreetweb
• 301.668.5006 x101

Jon-Mikel Bailey - Your Website’s Performance Matters to Google AND Your Clients!

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to Jon-Mikel Bailey - Your Website’s Performance Matters to Google AND Your Clients!

Similar to Jon-Mikel Bailey - Your Website’s Performance Matters to Google AND Your Clients! (20)

More from Autumn Quarantotto

More from Autumn Quarantotto (20)

Recently uploaded

Recently uploaded (20)

Jon-Mikel Bailey - Your Website’s Performance Matters to Google AND Your Clients!