Share

LinkedIn

A Front-End Checklist for Delivering the Speediest Sites in Sitecore

“Every single kilobyte counts.” At Aware, that’s the mantra of the front-end team when we hand over our hand-crafted assets to the back-end team for implementation into Sitecore.

Even in our post-dial-up era, not everyone has the high speed access or the unlimited data plans to which we tech merchants may have become accustomed. And attention spans are dwindling. Some companies are able to tie increased conversion rates to each half-second they can chop off their site’s load time. So save your users data, time, and patience with this quick list of byte-crunching tactics:

  • Minify and bundle all CSS and Javascript
    The obvious benefits here are to reduce file size and server calls by delivering one bundled chunk of compressed code rather than multiple links to bloated files. Minification can be done manually with tools like Yahoo’s YUI Compressor, but ideally you would automate this process for Sitecore using a .NET process to minify and bundle your files upon deployment. The only real downfall to minification is that it makes your previously ultra-organized code look like an endless string of randomly generated characters, so you better have a well-established process involving source control to easily maintain your pre-minified code for updates and enhancements later – otherwise one sloppy move could turn future updates into a cryptologic nightmare. 

    • In our experience, the process of minification can save anywhere from 30-60% file size depending on how the original code is written.
    • The uncompressed standard version of JQuery is now nearly 300KB. Minified it’s almost three times smaller at 100KB.
  • Compress all Imagery
    This seems obvious because image files are generally the main cause for bloat. But it’s also not the easiest problem to solve. While Sitecore does a good job of renditioning images for optimal sizing based on page real estate, it doesn’t necessarily do the best job at minifying the actual file size. Experienced content editors with the right photo editing tools can optimize images for the web individually, but we like to use web services like the Yahoo Smush.it tool to optimize file size in bulk without affecting image quality. Some tools provide APIs that can be leveraged by Sitecore to automate the process, but who knows how long these tools will be supported? Regardless of how you get it done, do it every time. 

    • In practice, we’ve seen optimization shave 5-40% off the size of each image.
  • Enable Gzip on your server 
    Even minified content can be minified! Modern web browsers automatically support Gzip compression, and most web servers just need to be enabled and configured to compress the appropriate content. Doing this is easier than you think. The HTML5 Boilerplate project offers sample configuration files for each configuration flag and setting, all you need is someone to do it.

    • Netflix saw a 43% decrease in their bandwidth bill after turning on GZip.

  • Forget easy content management, use sprite images
    Sprite images are awesome because they can reduce the number of server calls from 50 to 1 by utilizing a single image to load all the icons and arrows your site requires. Then we just mask and display the right portion of that image using CSS. The problem is that sprite images are not easily content managed within Sitecore. But this is one instance where the benefits of the speedier page load definitely outweigh the benefits of certain aspects of content management. 

  • OR, use Font Awesome via CDN
    If your project can get away with simple standard icons instead of fancy, custom icons, a glyph/icon font library may be an even better solution than using a sprite, especially if you use a free Content Delivery Network to host and serve-up the files. Sometimes relying on an outside delivery service can be nerve-wracking, so test the performance between hosting the files in your Sitecore environment versus using the CDN. 

  • In fact, use a CDN for lots of things
    Javascript libraries, plugins, frameworks, web fonts, and other elements that generally require external links all have popular CDN services that will serve up that code – for free. Just make sure you always have a back-up connection to a local version in the rare case of a CDN outage.

  • Minimize 3rd party plugins
    Sure, plugins save a lot of time when it comes to up front development and testing, but are you really sure you need it for all of those features? Evaluate the necessity of every plugin with these critical questions:


    • Do you need all of its bells and whistles or just one minor function?
    • How complicated is the feature? Can you code it with relative ease?
    • If you use the feature a lot across projects. Can you make your own plugin, giving you an advantage on future projects?
    • Is the trouble/time of customizing the 3rd-party plugin the same or greater than if you were to just build it yourself?
    • Does the plugin itself have other dependencies?
    • Is the feature good for the user experience? 
    • How does the feature work on mobile devices?
    • What is the true size of everything required in the plugin? That means the total weight of the Javascript, CSS, and imagery combined.
    • If you have an expert to advise you, the resulting benefit could mean the difference between a feature-packed 500KB plugin and 15KB of script.

    • Use CSS3, and embrace graceful degradation
      Modern browsers can render shadows, gradients, transparencies, rounded corners, and more with simple CSS. Don’t even bother coding a fallback for IE8. If a missing dropshadow for 2% of your users really affects your layout that drastically, then maybe you should re-evaluate your layout. Even angles and some arrows can be generated easily with CSS. The best visual embellishments are the ones that don’t require the browser to load and display an extra image.

    • And lastly, write clean HTML

      Every little bit helps.

      • No inline styles or Javascript!
      • Use tabs instead of spaces to indent elements for easier tracking to save bytes (1 tab vs 4 spaces is technically ¼ the size!). 
      • Plan out the HTML and use the fewest elements as possible.
      • Encourage the use of pseudo classes for design elements.
      • Use fewer IDs and take advantage of modular classes and the cascade.
      • Comment only the opening and closing of important sections.
      • Take advantage of data attributes when needed.
      • Be consistent. 
      • Create and follow specific standards and patterns that are used within your company. 
      • Limit embedded fonts to a maximum of two files.
      • Avoid tactics that may speed up content delivery, but ultimately make your CSS file unmanageable (base64 data URIs, for example).
      • And finally, always validate your HTML.

    We could also go into tactics for writing the most efficient CSS and Javascript when it comes to naming, labeling, formatting, and more, but the general goal is to find a balance between speed and ease of future maintenance. And remember, every single kilobyte counts.

    This post was co-authored by Justin Herrera, Senior Front-End Developer at Aware Web Solutions.

designing for content management system, website design layout, website usability

Comments

Add a Comment

*
*

Please confirm you are human by typing the text you see in this image: