Chris Converse |
Thursday, August 14, 2014
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.
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.
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.
Watch a video:
Learn to combine a sprite sheet with HTML and CSS.
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.
Check out some of these tools and resources:
Rocket Loader by CloudFlare
Minify by Google
JS & CSS Optimizer for WordPress
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.
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.
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.
Check out these popular Web courses.
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:
Keep up with news, tips, and latest courses with emails from lynda.com.
We've updated our terms and conditions (now called terms of service).Go Review and accept our updated terms of service.