According to Google, the perception of the loading speed of a webpage, its display, the actual loading speed, and the website’s fluidity are some of the most important criteria of the user experience. Whether good or bad, it has a significant impact on user engagement and satisfaction. The better the perception, the better the website’s performance. In this article, we’ll see how to optimize the perception of speed and fluidity of a mobile website.
Oddly enough, the perception of the speed can be perceived differently depending on the situation and state of mind of users. Some people will feel that the website is loading longer than it actually is. For others, it will be the opposite. From a point of view based on facts, it appears that most people react the same way to the speed and responsiveness of a webpage. The longer the speed, the greater the chances of leaving the website. Keep this figure in mind: 53% of users abandon a website if the loading time exceeds 3s. Simply put, Google determined a direct correlation between the perception of the loading speed and interest in viewing a webpage.
Here are 11 tips to optimize the speed of your website.
Optimize the Content and Visual Appeal of Website Opening
It’s a very common practice on e-commerce websites. Actually, 74% of the time that people spent on a webpage was due to what they see in the first two screenfulls, the Norman Nielsen Group study recently found. Optimize the code of a page in order to display in priority what will be immediately visible on the screen. Working on this optimization requires a lot of technical knowledge and fine-tuning of the code.Enter your text here…
Activate the “Tap“ More Quickly
With the aim of overcoming the impatience of users, allow them to be able to activate the “tap” more quickly. By default, there’s a delay of around 350ms which always follows a “tap” (a touch of the screen with your fingertip). This delay exists so that the screen can possibly receive a “double-tap”, but given that this function isn’t systematically necessary, maybe you should try to remove it. This can be done very simply by modifying the code of the page, which for most browsers is: <meta name=’”viewport” content=”width=device-width”>. A job of <meta> viewport element is to give the browser instructions on how to control the page dimensions and scaling. The part named width=device-width sets the width of the page in order to follow the screen-width of the device. By implementing this code, you’ll achieve the expected result.
Make Users Active
Google has separated users into 2 types: passive and active. It’s essential to turn the “passive” ones into “active”. The former tends to percept the webpage speed and website responsiveness slower by 36% compared to what it really is. Going into the passive state is triggered by long waiting times which can be reduced, according to Google. Several techniques exist to combat this perception:
- Viewing a small video game or interactive animation during a processing time is a good way to keep the user active.
- Animate your feedbacks: feedbacks are signals sent by the system to show that it has responded well to the user’s request. Often, these feedbacks don’t appear quickly enough and leave users impatient. However, thanks to the CSS, it’s simple to create mini-animations that will transform the feedback into a moment of visual pleasure and reactivate users.
Lease Quality Hosting
The speed of a website is pretty much influenced by the quality of the server and hosting that you use. Therefore, you need to use a hosting that’s fast and reliable if you want to make a mobile-friendly website. We recommend you to use MySQL hosting for better performance. It offers the fast server response speed which is the most influential thing that affects your website’s loading speed. It’s proven that MySQL database will be fast if it’s in Amazon Web Services (AWS) cloud: server is of good capacity and tables are indexed and optimized. AWS supports MySQL in numerous ways, including a fully managed database service – Amazon Relational Database Service (RDS) for MySQL, which is on its hand an open-source relational database management system.
Anticipate the Completion of a Page With Progressing Images
Another technique to give users the impression of fluidity is to start showing interface elements before they are fully loaded. It’s an old web technique that has come back into fashion with the arrival of mobile phones. Progressive images are images compressed with an algorithm (like .jpg) which loads the image in successive layers. Yes, these are similar to old pixelated images (which were the subject of jokes earlier) but that became more refined over time.
Use Upbeat Design
Upbeat or “optimistic“ design is a slightly daring design technique which consists of presenting unfinished tasks as finished. Its advantage is that it gives users the impression that the task was successfully executed immediately when in reality it’s postponed. That’s exactly what Twitter does, for example. When you like a tweet, this action isn’t stored directly in the database but a few moments later. This allows not to slow down the user’s “flow” while taking into account an action that requires a request time.
Use Upbeat Download
Even better than the optimistic design is an “optimistic“ download. Rather than making users wait for the download of a file, make them believe that the file has been almost immediately downloaded and let them continue doing what they have to do next. This technique can be performed using Web Workers which consists of JavaScript scripts that execute scripts from the HTML page in the background. Obviously, this assumes that users don’t leave the page too quickly and that they are informed if the download fails.
Create Fluid and Optimized Animations
For an animation to be perceived as completely fluid, each image mustn’t appear in more than 16ms, which means that a good animation must be set at 60img/s. It’s the most important thing to take care of in regard to this step but it’s not the only one. Keep in mind that a lot here is a question of the user’s psychology, as we said at the beginning of this article.
Adopt a Collaborative Design Strategy
Optimizing speed perception seems to essentially be optimizing the work on codes but it’s not completely like that. It’s essential to make UI/UX designers aware of these problems very early on. Forcing them to think in terms of performance will make them consider their contribution to the project in another way and participate in an overall performance, which also affects the business performance of a website.
But, to achieve this, it seems necessary to create a web performance budget to make your websites as fast as a rocket. The web performance budget is a set of constraints that you’ll be able to apply to your pages according to your target users and devices they have. For this, we suggest you to visit performancebudget.io and calculate the budget yourself. Also, there’s a more and more popular testing platform – Ezoic, creating the top-notch speed accelerator that guarantees to improve your mobile website speed.
Use Best Practices From Apps
Real apps (developed for iOS and Android) contain good practices that can sometimes be useful to reuse to further improve the perception of the website’s fluidity.
- Loading progress bar when a website is displayed in full screen. If you use some app, such as the Progressive Web App, that allows you to display a website in full screen, the browser buttons will no longer be displayed. For this reason, make sure to display loading bars that compensate for this lack and which, if they aren’t present, can result in bad user experience.
- Continuity of loading using skeleton templates. Usually, when the user clicks on a button, the page remains displayed statically until the content of the next page has started to be sent. It can be extremely annoying for the user. To avoid this effect, always try to give the impression that the structure of the website is stored entirely on the used server and that only the new content is downloaded on each request. Skeleton templates will simulate this impression. Before downloading the final content of the page, display them first.
- Untimely page breaks. You surely know these untimely page breaks when you download a page and as the images appear, the whole page jumps? This is due to the fact that the size of the images hasn’t been included in the HTML code, which describes it and must be “guessed“ by the browser when the image is actually downloaded, causing this notorious, untimely page break.
Optimize and Prioritize CSS and JavaScript Scripts
Non-optimized CSS and JavaScript scripts don’t, a priori, pose a problem for the fastest computers with a good Internet connection. On the other hand, this is not so much true on less advanced machines with slower connections, especially on mobile phones. The scripts take time to download and time to compile. On some old devices, this can cause a page activation time of more than 19s, so this is a crucial point to consider carefully. There are several valuable tips on this matter:
- Download only the minimum code required. Cut your JavaScript and CSS code into blocks and, in some cases, only download the absolutely necessary blocks.
- Preload the critical items on the page. To do this, use the <link rel=”preload”> tag and decide which media should be downloaded first.
- Embed the most essential CSS code on your page directly in the page header.