This discussion looks at different opportunities and techniques where project managers, designers, and developers can improve performance. The techniques presented range from beginner to advanced so just about anyone can walk away with something to apply to their next project. Topics cover concepts and planning, workflows, tools and services, plugin recommendations, and there are links to code examples as well.
2. About Me
Austin 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....
3. Overview
1. Why performance matters
2. Concepts related to performance
3. Optimization throughout a project
4. Testing & recap
5. Questions & recommended tools
5. 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.
6. 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
15. Be the Expert
Item 2Designers
- Educate & position yourself
- Educate your clients (use metrics)
- Share examples
- Learn to compromise (a.k.a. say “no”)
16. Show Up Prepared
Item 2Designers
- Know your hosts (PHP 7, SSD, HTTP/2)
- Know your CDN’s (cost & effort)
- Know your client (budget & needs)
17. 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)
21. Less is More
Item 2Designers
- Font families (System Fonts, Google fonts)
- Icon libraries (Fontello, Icomoon)
- 3rd party elements (ads, maps, social)
23. Icon Libraries Compared
Item 2 Designers
Font Awesome:
Font + CSS
270kb
Fontello (10):
Font + CSS
-93%
Glyphicons:
Font + CSS
-60%
108kb 19kb
24. 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)
25. Images
Item 2Designers- Save for web
- Automate
- Simpler images (flat design)
- Know your file types (jpg, png, svg)
26. Item 2Designers
Image Optimization Example
Original
621 kb
Save for web (60%)
275 kb
-56%
Original Image = 1250 x 877px, complex, many colors
Optimization tool (TinyPNG)
192 kb
-69%
27. The Affect of Image Effects
(we can go even smaller)
52. 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 service
File 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 URL
Conditional 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