Web design workflow includes several separate segments that are necessary to complete in order to get a quality product (website).

Starting from contacting the client, determining project objectives, research, finding inspiration, planning, UX design, a wireframe and prototype design, mockup design, development, providing good performance and website loading speed, testing and launch.

The factor about which we will talk in detail today and that can’t be ignored is the website speed and performance optimization. We will explain the significance of website loading speed for the success of web projects, provide advices and recommendations to be followed in order to have good performances and we will share with you some useful tools and resources that will help you achieve this.

Why is website loading speed important?

The answer is simple – loading speed affects the ranking of your website on search engines. In 2010, Google announced that the page speed was included in the ranking factors, and therefore this is an important factor for SEO. Website loading speed affects the speed of indexing pages and number of visitors. Slow websites lead to low conversion rates, which are crucial for the success of any online business.

If we consider the predictions that shows that mobile search will soon exceed desktop search, and in some areas already is, the loading speed on mobile devices is an indispensable factor if you want to remain competitive.

How to speed up website?

Speeding up website can often be a demanding job that requires detailed planning, knowledge of different areas, adequate resources, with the greatest focus on testing and evaluation. It often happens that in this segment cooperate several teams: such as web developers, system administrators, network specialists and other professionals.

Below we will present a checklist of things which you should pay attention before releasing a website on the global network:

  • Provide high-quality servers – Speed and server response time are the first parameter on which you should pay attention before launching a website. A solution that offers the best performance are CDN networks which consists of servers in multiple locations. The nearest server that can answer, is activated automatically and delivers content to the visitor. In addition to CDN there are many hosting solutions that offer great performance. Explore, test and select the option that best fits the needs of your website.
  • Reduce the number of HTTP requests – Each script, stylesheets, image.., represent an individual HTTP request. Most of the page load time is spent on downloading individual components. During the web development we should do our best to minimize number of HTTP requests. The following five points are techniques you can use to reduce the number of HTTP requests:
  • Combine CSS and JavaScript files – By combining multiple scripts or styleseets you can significantly reduce the number of HTTP requests.
  • CSS sprites – a technique that allows you to reduce the number of image requests, combining multiple images into one.
  • Be careful with the iFrame elements – iFrame allows you to display a new HTML document within the main element. This means that we have a new HTTP request to be executed. Frames can be very useful, but we should try to minimize their number and ensure that elements within are maximally optimized.
  • Avoid empty image src elements – each empty image element can be considered as additional unnecessary HTTP request.
  • Maintain optimum number of photos on a website – every picture is one HTTP request. Make sure that all web pages have the optimal number of images and that they are properly used in the code.
  • Select the appropriate image format – use JPEG for photographs and true-color images, GIF for images with flat colors and PNG format in situations when it is necessary.
  • Reduce the size of web pages – make sure that the final size of the HTML file that is loaded in the browser to be as small as possible. Use the following techniques:
  • Image compression – images are element that can use the most memory (amount of data). Before calling images in the code do their compression. There are several different ways to do this, and one of the fastest and most effective is by using Adobe Fireforks software. Graphic format that is most suitable for the web is JPEG – it provides the best balance between quality and data that takes up. If you use Fireforks select the option – JPG Better Quality.
  • Reduce image colors – Image files will be smaller with fewer colors.
  • Don’t scale the images in HTML – do not use rules that will influence the changes in dimensions of the image and its scaling. If you use the height and width attributes, then actual dimensions of the image should match with them.
  • Adjust a favicon – Browser always checking if there is a favicon, whether you have it or don’t. Create a favicon, which will have the small size and adjust Set Expires header to the period which you think that is optimal in accordance with the frequency of updates of your web site.
  • Gzip compression – a very effective way to reduce the file size up to 70%. More information about Gzip compression methods can be found in the “Resources” at the bottom of this post.
  • Minimize the files – HTML, CSS and JavaScript compression (minification) removes the empty space between the pieces of code on the page, thus reducing the overall size of the code.
  • Put CSS on top – putting the CSS in the head part of the document we achieving that styles is loaded firstly, improving the speed of loading and user experience because users will see progress in loading.
  • Put the script at the bottom – script downloading blocks all other downloads. The aim of putting scripts at the bottom is that other components are being loaded before the scripts. Sometimes it may not be possible to put all the scripts at the bottom, for example, if a load of some part of the page depends on script or script needs to be loaded before loading the document (document.write function).
  • Use external JavaScript and CSS files – putting scripts and CSS in external files allows that they can be cached by the browser. If you use inline styles they are loaded every time you web page loads.
  • Remove HTML comments from the code – even if the comments are useful for easier maintenance they affect speed of loading pages.
  • Remove any items that are not of vital importance – if there are elements on the page which aim is to prove your design skills, we suggest to remove them. Focus on simplicity and the better user experience.
  • Enable caching – Use the Expire header to define how long you should hold a particular component in cash. Visitors who return to the site will enjoy in much higher loading speed.
  • Avoid nested full page tables – tables that are nested or occupy the whole page will require a longer time to load.
  • Check the links – incorrect links can affect the slower page loading. This applies only for the links to images, CSS and JavaScript files. Broken links in the text will not negatively affect the the speed of loading, but they are certainly bad for the site.
  • Be careful with CSS expressions – if you use CSS expressions to dynamically define some page properties this can slow down code execution. The solution is to use one-time expressions.
  • Clean code – code has to be perfect, without the use of unnecessary elements that will slow down the page. You should also pay attention to the efficiency of the code writing (especially JavaScript). Remove unnecessary classes and selectors from CSS. Some useful tools you can see in the section “Resources”.
  • Reduce the number of DNS lookups – Each unique host name on page requires DNS lockup, so be aware of the number of different host names in your scripts, objects, images and other components.
  • Avoid redirection – Redirects are not good for users, because they will have to wait to browser find a new page.
  • Use ETags – some servers such as Apache have automatic support for ETags that facilitate caching, if you use them correctly. If ETags aren’t properly configured they can slow down your site. ETags are method that servers and browsers are using to determine whether a component in browser cash corresponds with the real version.
  • Define the character set – defining character set in HTML documents allow browsers to automatically start the parsing HTML and execute scripts.
  • Use icon fonts – icon fonts are extremely useful option because they allow you to use different types of vector graphics using a single file. A good example is the Font Awesome.
  • Optimize database – a large number of sites uses a database, and if it comes to complex sites, the database can significantly affect the performance of the site. The solution for better performance is to add the index to the database tables. In this way, we obtain the faster database response, which leads to the higher website loading speed.

