×

Most digital publishers rely on some kind of app that can be downloaded to optimize the experience of viewing content. However, users have their reasons for not downloading an app but instead preferring to browse the website. Such reasons include memory limitations on the device, not wanting to clutter their device screen with another app, privacy and security concerns, or simply not knowing or remembering that there is an app.

Therefore, media companies need to provide their users with dual experiences both through the web and through dedicated apps.

Rigor’s testing has revealed a sharp difference between how retail and eCommerce mobile websites are constructed and how media sites are built. Retail sites tend to be smaller in size due to more efficient programming, but media sites tend to be bloated. The average for retail sites is 1.5-2MB per page with around 70 requests. Mobile media sites range between 3 and 5MB in size with at least 150 requests, but consistently go up to as many as 400 requests.

All of those requests and megabytes downloaded add up over time. Mobile website page speed is money. What is still too often forgotten is that people consume website content on mobile devices with comparatively lower bandwidth as compared to desktops connected to high-speed Internet. For digital publishers, this is a huge deal. Mobile users like to take their TV shows, movies, and sports coverage with them on long commutes, while waiting in line, or during other leisure activities. It’s no surprise that they want to access their media quickly. Slogging through an inefficient interface on their way to stream their next episode of the show they’re eye guzzling isn’t a great user experience on a variable-speed mobile connection.

Mobile users have short attention spans. Most mobile users will wait only 6 seconds before tapping away from a slow-loading site.

Problems reported by mobile media website users include:

  • websites that are slow to load
  • websites that crash, are prone to errors, or freeze
  • websites with formatting that is difficult to read and navigate on small screens
  • websites that never load at all due to network timeout issues

A single second added to the page load time can result in a 7% drop in conversions. Over time that can add up to millions of dollars for media organizations that do business on the order of six figures per day.

Here are five of the most effective, yet easy-to-implement tips for front-end developers at media companies to decrease page load times.

1. Optimize Images

Images with large file sizes obviously take up more bandwidth than smaller ones. The same goes for images that are scaled to a single larger dimension rather than scaled and saved to dimensions meant for varying sizes of screens.

It’s surprising, though, how often this performance drain can go unnoticed or be put on the backburner while pressure to meet a launch deadline looms. “It worked on my device” is not an excuse mobile site customers will accept from front-end developers.

But, there’s more to image optimization than simply reducing the file size and re-uploading the image file. For mobile devices, creative should be done in vector or text-based formats.

Vector images are inherently smaller because they are mathematical descriptions of shapes and lines as opposed to the heftier bytecode required to display a raster image. In general, they look very nice on mobile devices with advanced display technologies that have high pixel counts, like Apple’s Retina or the new oLED displays.

vector images digital publishers

An illustration of the difference between vector and raster/bitmap images. Vector images can also be compressed more efficiently than raster images.

vector image code

Vector image code for an SVG graphic. It’s easily minified and compressible!

raster bytecode for a jpeg

Raster image bytecode for a JPEG file is bulky and mostly as compact as it will get.

But, do you really need a JPEG or a vector file to achieve that special gradient effect or icon? Sometimes, optimizing images can be a choice of not using an image at all. That’s where CSS3 effects can save the day. Here’s an example of much more compact and efficient CSS3 gradient code.

 

css gradient effect

An example of a gradient effect produced using CSS instead of a raster or vector graphic. This was generated using ColorZilla.com’s free gradient editor.

CSS can also be used to generate some basic, but useful shapes.

For icons, indicators, and other UI features that need to be displayed graphically, use FontAwesome icons. They are lightweight, font-based representations of everyday symbols and wayfinding graphics that load quickly.

Need to achieve a nice fade effect? Use jQuery for that.

 

If these bits of code all seem overwhelming, you can download and install in seconds an already-written library of code called Animate.css and improve on it using another library called Wow. Both are very easy to use, requiring just a few lines of code to install on a page and calling simple keywords within your HTML.

2. Prioritize Above the Fold Content

Google’s Page Speed Insights team has published a comprehensive guide to improving mobile web page load time.

For example, if your mobile page scrolls, be sure to structure your HTML so that the content that is above the fold renders first. Send the code that is critical to building the first part of the page and delay the rest.

For example, wait to load third-party widgets. If your site has a two-column layout, with a sidebar and an article, load the article first.

3. Reduce Data Usage

Your users will appreciate you if you ease up on their data plan with your mobile web page. While there’s not much you can do to reduce the data usage for the streaming media they’re after, you can “minify” HTML, CSS, and JavaScript by removing whitespace and comments or using minify tools that rename variables to something shorter. Both Animate.css and Wow.css, mentioned earlier, come in minified format.

Even though this article is about front-end techniques, you still need to consider how data is flowing to the front-end from the server. Compressing your HTML, CSS, and JavaScript via gzip is a true bandwidth saver and speed enhancer over mobile connections. On Apache, you have the mod_deflate module. If you’re hosted on the Nginx OS, you’d avail yourself of ngx_http_gzip_module. And, on IIS, configure HTTP Compression.

4. Switch to Asynchronous Scripting

Mobile developers use scripts from a variety of different providers. For example, Disqus is a popular comment management system that provides a script called embed.js to enable its service on your site. Twitter provides a widgets.js file as its gateway to adding its services to you pages.

