Mobile Website Optimization – How to Make Them Faster

A recent study, published by Keynote, the Internet and mobile cloud monitor software, has found that over 80% of the survey’s participants are disappointed by the performance of mobile devices when it comes to browsing. The survey shows that the use of smartphones would’ve been greatly increased if the browsing experience was improved.

The study shows that the Web page slow to load” is the top frustration, and that 6 out of 10 tablet users want a sub-three second download. Keep in mind that the top activities for tablets are to read news and entertainment, search for information and watch videos. Having a fast website means getting rid of all that’s not the focus of your experience. If you can do without it, do without it.

How One AI-Driven Media Platform Cut EBS Costs for AWS ASGs by 48%

How One AI-Driven Media Platform Cut EBS Costs for AWS ASGs by 48%
A person using a smartphone displaying the Facebook login screen with a keyboard shown.
Image source

The three basic tips on reducing the loading time would be:

  • Reduce the dependencies
  • Reduce the image dimensions
  • Reduce the client-side processing

Reduce the dependencies

The less the downloads, the less the HTTP requests. Try these tips for size:

  • Load images as background images in CSS and use media quarites to conditionally hide tham.
  • Combine style sheets into a single file and reduce the number of HTTP requests, or use inline styles, which results in a single additional HTTP request to download all page styles.
  • Use CSS3, such as rounded corners, drop shadows, gradient fills, and so on — these styling features can be used instead of images, reducing the number of HTTP requests and speeding up loading time.
  • Use image sprites. The basic idea is to combine commonly used images into a single image, reducing the number of HTTP requests. The required image is then beind displayed by using the CSS.
User interface elements from Amazon,including logos,shopping cart icons,star ratings,and notification icons.

One of Amazon mobile sprites. Image source

  • Use font icons instead of images; by combining multiple icons into a single Web font, the number of HTTP requests for all icons can be reduced to one. Also, font icons can be animated using CSS3 keyframe animation, which is handy for “loading” icons, the only downside of CSS sprites is that they can only be in one solid color.
  • Avoid inline frames. Each iframe results in a HTTP request, in addition to any of it’s dependencies. Having a single iframe adds 0.2 seconds to the loading time. If you want a fast website, iframes are not the way to go.
  • Code for mobile-first. Start by coding for mobile users first and then move up to tablets and desktops. Reduce any unnecessary dependencies. Compare it the desktp coding first.
  • Separate mobile websites. Keep your key content on the page, while linking the secondary content, reducing the HTML requests and preventing any associated dependencies from being downloaded. Amazon’s content split method saved them 45 KB size of HTML. Keep your redirects to a minimum. Amazon’s single redirect results a 0.4 second delay. Dell’s website has two redirects, which result in a 1.2 second delay.

Reduce the image dimensions

Simply use responsive images.

The basic idea is to have the vistor download only those images that are best sited to their device. Lower-resolution images are the best bet for smartphones, which are quickly downloaded and rendered. JavaScript is used to detect the device’s screen size, which is written to a cookie. For large screen sizes, JavaScript swaps the smaller image with the higher-resolution image.

The main benefits of these responsive-image techniques are:

  • small screens download low-resolution images, while large screens download high-resolution images
  • only the required images are downloaded, while unneeded images aren’t loaded in the background, reducing the “load” time of your site

Reduce the client-side processing

Keep JavaScript to a minimum. For instance, Starbucks’ website takes 3.53 seconds to load via Chrome with JavaScript disabled on a solid breadband connection on desktop. With JavaScript enabled, it takes 4.73 seconds, which is a 34% increase. The loading time would’ve been greater on a smartphone due to the devices’s smaller CPU, memory and cashe. The moral of the story: keep the JavaScript to a minimum, or don’t use it at all. Before using a JavaScript framework, consider whether it’s really necessary. In some cases, using small bits of JavaScript is more efficient than initiating calls to a framework.

Avoid widgets. What is a “Web Widget“? A web widget is a small helpful software program embedded directly into a web page, it just occupies a portion of a webpage and does something useful with information fetched from other websites and displayed in place. Widgets can have a horrible impact on real loading time, causing an average 0.9 second delay.

Don’t forget to test your website on multiple devices. A fast load time on any given android or mobile device is the ultimate green light for your website load time efficiency.

If you want to have a satisfied mobile-deviced user base, optimize your website to a 4 second load time or less. You can do that by minimizing the processing load on smartphones which means cutting down on JavaScript and optimizing the HTML, CSS and images.

Read detailed how-to with examples on SmashingMagazine.

Banner promoting GlobalDots with a focus on improving mobile website performance.

Latest Articles

How Optimizing Kafka Can Save Costs of the Whole System

Kafka is no longer exclusively the domain of high-velocity Big Data use cases. Today, it is utilized on by workloads and companies of all sizes, supporting asynchronous communication between even small groups of microservices.  But this expanded usage has led to problems with cost creep that threaten many companies’ bottom lines. And due to the […]

29th September, 2024
Migrating Volumez RedHat VMs into Amazon Linux 2 for higher effective discounts rate of Saving Plan

A cloud data infrastructure company relied on extensive use of multiple instance types to test its products. But this made it difficult to optimize costs – a fact which had begun to impact their ability to scale the business.   The GlobalDots team helped the company identify and implement a new infrastructure configuration that both saved […]

19th September, 2024
How Yuki Achieved SOC 2 Compliance 6x Faster

Overview A fast-growing Snowflake optimization platform was missing out on customers because they didn’t have the right data security compliance. Through multiple consultations and extensive vendor-testing, the GlobalDots team selected a solution to provide both tech and human support, helping the company achieve SOC 2 compliance within just 3 months – and win new customers […]

16th September, 2024
Agile Content partners with GlobalDots to revolutionize CDN management ahead of IBC 2024

New partnership between Agile Content and GlobalDots promises to introduce automated multi-CDN solutions, optimizing content delivery and easing provider management for broadcasters worldwide. Amsterdam, Netherlands, September 9th, 2024 – Agile Content, a leading provider of digital TV and video distribution solutions, proudly announces its strategic partnership with GlobalDots, a global leader in cloud performance optimization and […]

Miguel Fersen Director for Iberia and LATAM, GlobalDots
12th September, 2024

Unlock Your Cloud Potential

Schedule a call with our experts. Discover new technology and get recommendations to improve your performance.

    GlobalDots' industry expertise proactively addressed structural inefficiencies that would have otherwise hindered our success. Their laser focus is why I would recommend them as a partner to other companies

    Marco Kaiser
    Marco Kaiser

    CTO

    Legal Services

    GlobalDots has helped us to scale up our innovative capabilities, and in significantly improving our service provided to our clients

    Antonio Ostuni
    Antonio Ostuni

    CIO

    IT Services

    It's common for 3rd parties to work with a limited number of vendors - GlobalDots and its multi-vendor approach is different. Thanks to GlobalDots vendors umbrella, the hybrid-cloud migration was exceedingly smooth

    Motti Shpirer
    Motti Shpirer

    VP of Infrastructure & Technology

    Advertising Services