Lets look at an example of what a performant website can look like. This discuss what concepts should we be considering when looking at website performance. Next we will go over two areas pertaining to website performance: 1) website performance tweaks that you as a web developer can directly make 2) website performance tweaks that you may have to work with your hosting provider or IT department to achieve
3. Extreme Example
Performance should be in mind from the start!
(866) 500-2706 - inventive.io - hello@inventive.io | Web Applications & Sites, Mobile Apps, Modernization
Slides: https://nven.tv/web-perf-pdf
4. IMPROVING LIVES WITH TECHNOLOGY
Aggie Muster - From Concept to Production in 3 weeks
4
(1) Concept
(2) Wireframe
(3) Prototype
Delivered (4)
5. IMPROVING LIVES WITH TECHNOLOGY
Aggie Muster - Site for live streaming and real-time communication
5
● 200,000 users could log on - targeted 400k users
● Prototyped, built, load tested, & deployed in 3 weeks
● Load tested 50,000 concurrent write operations
○ During 4 hour test
○ Processed 4 million messages
○ 2,500 requests per second
○ 100 servers TESTED BEYOND REQUIREMENTS
● During Muster we saw 50,000 unique visitors
○ 14,000 registrations
○ 15,000 HERE messages
○ 1000 reflections
○ At peak around 7pm: 27,516 active users
■ 800 requests per second across
35 servers
○ Average request duration for reads <10ms
● Hosting costs
○ Day of event: $565
○ Outside of the event: $60-$80/month
6. What is Performance?
Now let's understand the problem
(866) 500-2706 - inventive.io - hello@inventive.io | Web Applications & Sites, Mobile Apps, Modernization
Slides: https://nven.tv/web-perf-pdf
7. What is Performance?
● Page load speed
39% leave sites that render slowly
● Time to first render
74% leave if the site doesn’t load on the phone in 5 seconds
● Time to interactive (useable)
52% cite that quick page load is important to site loyalty
● Perceived performance
16% satisfaction decrease for 1 second page speed delay
8.
9. Without performance
● Not an enjoyable experience
A 0.4 second lag time results in decrease of 0.44% traffic
● Users won’t stick around
A 1 second delay in page load time means 11% decline in page views
● Google will demote you
0.5 second in each search page generation causes traffic to drop by 20%
10. ● Now indexes your mobile site
experience by default
● Should provide a 100% identical
experience as desktop
● Render speed of mobile should
be blazing fast and lightweight
● Accessibility friendly
https://search.google.com/test/mobile-friendly
https://nven.tv/web-perf-google-mobile-first
11. Test with your users in mind
Look at your Google analytics to understand who your users are
- 53% of mobile site visits are abandoned if pages take longer than 3 seconds to load
24. HTTP Requests
● Reduce DNS lookups
● Minimize redirects
● Remove query strings from
static resources
● Avoid bad requests
25. HTTP Requests
● Reduce DNS lookups
● Minimize redirects
● Remove query strings from
static resources
● Avoid bad requests
How a 301 redirect works
26. HTTP Requests
● Reduce DNS lookups
● Minimize redirects
● Remove query strings from
static resources
● Avoid bad requests
27. HTTP Requests
● Reduce DNS lookups
● Minimize redirects
● Remove query strings from
static resources
● Avoid bad requests
http://deadlinkchecker.com
28. Character Sets
● Specify the character set to
make the browser’s job easier!
● Must be in the first 1024 bytes
of the document!
<html …>
<head …>
<meta charset="utf-8">
https://nven.tv/web-perf-character-set
29. Fonts & Flash of unstyled content
● Consider not loading a font! Or
use “System Font Stack”
● Use CDN for font hosting
● Use WOFF2 format
● Us subset fonts including only needed characters
https://everythingfonts.com/subsetter
30. External Resources
● Images covered below
● CSS at the top
● JS at the bottom
● Inline critical CSS for above the
fold content
● Asynchronously load
non-critical CSS
○ Prohibits progressive
rendering of critical styles
○ Avoid redraws
○ Improves web standard
compliance according to
W3
33. Images
● Optimize Images
● Specify image dimensions
● Image sprites
● Lazy load below the fold
● HTTP/1.1 likes one request due
to queuing limitation
● HTTP/2 likes little requests due
to multiplexing
● A sprite with many images in
one file may compress better
that individual images
● If all images in a sprite are used
on one page, that may be a
better option
https://css-tricks.com/css-sprites/
36. Other Fixes
● Hosting
● Expires header
● GZIP compression
● Use a CDN
● Cached 302 redirects
● Tree shaking & UnCSS
● Code splitting
● Minify your code
37. Hosting
● HTTP2
● Servers near consumers
● Globally available - short hops
● Heavily cached static content
● Scalable infrastructure for
dynamic content
● If monolithic server, be sure
they are performant
● Limit noisy neighbors on shared
hosting
38. Hosting
● HTTP/2
○ Faster
○ Stream of binary
frames
○ More Secure
- Requires server configuration
https://nven.tv/web-perf-http2
39. Expires Header
● Allows you to leverage browser
caching
● Instructs browser to use local
copy of an already downloaded
file
● Reduces number of HTTP
requests to load page
- Requires server configuration
40. GZIP Compression
● Compresses the content on the
server
● Less for the browser to
download
● Browser then decompresses
the content for display
- Requires server configuration
41. CDN for Static Assets
● Get website assets as close to
your user as possible
● Offloads web traffic from your
host
● Caching on a highly performant
edge network
● Provides a form of redundancy
● Helps with scale
42. Cached 302 Redirects
● Redirects add latency to a
request
● Redirects delay page load time
● Remove redirects if possible
● Cache them if you can’t remove
them
43. Tree Shaking & UnCSS
● Remove dead code paths
○ From Javascript
○ From CSS
- Best when part of continuous integration
44. Code Splitting
● Send small specific bundles of code
● Minimizes the size of a request
● Utilize dynamic importing
45. Minify Your Code
● Removes whitespace
● Shortens variable names
● Shortens function names
46. Monitoring
Performance must be monitored over time
(866) 500-2706 - inventive.io - hello@inventive.io | Web Applications & Sites, Mobile Apps, Modernization
Slides: https://nven.tv/web-perf-pdf
54. Perceived Performance
Sometimes you can pretend to be performant!
(866) 500-2706 - inventive.io - hello@inventive.io | Web Applications & Sites, Mobile Apps, Modernization
Slides: https://nven.tv/web-perf-pdf
57. Extras
Some additional considerations
(866) 500-2706 - inventive.io - hello@inventive.io | Web Applications & Sites, Mobile Apps, Modernization
Slides: https://nven.tv/web-perf-pdf
58. Extras
1. Performance Budget
○ Be 20% faster than your main competitor
2. Performance = Ethics & Accessibility
3. Follow the specialists
○ Performance is an industry
○ Changes over time
60. An inventive company
solving big problems
with proven solutions
MORE THAN DIGITAL TRANSFORMATION
IMPROVING LIVES WITH TECHNOLOGY60
(866) 500-2706 - inventive.io - hello@inventive.io | Web Applications & Sites, Mobile Apps, Modernization
QUESTIONS?
61. An inventive company
solving big problems
with proven solutions
MORE THAN DIGITAL TRANSFORMATION
IMPROVING LIVES WITH TECHNOLOGY61
(866) 500-2706 - inventive.io - hello@inventive.io | Web Applications & Sites, Mobile Apps, Modernization
QUESTIONS?