2. @woodstreetweb@jonmikelbailey
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…
5. @woodstreetweb@jonmikelbailey
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?
7. @woodstreetweb@jonmikelbailey
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?
13. @woodstreetweb@jonmikelbailey
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…
17. @woodstreetweb@jonmikelbailey
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
21. @woodstreetweb@jonmikelbailey
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
22. @woodstreetweb@jonmikelbailey
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
24. @woodstreetweb@jonmikelbailey
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
28. @woodstreetweb@jonmikelbailey
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
30. @woodstreetweb@jonmikelbailey
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.
31. @woodstreetweb@jonmikelbailey
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.
34. @woodstreetweb@jonmikelbailey
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!
36. @woodstreetweb@jonmikelbailey
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
39. @woodstreetweb@jonmikelbailey
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!