Tools for better web performance

Tools and resources for better web performance

  • Adobe Fireforks – software for optimizing graphics for the Web.
  • PageSpeed Insights (by Google) – browser extension, available for Chrome and Firefox that allows you to get performance data of your site and suggestions for how to improve them. Works as part of the developer tools.
  • YSlow – a tool for analyzing web pages, based on Yahoo rules for achieving high website performance.
  • JSLint – a tool for checking the quality of JavaScript code that will automatically notify you which parts of the code needs to be improved. JSLint is the best described by a sentence that stands on its site “Warning: JSLint will hurt your feelings.”
  • Favicon Generator – A tool for generating optimized favicon files.
  • Refresh-SF – Online Javascript and CSS compressor to minimize file size.
  • PageSpeed Module – Google’s open source module for the web servers that automatically applies the recommended rules for web performance to web pages and related assets (CSS, JavaScript, images) without changing your existing workflow and content.

Web Performance Resources

  • Google developer network – a resource where you can find tools and instructions on how to make the web faster. You have the option to test the performance of your site and get page speed insights for desktop and mobile version. The analysis shows which rules your site fulfills and whether there is room for improvement.
  • Yahoo developer network – list of tips and tricks from experienced developers on how to make websites faster. List consists of 35 advices divided into seven categories for better overview.
  • Optimizing performance – part of Google’s “Web Fundamentals” tutorial that explains all the important segments that affect the website speed and UX.
  • CSS sprites – what are CSS sprites, why and how they are used.
  • Gzip compression – how to enable gzip compression on different servers.
  • Expire headers – how to adjust caching via .htaccess file.
  • Speeding up your website’s database – Smashing Magazine article about speeding up the database performance.

Conclusion

Whether you’re creating a new site from scratch or it’s already online, you can follow our checklist and use tools and resources provided in order to increase web performance to the high level. The time you invest in the improvement of this segment in combination with all other elements of web design workflow, will pay off and bring you a good online results.

Jovan Ivezic

E-business and internet marketing specialist.