How to Create a Fast Loading Website – Part – 1
Author : TechAffinity 15th May 2017
The loading speed of the website is one of the most important factors which decide user conversions. Bringing a user to the website is not an easy task but then to scare him away with a slow website is a sin. The idea is to develop a fast loading website without compromising on the quality and content. Now let us look at various measures for website speed optimization.
Do Mobile First
Around 85% of internet users in the USA are mobile users. They use their smartphones to access your website. That being the case, why develop and optimize a website for desktop first. Instead, design and develop your website for mobile first. Forget using media queries now and focus on the mobile screen size. Your design should be fully focused on mobile screen size and capabilities. People use their 3G/4G network to access websites in their mobile and so a low bandwidth site will do the trick here. Use images of lower dimensions for the mobile first design. Once fully developed, you can use media queries to customize the website for laptops.
Use Benchmarking testing for speed optimization
Once you are done with the website development and testing the next important thing to do is optimization testing. There are 100s of tools available online for testing the performance of your website. One such useful tool is Google Lighthouse. This is a Chrome plugin with which you can test your website for various scenarios and devices. It gives out a detailed report and optimization tips on your web design. Another user interface tool provided by Google is PageSpeed Insights. You just have to input your URL and it will analyze the site and provided speed ranking and suggestions for improvement. Get addicted to these tools and try to get a good score to improve the load speed of the website.
Use a Preloader
No one likes to see images buffering at the time of using the website. You might have used an image to be shown on a mouse-house event. The image will be fetched only at that moment and it will cause a delay and a bad user experience. You can avoid this by preloading images and create a smoothly animated preloader for better user experience. Another important rule to follow is to have Javascript at the footer of your site. Importing Javascript from external libraries is a common practice and it should not block the rendering of the HTML. If required you can also prefetch the javascript upfront. Once the Javascript is preloaded all further calls to it won’t go out to the network thus saving a lot delay.
Reduce the Number of HTTP Requests
According to KISSmetrics, 47% of the users expect a website to load fully within 2 seconds. This can only be achieved if you minimize the number of outgoing HTTP requests. The browser needs to download a different kind of files like HTML, Javascript, stylesheets, images, etc. To start with you need to understand how many HTTP requests your site makes. You can find this using the Google Chrome’s Network Panel. It will list out all the files that are downloaded for each visit. Things to do to minimize HTTP requests are
- Remove unnecessary images
- Make JavaScript asynchronous
- Combine CSS files
These are some of the basic things you should do to reduce the load speed of your website. We will be discussing more about website speed optimization tips in the second version of this article.