Upload
austin-gil
View
290
Download
1
Embed Size (px)
Citation preview
A Holistic Approach to Web Performance
About MeAustin Gil (@Stegosource)
Lead developer at Visceral (www.thisisvisceral.com)
I build kick-ass websites and web apps that make life better for clients and users.
I also break things sometimes....
Overview
1. Why performance matters
2. Concepts related to performance
3. Optimization throughout a project
4. Testing & recap
5. Questions & recommended tools
Performance: Why Do We Care?(Super quick overview)
User Experience
Faster loading websites have been proven to keep visitor on the site and interacting longer.
Visitors also are more likely to return to fast sites, or avoid slow sites.
SEO
In 2010, Google decided that page speed would be incorporated in their page ranking algorithm.
It is not the most important ranking signal, but worth noting.
Money
Performance factors directly affect conversion.
Speed affects time spent on site management.
Lightweight sites are easier on data.
The Cost of Latency
“In 2008, Amazon found that every 100ms of latency cost them 1% in sales.”
Amazon earns over $100 BILLION per year
...so 100ms = $1 billion
Let’s go!
1. Choose a good host2. Enable Gzip compression3. Minimize redirects4. Combine JS files5. Defer JS parsing6. Off-load the assets7. Remove unused plugins8. Use image srcset 9. Optimize database
19. Minify HTML20. Minify CSS21. Minify Javascript22. Avoid CSS @import23. Remove query strings24. Specify image dimensions25. Use data URIs26. Serve scaled images27. Specify character set28. Reduce database calls
10. Use image sprites11. Styles in header12. Scripts in footer13. Lazy load images14. Enable caching15. Optimize Images16. Optimize WP_Query17. Reduce DNS Lookups18. Combine CSS files
COMMANDMENTS OF WEB PERFORMANCE!!!“Thou shalt not take the name of thy lord,
Performance, in vain”
It’s Not That Complicated
Optimization Simplified to 3 Rules
Send fewer things
Send smaller things
Send things efficiently
Optimize During Each Stage
Item 2Project Planning - PM’s / Clients
Production - Developers
Architecture & Design - Designers
Planning
Big Players
- Client “requirements” (see: sliders)
- CDN (Cloudflare)
- Client uploads
- Hosting
Be the Expert
Item 2Designers- Educate & position yourself
- Educate your clients (use metrics)
- Share examples
- Learn to compromise (a.k.a. say “no”)
Show Up Prepared
Item 2Designers
- Know your hosts (PHP 7, SSD, HTTP/2)
- Know your CDN’s (cost & effort)
- Know your client (budget & needs)
Make Things Easy
Item 2Designers- Manage uploads
- Share useful tools
- Provide detailed documentation- Do it for them...with a maintenance plan :)
- Image dimensions (Imsanity)- Image quality (EWWW)
- Image editors (Pixlr, GIMP)
Design
Big Players
- Amount of content
- Multimedia (images, videos, audio)
- Complexity
Content & Layouts
Item 2Designers- Grids
- Break up content (multi-page, AJAX)
- Replace images
Less is More
Item 2Designers- Font families (System Fonts, Google fonts)
- Icon libraries (Fontello, Icomoon)
- 3rd party elements (ads, maps, social)
Icon Libraries Compared
Item 2 Designers
Font Awesome:
Font + CSS
270kb
Fontello (10):
Font + CSS
-93%
Glyphicons:
Font + CSS
-60%108kb 19kb
Sliders/Carousels
Item 2Designers- Just don’t
- There are alternatives
- They bloat your page- They’re bad for SEO (Yoast agrees)- They’re bad for accessibility - They don’t convert (about 1% after first slide)
Images
Item 2Designers- Save for web- Automate
- Simpler images (flat design)
- Know your file types (jpg, png, svg)
Item 2Designers
Image Optimization Example
Original621 kb
Save for web (60%)275 kb
-56%
Original Image = 1250 x 877px, complex, many colors
Optimization tool (TinyPNG)192 kb
-69%
The Affect of Image Effects(we can go even smaller)
B & W
131kb
-32%
Monochrome
99kb
-49%
Gaussian Blur (5px)
77kb
-60%
Partial Effects
B & W Mask
167kb
-13%
Blur Mask
162kb
-16%
Transparent Overlay
135kb
-30%
Color Mask
130kb
-32%
Production
Big players
Item 2Designers- Caching- How you <img>- Unnecessary resources- Database
Caching
Item 2Designers- Manually…
- WP Rocket (Paid)
- WP Fastest Cache
- W3 Total Cache
- The WordPress way
Image Markup
Item 2Designers- Image sizes (Settings > Media)
- Use srcset: <img src=“...” srcset=“...” />- get_post_thumbnail( $post_id )- wp_get_attachment_image( $img_id )
- Match to major breakpoints
- Responsive background images (Gist)(Pen)
Lazy Load Images
Item 2Designers- Lazy Load (Lazy Load)
- Progressive Lazy Load (Gist)(Pen)- Load thumbnail overlay (blur with CSS)- Javascript load full size- Fade out thumbnail
- Load tiny transparent img- User interaction (scroll, click)- Use JS to replace with actual image
- Accessibility...?
Scripts & Styles
Item 2Designers
- Minify & concatenate
- Conditional load
- Plugins (Autoptimize)- Taks runners (Gulp, Grunt, Webpack)- Manually (Shrinker)
- If ( is_font_page() ) { wp_enqueue_script(“...”) }- Only when a shortcode is present (Article)(Gist)- Plugins (Plugin Organizer, WP Asset Clean Up)
- It’s ok to dequeue
CSS Grids Compared
Item 2 Designers
Bootstrap:
CSS & JS:
152kb
Custom Grid:
CSS: 5kb
-97%
PureCSS:
CSS: 27kb
-82%More cool CSS info and tools at CSSPurge.com
Queries
Item 2Designers- Learn WP_Query (Codex)
- Reuse same query- wp_reset_query()
- Filter in query (post_type, posts_per_page, meta_query, tax_query, etc.)
- WP_Query optimization tricks
- Optimize database (Optimize Database after Deleting Revisions)
Offload Resources
Item 2Designers
- Understand what you’re doing
- Images (Flickr, ImageEngine)
- Videos (YouTube, Vimeo)
- Audio (SoundCloud)
- Scripts & styles (JSDelivr) (Gist)
- Take advantage of hosted services
What About Servers?
Item 2Designers
- A look at the modern WordPress server stack
- Carl Alexander is AWESOME
Test, Analyze, Repeat
Item 2Designers
- Query Monitor - Too much goodness to write
Testing Tools
- GT Metrix - Webpage grades and advice
- P3 - Compare plugin load times
- Bitcatcha - Server speed testing
Item 2Designers
Address Biggest Impactors First
- Upgrade your host
- Enable caching
- Check your file sizes
Item 2Designers
- Swap out plugins
Low Hanging Fruit
- Optimization plugins
- Remove unnecessary everything
[clap_hands]
Designers
Image Optimization Tools - TinyPNG or Kraken: Support batch uploads/downloads. Results vary.Image Optimization Plugins (choose one):
EWWW: Plug n’ play. Free. Good for agencies with lots of projects.
Compress JPEG & PNG images: Better performance. Freemium. Requires account.
Imsanity (plugin): Automatically resize super large uploads. Plug n’ play.
WP ImageEngine Responsive Image Resizer (plugin): Image hosting serviceFile Minification & Concatenation Tools:
Autoptimize (plugin): Easy to use, but be careful, it can break things sometimes. Test it.Gulp, Grunt, or Webpack: Task runners. Add to workflow to automate file optimization (advanced)
Shrinker: Online tool. Supports inserted code, upload files, or upload from URLConditional Load Assets Plugins (choose one):Plugin Organizer: Lot’s of setup work. Good for individuals fine tuning.
WP Asset Clean Up: Not as powerful, but much more simple to set up.
JSDelivr: Scripts & styles CDN. Also can minify and concatenate.
Optimize Database after Deleting Revisions: Database optimization plugin. Supports schedules.
Cloudflare: Free CDN