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.
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...
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.
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:
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.
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.
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.
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.
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.
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.
Last Updated on
Please log in again. The login page will open in a new tab. After logging in you can close it and return to this page.