There are two ways that JavaScript can load: synchronously or asynchronously.

  • Synchronous scripts make the user wait to see content until the full script loads.
  • Asynchronous scripts load the content in the foreground and the scripting in the background.

Most framework and helper scripts were originally written to be synchronous. Now vendors are providing more asynchronous scripting to reduce the load time on your pages. Be sure that whatever service you’re using provides an asynchronous version of their scripting.

5. Use Responsive Design Methods

Responsive design and development is the practice of building your pages so that they look great no matter what the screen size might be. For example, a website ought to be functional, beautiful, and load quickly whether being viewed on a stadium jumbotron, a conference room big screen TV, multiple desktop monitors, an iPad, or an iPhone.

Put simply, a developer uses the @media CSS rule to designate “breakpoints” in screen dimensions where one set of CSS rules and selectors gives way to others to ensure that the presentation “degrades” gracefully. It may also be necessary and desireable to cause certain elements of a page to completely disappear using CSS media query visibility rules like display:none or visibility:hidden.

Not only should your mobile media site perform well on varying screen sizes, but it has to load well in a variety of browsers. Any web developer will lament that the hardest part of their job is ensuring that a website will load on multiple versions of Chrome, Safari, Firefox, Opera, and a number of Android browsers.

As for Internet Explorer, Microsoft has officially ended support for all but Internet Explorer 11, which very likely is also slated to go out of support after Windows 10.

The company is, in a way, starting over with a brand new browser called Edge. What that means in terms of a better user experience, and fewer headaches for developers, is a matter of ongoing discussion and discovery. But, essentially, no longer will mobile media website developers have to contend with a myriad of  JavaScript polyfills, IE conditional comments, workarounds for CSS bugs, specific IE Render modes, and so-called “quirks mode triggers”.

In spite of Edge, mobile media site developers must still contend with the notorious Internet Explorer browser, which seems to break every web page, for some time to come. At least until attrition and better sense among mobile users prevail. That is because the mobile version of Internet Explorer still runs on many users’ aging phones until they upgrade to a new phone or install Edge.

6. Implement Ad Platforms Efficiently

Mobile advertisements are inevitable when it comes to providing additional revenue streams for mobile media companies. They have become a fact of life in underwriting the entertainment and news programming that mobile users increasingly consume.

A big problem with mobile advertising, however, is the fact that the ads increase the load time of the pages with their flashy, “look at me” presentations vying for attention. Users love to complain about the ads and so do developers, both for similar reasons.

For developers who have just achieved sub-one second page response times, only to have to add back precious milliseconds, it can be daunting to keep the bloat in check. Here are a few quick checklist items to remember when dealing with ad layouts.

Make things smaller. Ad agencies can reduce the number of round trips to the ad server through combining JavaScript and CSS files into one minified file, avoiding redirects, and showing only part of an ad while downloading the content.

Get Content Closer to the Users. Vendors and digital publishers can combine the number of domains from which ad components are delivered to avoid too many lookup requests. Reusing connections is another efficiency. They can also implement Content Delivery Networks (CDNs) to “park” or cache copies of frequently accessed ad content geographically closer to users requesting them.

Use Asynchronous Techniques. As with asynchronous scripting mentioned earlier, ads should be retrieved in the same manner, making ad content requests in parallel to other page content.

7. Test, Test, and Test Again

As content on your site changes and as the design evolves to meet new business requirements, it is imperative that you test page speed early and often.

Let’s say you get your mobile page load speed to 1 second on average. Everything is great and life goes forward because you’ve done your part at the template level. Design asks for a change in how the header looks and you quickly make those changes and head to lunch. But, how do you know the changes didn’t affect the page speed. Small adjustments can, if done hastily and incorrectly, have performance-impacting results that add up over time and over a volume of transactions.

Conclusion

There are a number of tools and techniques for improving mobile media website page load speeds. These include optimizing images or avoiding using them altogether, focusing on efficient rendering “above the fold”, reducing data usage through minification and compression, and using asynchronous scripting. The use of responsive design techniques, implementing ad platforms more efficiently, and continuous integration testing also contribute to a better mobile media experience.

Rigor is the first end-to-end web performance management platform for digital organizations. Our platform programmatically identifies, prioritizes and remediates the root causes of poor site performance and reliability. If you are interested in learning more click here to try free for two weeks.

Suggested Blog Posts

Mobile Banking a Top Priority for Financials

As mobile devices continue to play a more prominent role in our 21st century society, their usefulness has spread beyond the casual activities of technological enthusiasts. According to research conducted by FUNDtech, a rapidly growing number of ba...

Read More

The Perception Gap for Poor Web Performance

E-commerce is a growing source of revenue for many companies and businesses, as it continues to capture market-share from brick-and-mortar stores over recent years. However, many businesses are not prepared for this growth of online business becau...

Read More

Measuring Cross-Browser Performance

In recent years, client-side browsers have been more involved with processing code before it reaches the user's desktop, shifting away from a reliance on servers handling the bulk of this burden. Websites and applications now rely more on a user's br...

Read More

Using Browser Trends to Maintain a Better Site

Because of the multifarious nature of web clients today, it’s important to consider the usage statistics when designing, implementing, and managing your site. However, misconceptions often arise when determining what browsers to design for an...

Read More