and natural. 0-100ms Visual changes in response to input feel instant. 100-300ms Delays are becoming noticeable. 300-1000ms These delays are acceptable for things like long tasks and navigation. >= 1000ms Disconnectedness, harder to keep focus. >= 10000ms Frustration occurs and users are more likely to abandon tasks.
UX friendly easing function: ease-out ✓ Use the right timings: ➢ General rule: 100ms in, 300ms out. * Transition Tips & Tricks * Except for modals, then it’s flipped. ease-out
benchmarks ➢ Compare your results with competitors ➢ Basic advice on improving performance ➢ Calculate impact and potential revenue For marketeers, decision takers and beginners
Results are not universal; influencing conditions: ➢ Device type (desktop vs. mobile, high-end vs. low-end) ➢ Network type (wifi, 4G, 2G, …) ➢ Connection type (high bandwidth / low latency) Metrics and Dimensions
2. First bit of content: First Contentful Paint 3. Actual useful content: First Meaningful Paint 4. User can start using the page: Time To Interactive It’s all about Perceived Performance and UX.
important image var imgTime = performance .getEntriesByName( "https://.../funny-cat.jpg" ); // Get all timing data at once var allTheTimings = performance.getEntries();
PerformanceObserver(function(list, obj) { var entries = list.getEntries(); }); // Run the observer perfObserver.observe({ // Polls for Navigation and Resource Timing entries entryTypes: ["navigation", "resource"] });
➢ Do I need these fancy animation? ➢ Do my users actually view my image slider? ➢ Does this add any value to my content? ➢ What’s the impact on performance? * shouldiuseacarousel.com (spoiler alert: NO)
Cache-Control: max-age=120 # Freshness for public caches. Cache-Control: s-maxage=120 # You don’t need “Expires” anymore. Expires: Thu, 9 Jan 2020 21:00:00 GMT+1
Cache-Control: must-revalidate # Same, but only for public/shared caches. Cache-Control: proxy-revalidate # This resource will *never* change (!) Cache-Control: immutable
Jan 2020 20:00:00 GMT+1 # Subsequent Browser Request. If-Modified-Since: Thu, 9 Jan 2020 20:00:00 GMT+1 # Server will return 304 Not Modified if not modified.
of resource. ETag: 5485fac7-ae74 # Subsequent browser Request. If-None-Match: 5485fac7-ae74 # Server will return 304 Not Modified if the token matches.
year # Note: “public” is implicit here Cache-Control: public, max-age=31536000 # Store a file for up to one day (eg; animage) Cache-Control: max-age=86400 # Cache, but always revalidate first Cache-Control: no-cache
both worlds! ✓ Use consistent URLs ✓ Store and forget: immutable files ➢ Include fingerprint or version number IN the URL. (eg: style.x234dff.css) ➢ Prevents caching inconsistencies ✓ Use validation tokens for variable files
small piece of the functionality. ✓ Consider smaller alternatives: ➢ Zepto is a smaller jQuery alternative ➢ Preact is a much smaller alternative to React Reducing the amount of scripts you send.
web sites. Don’t make them impact initial loading times. ✓ Lazy load off-screen media ✓ During idle time and/or when they enter the viewport ✓ Please don’t autoplay videos Don’t forget about lazy loading resources.
works with srcset & size. ➢ Customizable: blur, styles, ... ✓ Use fallbacks (noscript and on errors) ✓ Native lazy loading is coming! On lazy loading your media assets.
if ➢ It’s in the <head> of the document ➢ It does not have a defer attribute ➢ It does not have an async attribute ✓ A <script> tag can also be parser-blocking Render-blocking scripts
render-blocking if ➢ It does not have a disabled attribute ➢ It has a matching static media attribute ✓ Note: non render-blocking styles are also downloaded. Render-blocking styles
parallel requests over single connection ✓ Header compression ➢ Low overhead. Smaller headers. ✓ HTTP/2 Server Push ➢ Push your critical resources along with your page. Use HTTP/2, it has huge performance benefits.
--> <link rel="preload" as="style" href="critical.css"> <!-- Start a connection to example.com --> <link rel="preconnect" href="https://example.com"> <!-- Do a DNS lookup for some request in future --> <link rel="dns-prefetch" href="https://example.com"> <!-- Load the next page with lowest priority --> <link rel="prefetch" href="page-2.html">
database communication, external systems, ... ✓ Frontend Performance: Loading ➢ What do I send, how do I send it? How much do I send? ✓ Frontend Performance: Rendering ➢ What happens after loading? How smooth are interactions and navigation? Know what performance is made of.
Minimize your Time to First Byte. ✓ Make sure your configuration is optimized. ✓ Consider the impact of plugins and themes. ✓ Don’t trust theme frameworks and page builders. General recommendations
web server, cache, …) ✓ Have their configurations tuned for performance ✓ Run on performant hardware ✓ Be located close to you Good hosting environments should
change very often. ➢ Content is not tailored to the user. ✓ Highly Dynamic ➢ Content changes often, or is specific for the current user. How dynamic is your site, really?
➢ WP-Cron, Cronjobs, external providers ✓ Decrease database query latency ✓ Make use of server side caching ✓ Increase your PHP Workers ➢ More simultaneous requests for high-traffic sites Tips on improving.
mindful of what is being loaded and how. ➢ Optimize the Critical Rendering Path ✓ Make sure network requests ➢ Implement proper caching ➢ Are optimized for fast delivery Improving Frontend Performance.