Optimising The Performance Of Your Website On Mobile Devices
Several studies indicate that an excess of 80% of mobile device users are dissatisfied with their web browsing experience and they would use their mobile device to access the web more frequently if they could have an improved browsing experience.
This result is to be expected, since most mobile device users expect a website to load in less than 4 seconds, but the mean load time for sites on these devices is about 9 seconds. We will explain some methods that can be utilised to make your site operate more rapidly on mobile platforms.
Mobile Download Speeds
We will begin by examining the loading speed of a site. The factor that is most obvious is the speed of the connection to the mobile device. In the scenario that is best, mobile device users will connect over 3G networks and 4G networks, with 4G having the most speed. In the United States, 56% of mobile users are using 3G and 28 % are using 4G. In Canada, even fewer are using 4G and in the UK 4G became available only recently. In Australia, less than 20% of mobile users have 4G.
The average download speed for 3G in the US and UK is about 2 Mbps and it is 6.2 Mbps for 4G. Outside of Europe and North America the speeds are normally slower. However, Australians should experience approximately the same speeds as North Americans. Since 1 Mbps results in 122 KB/s , the result is, on average 0.24 MB/s for 3G and 0.76 MB/s for 4G users. If you multiply these speeds by the time period that mobile users expect to wait, which is 4 seconds, this indicates that a site should be a max of 1 MB for users of 3G devices and 3 MB for users of 4G.
Nevertheless, the real bottleneck, as far as speed is concerned is not download speed. The critical factors are the mobile device’s memory, CPU, and network latency. Even if there is the capability of downloading 1 MB within 4 sec, the site will take additional time to load since the device must receive and then process the images and code.
When using a desktop computer, about 20% of the time needed to display a page is from file downloading. The remaining time is used in the processing of HTTP requests and loading script files, images, and style sheets. On a mobile device, this takes much longer, since its memory, CPU, and cache are less than that of a desktop.
How To Reduce Loading Time
Eliminate what is not at the core of the user’s experience. If something does not add significant value, get rid of it This is appropriate for all phases of the process of development, but it is particularly true for design and coding.
- Reduce Dependencies
If there are less files that need to be downloaded there will be fewer HTTP requests and quicker loading time.
- Decrease Processing On The Client-Side
Keep the use of JavaScript to a minimum
- Reduce The Dimensions Of Images
In addition to more download time, memory and processing power are utilised to process and re-size images that are high resolution.
Techniques For Reducing Dependencies
Load Images Using CSS
For images that you need to hide from users of mobile devices, load them as CSS background images and utilise media queries to hide them conditionally. Amazon.com uses this technique on their mobile pages to load images that are device specific, conditionally.
Minimise The Use Of Style Sheets That Are External
If you have been making use of an individual style sheet for every break point, it may be a good idea for you to reconsider this. Since each file must be downloaded, you can combine all of them into one file and decrease the amount of HTTP requests.
An alternative to this is to use server side code to insert the proper style sheet dynamically on the basis of the type of device accessing your site. Another way to minimise downloading style sheets is to use inline styles.
CSS3 In Lieu Of Images
Gradient fills, drop shadows, rounded corners and other styling features may be utilised rather than using images. This will reduce the amount of HTTP requests and make your load time faster. CSS3 can reduce the number of HTTP requests but it does increase processing load, although the effect on load time should be minimal.
Use Data URI Rather Than Web Font Or Image Files
With data URI, data can be embedded into the CSS or HTML without the use of external resources. Data URI can be utilised to embed almost anything into a webpage. It is most commonly used to embed web font and image files. The main benefit of using it is to minimise the amount of HTTP requests.
Utilise Inline SVG Rather Than Images
Scalable vector graphics can also be embedded into webpages, like data URI, in order to decrease the quantity of HTTP requests. SVG files can be produced with a editor for vector graphics. Adobe Illustrator is prime example of such a tool. After the SVG file is created it can be placed into your code, just remove any meta data that is not needed.
Image Sprites
The concept involved with image sprites is that you combine images that are commonly utilised into one image file. This will decrease the amount of HTTP requests. For instance, if you combine three images into one sprite, you will reduce the number of HTTP requests from three to one. The image that is needed is then shown by making use of the CSS property, background-position.
Use Font Icons
Fonts that consist of glyphs and symbols, like Webdings and Wingdings, are font icons. They may be utilised rather than an image file, that must be loaded.
Other more professional looking fonts may be obtained through @font-face. This method may be utilised similar to the manner in which image sprites are used to decrease HTTP requests. When multiple icons are combined into one web font, you will only need one HTTP request. If you embed your web font utilising a data URI, you won’t need any HTTP requests.
Avoid The Use Of Inline Frames
Every iframe results in an additional HTTP request, and any dependencies within the iframe can result in more requests. To have a fast site, it is best to avoid using them.
Design Your Code For Mobile From The Start
Designing for mobile applies to front-end development as well. By designing your code for mobile initially and then enhancing it progressively for desktops and tablets, you will reduce dependencies that are not required. If you initially design your code for a desktop, you are likely to load heavy components by default and then use graceful degradation to hide them.
Divide Your Content Into Several Pages On Multiple Mobile Sites
Maintain core content on one page, and provide links to additional content. This will decrease the HTML payload and avert the downloading of associated dependencies. For example, Amazon.com has mobile pages for their products that contain generic information. They provide links to information like product descriptions, customer reviews, and other information. This avoids HTTP requests for additional images, and the size of the HTML is decreased by 40 kilo bytes.
Also, try to minimise the use of redirects, they are time consuming. A single redirect can take half a second.
Reducing The Dimensions Of Images Using Responsive Images
The concept of responsive images involves only downloading images that are suitable for the visitor’s device. For most smartphones, these would be images that are lower-resolution, that will be downloaded faster.
Reduce The Amount Of Processing On The Client-Side
Minimise JavaScript Use
The use of Javascript will significantly increase the loading time of a site. As a rule of thumb, keep the use of JavaScript to a minimum. Instead of using JavaScript files that are external, its better to use inline script. Prior to utilising a JavaScript framework, contemplate if it is actually needed. In some instances, making use of small JavaScript bits has greater efficiency than calling a framework.
Avoid The Use Of Widgets
Widgets can increase loading time significantly. Make a concerted effort to avoid using widgets if you want to minimise your loading time.
Server-Side Considerations
You may also want to look into optimising your server-side code, in addition to client-side optimisation, to reduce loading times. Here are some server-side techniques you may want to consider.
- Make use of HTTP compression to reduce file size (DEFLATE or Gzip)
- Decrease the amount of redirects by merging HTTP redirect chains
- Speed up repeat visits by caching HTTP redirects
Conclusion
In order to satisfy the demands of mobile device users, you must develop a site that is mobile optimised and that will load in less than 4 seconds. To do this, you must keep the processing load to a minimum by optimising images, CSS, and HTML and reducing the use of JavaScript. By utilising the described methods with “eTraffic Web Marketing“, you will be able to increase the speed of your mobile sites and provide your users with a satisfying mobile experience.
