5 Tips to Create a Performance Optimized Front-End for Your Website
Website development has come a long way in the past decade. Ten years ago there were only a limited number of references regarding how websites should be built, and many open questions, such as: Which tools should be used? Where should websites be deployed? What is “deployment”? What are my hosting options? How do I manage different website versions?
Resources that did exist were generally not very specific or mature enough to list best practices. Back then, if you wanted to build a website, there were no ready-made templates. You not only had to find a site, but try to decipher its HTML template, and then copy it, along with its distinct script, which was generally large and not easy to work with.
The Evolution of Website Development
The evolution of website development has changed our standards, making previously acceptable occurrences a thing of the past. Large search engines, such as Google and Yahoo! favor websites that provide optimized user experiences. Companies have started to notice that users have a very short attention span, so if you have a large site that provides a service or sells goods, users will not wait long for it to load, they will simply go to another site that is faster and offers a better user experience. In a recent study, Walmart actually found a very significant correlation between site speed and their sales. Every second of improved speed resulted in a 2% better conversion rate. Clearly, sites that are fast and performance oriented provide much better user experiences, which is what users want and what all companies advocate. While your site may be passable for now, embracing the more recent changes in web development and trying to shift your focus to enhancing user experience is the way of the future.
How to Make Your Website Performance Orientated
Today, while there are many resources that focus on making sites performance oriented, the process is still far from trivial. A lot of tools are being developed to make it easy to create performance oriented websites. These tools can range from ready-made templates that have been "battle-tested" to tools that take existing frameworks or websites and update them to 2014. So, regardless of how advanced your code, HTML, or CSS writing skills are, these tools can make your site faster and ultimately, perform better.
This has been a recent discussion among big names, such as Paul Irish, who works at Google as a web front-end advocate. He speaks a lot about performance-oriented sites and how to make your site excel using Google Page Speed. There are many small nuances regarding how it can actually be done, but there are some simple, quick steps you can take in order to bump your site’s speed up in an instant. Nonetheless, utilizing the 80/20 rule is probably your best bet. This creates a situation where you're investing minimal efforts to produce maximum benefits, which is especially true in web development and performance-oriented sites. Having that in mind, you need to know where specific bottlenecks exist. For example, if none of your images are compressed and are too large to fit on your website, that should be your main focus for improvement.
Clearly there are many more aspects of web development that we can discuss, however, for now, we want to go over some general guidelines that will help you create a performance oriented site.
5 Guidelines for Creating a Performance Oriented Site
- Image Compression. Compress your pictures. If not optimized, your images could reach up to a few megabytes in size. This is important to remember because your users see a very limited sized picture format. Since technology today has dramatically improved over the years, you can compress your pictures without giving up quality. This is called lossless compression. The possibility of reaching 95% compression (or any compression) could save you a great deal of megabytes, drastically decrease the amount of time it takes your site to load as well as reduce bandwidth consumption. Recommended tool: Image Optim
- Web Browser Prefixes (CSS). Despite the fact that different browsers may not be compatible with your choice of code or CSS properties, there are many tools today, such as Autoprefixer, that can adjust your prefixes and properties according to your browsers of choice. All you have to do is specify which browsers you want to support.
- Preprocessors. If you are writing HTML, you know there is a lot of inefficiency in the open-close xml tags. Using a preprocessor will allow you to write in another language, such as Jade, and convert your code into HTML. So if you're not so great at writing HTML, but want its associated improved speed, Jade can convert whatever you write into proper HTML and even inform you of syntax errors. It’s much faster to develop websites using a preprocessor.
If you want to create a great website, you must have a performance-optimized front-end in mind. This will help you if you are planning on load testing your website or web application after development. The combination of using the guidelines mentioned above followed by load testing will help you make site-specific enhancements in order to optimize your website’s or web application’s performance.
Web developers can now run performance tests on BlazeMeter using Selenium scripts simulating thousands of virtual concurrent users, each emulating a real browser or application, using a mobile device on a mobile network. Learn more