Gilad Peleg is a Software Engineering Manager at BlazeMeter.

Become a JMeter and Continuous Testing Pro

Start Learning
Slack

Test Your Website Performance NOW!

arrow Please enter a URL with http(s)
Nov 18 2014

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 last few years have produced several narratives that brought about new perceptions in web design. While in the past, web designers were mainly made up of freelancers who took on small side jobs, larger companies quickly took the lead specializing in efficiency, image optimization, as well as bandwidth and internet accessibility enhancements. This new modern web trend forced web development to make huge improvements as well, such as advancements made to JavaScript (JS). While it was previously a very limited language that was ridiculed, JS has since become a leading, cutting-edge language and technology that is widely used today. Perhaps most notably, JavaScript was used to build the server development platform, Node.js. Other 'classic' languages, such as C++, have also been able to learn a great deal from JavaScript's stardom.

 

Learn how to load test AJAX/XHR enabled sites with JMeter

 

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 Prepare Your UI Vs. API Load Test

 

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

 

  1. Google Page Speed.  Know where you stand. You can do this with Google Page Speed, which details where you will benefit the most in terms of compressing your files in JavaScript, CSS, or even HTML, adding cache headers or manifests, or if your hosting is too slow. Check it out
  2. 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
  3. 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.
  4. 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.
  5. Templates (Best Practices). As opposed to the past, templates today can generate whatever your heart desires. You can even get an HTML5 template that has been battle-tested and recommended across the board. With a wide variety of templates, you have access to a great starting point for virtually any kind of website, from blogs to eCommerce. What's more, these templates have been created by developers using widely accepted best practices. As a result, they are great tools to learn the ins and outs of website development. These affect website performance - from how to write in JavaScript or CSS to using common tools that can aid in performance optimization. Two common templates include HTML5 Boilerplate and Yeoman (a project scaffolding engine).

 

Final Notes

 

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

 

 

     
arrow Please enter a URL with http(s)

You might also find these useful:

Interested in writing for our Blog?Send us a pitch!