Learn it fast with expert-taught software and skills training at lynda.com. See what you can learn

By Chris Converse | Thursday, August 14, 2014

Improve Website Performance on Mobile Devices

2014_08_14_slashHTTPone

When considering user experience for mobile, speed of download is a huge factor. People are typically using a cellular data plan when browsing on phones, and website performance is rarely optimal under these circumstances.

One factor in a web page’s download speed is the number of external file requests the HTML page needs. This includes CSS files (style sheets), JavaScripts, images, audio and video, applets, online feeds and services, and well … you get the idea.

Here are some techniques for reducing the number of times your web page needs to go back to the server to “ask for more” files.

Create sprite sheets for images

One website performance optimization technique for images is to combine multiple images into one larger image. This is especially efficient for small graphics, such as interface tools, social media buttons, and icons.

The idea is to combine all of these images into a single, larger image, and reference that same image in multiple HTML elements throughout your site.

Combining many small graphics into a single sprite sheet will significantly reduce the number of HTTP calls in your page.

In order to make use of a sprite sheet, CSS is used to reference and “crop” the graphic into specific HTML elements. CSS classes are assigned to HTML elements, and those classes are defined to give the HTML elements specific dimensions, and position the sprite sheet in order to show only a portion of the graphic within the HTML element.

The CSS properties assigned to the HTML element provide dimension for the element, as well as the positioning for the sprite sheet.

The CSS properties assigned to the HTML element provide dimension for the element, as well as the positioning for the sprite sheet.

Watch a video:

Learn to combine a sprite sheet with HTML and CSS.

Consolidate JavaScript files

Many times there are multiple JavaScript files used in a web page. These can include frameworks, such as jQuery, Modernizr, Backbone, Angular, etc., as well as your custom scripts. While many of these frameworks are designed to be small in file size, they each require an individual HTTP request–which will affect website performance.

One solution is to combine scripts together into a single script. For example, I use Modernizr to detect a few browser features, such as touch events, local storage, and SVG support. After creating a custom script on their website, the resulting code is four lines of code that wraps to about 16 lines.

With such a small amount of code, I will typically add this code to the top of my custom JavaScript file. This ensures the Modernizr script runs before my scripts, and I can make use of that library in the same file.

Combine JavaScripts together to reduce the number of HTTP requests needed for your scripts.

Combine JavaScripts together to reduce the number of HTTP requests needed for your scripts.

While the example above represents a manual way of combining your JavaScript files, there are other server-side scripts and online services that can combine your scripts automatically.

Check out some of these tools and resources:

Rocket Loader by CloudFlare

Minify by Google

JS & CSS Optimizer for WordPress

Use SVG graphics inline or as a sprite sheet

When using SVG images, it is possible to put the code of the SVG right in the HTML file. This has a few advantages.

One advantage is that there is no additional HTTP requests for SVG files inserted into the HTML.

Another is that inline SVG files can be styled with your external CSS rules, just as you style the other elements of your site.

Watch videos:

While inline SVG has advantages, there is one drawback if you reuse the same images on multiple pages. Since the code is “in” your HTML page, you do not get the advantage of your browser’s image caching.

This means the image code is being loaded on every page. So, if you are dynamically loading content into your mobile web experience, inline SVG can save you precious HTTP requests.

If you’re looking to use SVG for images used throughout your site, then consider creating a sprite sheet with SVG. This gives you all of the resolution independence you need for those high-definition mobile displays, without all the extra file size of double-sized bitmapped web graphics.

Check your site’s HTTP requests

Use this free online request checker to check the number of HTTP requests your website makes each time a page is loaded.

For more tips on building lean, mean websites that perform well, be sure to check out my Web courses on lynda.com, including Design the Web: SVG Rollovers with CSS.

 

Learn it from the experts.

With online video courses at lynda.com, you can reach your goals faster. Learn software, improve your skills, and get an inside look at how the professionals work.

See what you can learn


Share this article:

Tags: , , , , , ,

Get the latest news

  •   New course releases
  •   Pro tips and tricks
  •   News and updates
  
New releases submit clicked

You can change your email preferences at any time. We will never sell your email. More info

Featured articles

A lynda.com membership includes:

Unlimited access to thousands of courses in our library
Certificates of completion
New courses added every week (almost every day!)
Course history to track your progress
Downloadable practice files
Playlists and bookmarks to organize your learning
Become a member

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.