Why make your mobile website faster? A common concern with mobile users is that the websites they visit on their cell phones take too long to load. Here a 5 different ways to enhance the usability of your mobile website, thereby decreasing download times and ultimately making your website faster.
Compress images and explicitly identify image sizes.
This may seem obvious to most developers, but compressing images for mobile viewing is a must. Smaller images mean smaller web pages and smaller web pages are faster to download. Using JPEGs on a website generally minimizes the amount of data required because of this lossy image format.
Sometimes, webmasters and developers may forget to define the width and height attributes of the <img> tag in HTML. Even if you omit the width and height, the image still displays properly in most web browsers. Identifying the width and height attributes in the HTML eliminates the mobile browsers need to guess how large the image is, allowing more efficient asynchronous downloads.
Compress JavaScript and CSS.
Whitespace actually takes up space. Some JavaScript and CSS files possess as much as 30% whitespace. By inserting the text into a simple text editor, developers can remove all unnecessary whitespace with the click of a mouse. 2 seconds of time = 30% increase in efficiency.
If you are not familiar with using a text-editor or IDE for developing websites, there are several tools available to compress JavaScript and CSS files. A quick Google search will point you in the right direction. These online tools will allow you to input a URL to the JavaScript or CSS files you wish to compress. The compression tools will almost always allow you to choose between outputting the compressed markup as text or as a file.
Use colors and CSS when possible.
I cringe inside when I see websites that still use images for buttons and hover effects. It is every bit of unnecessary. Make every attempt to minimize the use of images, especially for buttons.
The use of CSS gradients and hover/button press effects will usually provide better usability and lower download times. Use an online CSS button generator to create buttons that provide the visual appeal that was previously only possible through the use of images.
Maximize the percentage of text.
Try to use your mobile website to push content to your users. With the limited ability of mobile devices, users are far more likely to search the web for information that anything else. Give your users large amounts of valuable and interesting content to take with them on the go.
Text files are much smaller than images or videos on average. Since cell phones typically have limited bandwidth compared to desktop devices, web pages with large amounts of text are faster to download that pages with loads of embedded media files.
Limit the size of your web pages.
Try to make your vertical scroll on a mobile website no more than 2 pages in length. This means multiply your users device height by 2 and use that as the boundary for your mobile web pages. This allows users the ability to quickly move around a web page and provides a more engaging experience. Also, since your web pages will be smaller, the user has the opportunity to enjoy faster download speeds.
