SEO is multifaceted and each optimization factor is dependent on the others. You can create first-class content that engages users and that is relevant to their search intent, but if your pages load slowly, your users will never get the chance to read this outstanding content you’re creating for your website. Users are impatient and they will bounce if they have to wait for more than a few seconds.Can you blame them, though? Think about how frustrated you feel when you have to watch a loading wheel spinning, for what feels like an eternity. This is the mindset we need to have when we approach any performance optimization work because the most meaningful improvements will happen when you approach things from a place of empathy for your users.
User-Centric Performance Optimization Is the FutureConsidering the varying nature of performance depending on the browsing conditions of each individual user, there’s a lot more that marketers can be doing to improve the way we speed up websites. The future of site speed should be focused on tailoring performance around the user and their particular browsing environment. Here are three areas that can be optimized to improve how users experience your website:
- The user’s device
- The user’s internet connection
- The user’s journey
1. Optimizing Performance Based on the User’s DeviceThe key to ensuring that every user has a positive, fast experience on your website is to implement a baseline level of performance that works for the most basic device you’re optimizing for. Two web development strategies that work around this concept are:
- Progressive enhancement
- Graceful degradation
Graceful DegradationGraceful degradation is basically the opposite of progressive enhancement. The website will start with the full experience, but will then start falling back to a gradually less complex experience by switching off certain low-importance elements if the user’s device is unable to handle the more advanced features. These web strategies can be really powerful because if your website loads quickly and performs well even on the most basic device, think about how much faster it will load on higher-end devices.
2. Optimizing Performance Based on the User’s Internet ConnectionInternal connection is one of the most inconstant factors of a user’s browsing conditions, especially for those on mobile. As we use our devices on the move, internet connectivity is bound to fluctuate and drop off. However, it is possible to optimize for different levels of internet connectivity to ensure that users will still have a good experience of your website on a 3G or 2G connection.
Network Information APIThe Network Information API provides information on a user’s internet connection status, including the type and strength of their connection. You can use the Network Information API to detect changes in the user’s internet connection, by using this code example:
3. Optimizing Performance Based on the User’s JourneyOne way of prioritizing the most important resources to be loaded as quickly as possible is by the user’s journey. When a user is on a particular page, where are they most likely to click next? Which links and resources will be needed for that next page in the user’s journey? Again, this is another method of optimizing what is needed as a priority rather than optimizing every page that a user could potentially land on and every resource they could potentially need. A fast, seamless journey between pages contributes a great deal to a user’s perception of speed.
Resource HintsLeaving the browser to load every single resource all at once can be an inefficient process which adds more time for the user as they sit and wait for a page to load. This is where resource hints can help. Resource hints are instructions that you can give to a browser to help it prioritize what is most important to be loaded first. Preload Preload specifies the highest priority resources that impact the current navigation that should be loaded first.
<link rel=”preload” as=”script” href=”example.js”>Preconnect Preconnect establishes connections with the server and other origins earlier. This process can take a long time for users with poor connectivity.
<link rel=”preconnect” href=”cdn.example.com”>Prefetch Prefetch specifies key links and resources that will be needed as part of the future navigation or for the next step in the user’s journey.
<link rel=”prefetch” href=”example.jpg”>