web performance: 3 stages to success
TRANSCRIPT
![Page 1: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/1.jpg)
Web Performance:3 Stages to Success
![Page 2: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/2.jpg)
About Me
Austin Gil (@Stegosource)Lead developer at Visceral (thisisvisceral.com)
3 years WordPress experience
![Page 3: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/3.jpg)
Presentation Overview1. Importance of performance
2. Introduce 3-stage approach
3. In-depth look at individual stages
4. Testing & recap
5. Questions & recommended tools
![Page 4: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/4.jpg)
Performance: Why Do We Care?(Super quick overview)
![Page 5: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/5.jpg)
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 data.
![Page 6: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/6.jpg)
Over-cited Example
“Amazon found every 100ms of latency cost them 1% in sales.”
Amazon earns over $100 BILLION per year
...so 100ms = $1 billion
![Page 7: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/7.jpg)
Great! Let’s Go!
![Page 8: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/8.jpg)
![Page 9: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/9.jpg)
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
And so on, and so forth...
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”
![Page 10: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/10.jpg)
It’s Not That Complicated
- Send fewer things
- Send smaller things
- Send using with better tools
![Page 11: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/11.jpg)
Apply to 3 StagesItem 21. Foundation
3. Code
2. Design
![Page 12: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/12.jpg)
Foundation
![Page 13: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/13.jpg)
Big Players
- Client “requirements” (see: sliders)
- CDN (Cloudflare)
- Client uploads
- Hosting
![Page 14: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/14.jpg)
Be the ExpertItem 2Designers- Educate & position yourself
- Educate your clients (use metrics)
- Share examples
- Learn to compromise (a.k.a. say “no”)
![Page 15: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/15.jpg)
Show Up PreparedItem 2Designers
- Know your hosts (PHP 7, SSD)
- Know your CDN’s (cost & effort)
- Know your client (budget & needs)
![Page 16: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/16.jpg)
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)
![Page 17: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/17.jpg)
Design
![Page 18: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/18.jpg)
Big Players
- Amount of content
- Multimedia (images, videos, audio)
- Complexity
![Page 19: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/19.jpg)
Content & LayoutsItem 2Designers- Grids
- Break up content (multi-page, AJAX)
- Replace images
![Page 20: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/20.jpg)
Less is MoreItem 2Designers
- Font families (Google fonts)
- Icon libraries (Fontello, Icomoon)
- 3rd party elements (ads, maps, social)
![Page 22: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/22.jpg)
Icon Libraries ComparedItem 2 Designers
Font Awesome:
Font + CSS
270kb
Fontello (10):
Font + CSS
-93%
Glyphicons:
Font + CSS
-60%
![Page 23: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/23.jpg)
Sliders/Carousels
Item 2Designers- Just don’t
- There are alternatives
- They bloat your page- They don’t convert (about 1% after first slide)- They’re bad for SEO- They’re bad for accessibility - Yoast said so
![Page 24: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/24.jpg)
Images
Item 2Designers- Save for web- Automate
- Simpler images (flat design)
- Know your file types (jpg, png, svg)
![Page 25: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/25.jpg)
Item 2Designers
Image Optimization Example
Original621 kb
Save for web (60%)275 kb
-56%
Original Image = 1250 x 877px, complex, many colors
Compressed (TinyPNG)192 kb
-69%
![Page 26: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/26.jpg)
The Affect of Image Effects(we can go even smaller)
![Page 27: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/27.jpg)
B & W
131kb
-32%
![Page 28: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/28.jpg)
Monochrome
99kb
-49%
![Page 29: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/29.jpg)
Gaussian Blur (5px)
77kb
-60%
![Page 30: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/30.jpg)
Partial Effects
![Page 31: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/31.jpg)
B & W Mask
167kb
-13%
![Page 32: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/32.jpg)
Blur Mask
162kb
-16%
![Page 33: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/33.jpg)
Transparent Overlay
135kb
-30%
![Page 34: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/34.jpg)
Color Mask
130kb
-32%
![Page 35: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/35.jpg)
Be creative!
![Page 36: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/36.jpg)
Code
![Page 37: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/37.jpg)
Big playersItem 2Designers- Caching
- How you <img>- Unnecessary resources- Database
![Page 38: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/38.jpg)
CachingItem 2Designers- Manually…
- WP Rocket (Paid)
- WP Fastest Cache
- W3 Total Cache
- The WordPress way
![Page 39: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/39.jpg)
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
- HTML background images (Gist) (Pen)
![Page 40: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/40.jpg)
Lazy Load ImagesItem 2Designers- Lazy Load (Lazy Load)
- Progressive Lazy Load (Gist)- 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...?
![Page 41: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/41.jpg)
Scripts & Styles
Item 2Designers
- Minify & concatenate
- Conditional load
- Plugins (Autoptimize)- Taks runners (Gulp, Grunt, Webpack)- Manually (Shrinker)- What about http/2?
- If ( is_font_page() ) { wp_enqueue_script(“...”) }- Plugins (Plugin Organizer, WP Asset Clean Up)
- It’s ok to dequeue
![Page 42: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/42.jpg)
CSS Frameworks ComparedItem 2 Designers
Bootstrap:
CSS & JS:
152kb
BS Grid Only:
CSS: 12kb
-92%
PureCSS:
CSS: 27kb
-82%More cool CSS info and tools at CSSPurge.com
![Page 43: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/43.jpg)
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)
- WP_Query optimization tricks
- Optimize database (Optimize Database after Deleting Revisions)
![Page 44: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/44.jpg)
Offload ResourcesItem 2Designers
- Understand what you’re doing
- Images (Flickr, ImageEngine)
- Videos (YouTube, Vimeo)
- Audio (SoundCloud)
- Scripts & styles (JSDelivr) (Gist)
- Take advantage of services
![Page 45: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/45.jpg)
What About Servers?Item 2Designers
- A look at the modern WordPress server stack
- Carl Alexander is AWESOME
![Page 46: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/46.jpg)
Test, Analyze, Repeat
![Page 47: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/47.jpg)
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
![Page 48: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/48.jpg)
Item 2Designers
Address Biggest Impactors First
- Upgrade your host
- Turn on caching
- Check your file sizes
![Page 49: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/49.jpg)
Item 2Designers
- Swap out plugins
Low Hanging Fruit
- Optimization plugins
- Remove unnecessary things
![Page 50: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/50.jpg)
[clap_hands]
![Page 51: Web Performance: 3 Stages to Success](https://reader036.vdocuments.us/reader036/viewer/2022070509/589f91c81a28ab1b198b5773/html5/thumbnails/51.jpg)
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