Performance
*This post is the 500-word paper to go along with my in-class presentation on Performance*
Improving site speed on the front end is something that every designer should be concerned about. The reality is that the graphic part of our design – namely, images – along with unnecessary file downloads, large text-based assets and loading webfonts all contribute to a large amount of load time for our sites.
Eliminating any unnecessary downloads is the first step at improving front-end site speed. First, streamline the number of elements when you’re designing. There’s always going to be a cost and reward for interactive elements, so you should always be asking yourself if the benefit of an element outweighs any performance concerns there may be. Secondly, reduce downloads by using CSS instead of images whenever you can. That means creating shapes, graphic elements, shadows and gradients with code instead of images. When working with plugins, combine multiple stylesheets into one file to prevent the browser from having to call multiple files for relatively small amounts of code. Lastly, avoid using multiple hostnames on your site or redirects, since these will always increase load time.
To optimize text-based assets, first remove any code you’re not actively using. That means removing unused selectors from your CSS files and deleting large amounts of commented out HTML or JavaScript. When coding, follow the “golden rule” be DRY – or don’t repeat yourself. Use the smallest amount of selectors you can to achieve your design goals. Minify your code to reduce white space and carriage returns which can contribute to larger file sizes. Lastly, order your componenets correctly so things that take longer to load are downloaded last – so that means put your content first, CSS and JS second and other dynamic features last.
Optimizing images is a topic that could take up an entire presentation in itself. To quickly touch on the most important points, reducing the number of images you are loading is the most impactful thing you can do to increase performance. That means determining which images are really necessary for your design, using CSS effects of web fonts instead if you can, and also utilizing sprites instead of separate image files. Secondly, know the correct type of image for your purpose. If you’re using a vector file, be sure to minify it. For raster images, reduce bit-depth if the image will allow it and know how to use lossy and lossless compression to your advantage. Lastly, ALWAYS scale your images to their display size before uploading them to your server. Don’t upload a 1000px x 1000px image if you only need to display at 300 x 300 – those extra pixels only mean extra file size and there’s no benefit to your design to call the larger version.
The last step you can take to improve site speed on the front end is optimize your web fonts. First, you need to have a good understanding of which browsers call which types of font files, and ensure you load them in your CSS file in the right order. When using @font-face, include only the number of font variants you are actually using on your site. There’s no need to load 16 font variants if you are only using two – again – more files equals more load time. Lastly, while not completely supported yet, read up on CSS Font Loading and determine if it can help your load times for your particular project.
By addressing these areas, you should be able to significantly impact your site’s load times and reduce any delays for your users.
Other Sources:
A List Apart – Improving UX Through Front End Performance
The Daily Egg – 10 Ways to Speed Up Your Website
Mozilla Developer Network – Tips for Authoring Fast-Loading HTML Pages