The website loading speed: analysis and optimization tips

Perhaps you’ve noticed that you can open some sites quickly, and for others, you need to wait for the page to load. Sometimes it drags on so long that you just have to close the site before it opens all the way.
The load speed of the page affects not only the usability of the site but also its SEO promotion.
For example, the search engine Google generates more «light» sites because it helps the user to get the information they need as soon as possible. You know that time is money. Google knows it too. The load speed affects the site behavioral factors, including the bounce rate and depth of view. The faster your site loads, the better these figures will be.
The average load speed of the site (page) should not exceed 3 seconds, although it all depends on a particular page and its contents. The best option will be a speed around 2 seconds. But in any case, the faster the load speed of the site is, the better.
How to analyze the load speed of a website?
To determine the speed of the loading pages you can use PageSpeed Tools. With the help of this service, you can get a superficial analysis as well as tips and already optimized files (scripts, images, and styles of the CSS).
To a lot of people, the site loading speed is very important. To measure it, we recommend using the online service Pingdom Website Speed Test. Insert the URL of the page and click on the Settings. Remove the checkmark from «Save test and make it public» (save the result and make it public) and put a marker on the Amsterdam, Netherlands (average speed of the load site for the Europeans). Press «Test Now». The service will analyze the site and give you the result:
- Perf. grade – is almost the same as the index in the Page Speed.
- Requests - the number of browser requests to the server.
- Load time – the time it takes for the webpage to load.
- Page size – the «weight» of the page.
Then you can see the line «Your website is faster than 72% of all tested websites».
Below you will see which specific files of your site took the longest to load.
This analysis should be carried out several times for one page and you should calculate the mean value of the different times.
4 ways to increase the website loading speed
So what can be done to increase the load speed of the site?
1. Reduce the size of the webpages
Content that is too large slows downloading speed. By reducing the size of the webpages, you will automatically increase the load speed of the site. In addition, you will save money if the hosting provider charges you a fee for traffic.
To reduce the size of pages, use the data compression of the protocol HTTP. This reduces the size of the text resources, including elements of HTML, CSS and JavaScript, by 50% or more. The data compression in HTTP uses technologies like zip, gzip and others.
To reduce the size of the pages, ask your hosting provider or server administrator to include the data compression obtained from the HTPP option. Use one of the check compression services to asses the effect of the compression afterwords.
2. Lower the «weight» of the graphics
Often the graphics take up 80% or more of the total size of the pages. Therefore, it is important to optimize photos that are published. The following suggestions will help you reduce the size of the images by 50% or more:
- Publish photos in JPEG, avoid the PNG format. The JPEG format lets you compress the image a lot without losing its quality.
- Do not use the PNG format to ensure graphic transparency. The effect of the transparency is very nice, but not always functional.
- Correctly choose the level of quality of JPEG images. By reducing the image quality by 25-50%, you will notice almost no difference compared to the original image, while the «weight» of the image will reduce considerably.
- Clean the graphic files from the digital garbage. Different photo editors leave a lot of different data in the file, such as comments, working versions of the image, unused palettes, etc. This junk is not necessary to your readers. To clean the file, use the services Pngcrush, or Smush.it.
While reducing the «weight» of the image, try to keep the aesthetic appeal of the site. Users and search engines value more visually attractive resources.
3. Simplify the JavaScript code and CSS
The use of special means of simplifying the JavaScript code and CSS reduces the «weight» of the relevant elements better r than standard compression technologies, for example, gzip. The simplification services remove unnecessary elements from the code, and also reduce the function names.
To simplify the code of JavaScript and CSS elements, use a software or online services, for example, Online Javascript Compression Tool or Online JavaScript/CSS Compression.
4. Reduce the number of the browser requests
The more requests the reader’s browser sends when the page loads, the slower it loads. To reduce the loading time, you need to lower the requests from the visitor’s browser. This can be achieved by reducing the number of photos, files, JavaScript, extraneous resource codes and services, etc.
Have you ever wondered why the Google homepage looks so ascetic? Perhaps one of the reasons is the desire of the developers to increase its loading speed.
But if you have not reached the popularity of Google, having a blank webpage can upset your users. If the recommendation to remove everything unnecessary does not fit your needs, use the following tips to reduce the number of the requests from the browser:
- Allow browsers to cache the data. If your website pages are static, there is no need to make your visitors load their contents again. Ask your server administrator or hosting provider to include the option to cache the images, CSS and JavaScript files. To check the results, you can use the Redbot service or a similar service.
- Combine and compress CSS and JavaScript files. By combining these elements, you can greatly reduce the number of the browser requests. This method is suitable for static pages. To combine CSS and JavaScript files, use special services and software, for example, CakePHP.
- Combine small images into CSS image sprite. This is especially useful for resources where there are a lot of icons, buttons and other small images. Special services can combine them into one file, which is called CSS image sprite. Use the SpriteMe tool to check the effectiveness of this on your web page.
Please take notice that by using the caching option, you do not effect the load speed when you visit the site for the first time. However, when re-visiting the website the load speed will surprise your customers. Of course, if they do not use the utility programs used to clean unwanted files such as CCleaner.
How to speed up your site right?
We have listed the main reasons why the site is loading long and gave tips for speeding it up, which can be implemented by any user who is more or less aware of HTML and CSS. But our final recommendation is that you should use the services of professionals. Specialists in the Drupal sites’ Technical Support will make your website quicker and more accessible to any user.
Analyze not only the homepage, but all the other site pages (page sections and categories, page material and comments on it, and other areas of the template). Bear in mind that the page of a photo album with lots of graphic elements will open more slowly than a simple static page. Note that the Page Speed site administrator will see one result (the load speed of the administrative panel is taken into account), and the guests will see another.
Optimize every script, every point, every character, every image (even those that weight 5Kb) and always remember the proverb: «A penny saved is a penny gained!» If your site meets the load speed temporary performance of the page, it is still recommended to optimize your site, as you can only improve it.