I think it's not a secret to anyone that site speed affects a lot of factors. It affects not only the visitor's experience while they have to wait for the site to load but also the SEO optimization. The search engines have already started to take the site speed into account when ranking the websites. Therefore, the faster your site is, the more visitors you can get from search engines.
In this article, I have collected the top 6 tips on how to improve the speed of downloading a web page and the site as a whole.
So, let's go.
Decrease the number of HTTP requests
Eighty percent of the page load is focused on loading page components: scripts, photos, CSS files, flash. According to specification HTTP/ 1.1, browsers simultaneously load not more than two components of a web page from one host. By decreasing the number of such components, we reduce the number of HTTP requests to the server and, as a result, improve the speed of page loading.
But how to decrease the number of requests to the server with no effect on the look-and-feel of the page?
There are several effective ways.
- Using CSS Sprites
CSS Sprite is a combined image that contains several small images that are cut at the right moment for the desired page element using such properties, as background-image and background-position.
- Using Inline-pictures
Inline-pictures use the URL scheme data: to embed the image into the page itself. By embedding inline-images in your stylesheets, you will reduce the server queries, and the HTML size will remain the same.
Place CSS files at the top of the page
When placing a connection to CSS files in the header of the page, our page is rendered gradually –first the title, the logo at the top afterward etc. - and it serves as a perfect indicator of page load and makes the overall impression of the website better.
Place JavaScript at the bottom of the page
Following the specification HTTP/ 1.1, if the pictures for your site are located on different hosts, you will get more than 2 parallel downloads. And when the script is loaded, the browser will not start any other downloads, even from other hosts.
Optimize Your Images
You need to determine what format your images should have. Choosing the wrong format of the image can considerably increase the file size.
- GIF is ideal for images with multiple colors, such as a logo.
- JPEG is good for detailed images with many colors, for example, photos.
- PNG is a perfect choice if you require a high-quality image with transparency.
You can optimize the image in two ways: using programs or online services to compress images. In the first case, you will need some knowledge to work with a particular program, but everyone can use online services. You should just download the desired images. The service will optimize them itself and will give a link to download the compressed files.
Don’t Scale Images
Do not change the size of the image using the attributes of width and height tag, or with CSS. This also negatively affects the speed of page loading. If you have a picture of 500x500px and want to paste it on the site that needs a size of 100x100px, it's better to change the size of the original picture using the image editor Photoshop, or any other. The smaller the weight of the picture, the less time it will take to load it.
Use the CDN to load widely-used JavaScript libraries
If your website uses a popular JavaScript framework, for example, jQuery, it's better to use CDN to connect it.
CDN (Content Delivery Network) is a set of web servers geographically dispersed to achieve the maximum rate of content delivery to the client. The server that will directly deliver the content to the user is selected based on some indicators. For example, you select a server with the lowest number of intermediate hosts before it or with the lowest response time. In addition, the browser caches JavaScript-files, and if you visited the sites on which this method is used, this library is already in your browser's cache, and it will not load it again.
One such CDN is Google Libraries. This is a CDN for popular open-source JavaScript libraries. Downloading popular JavaScript frameworks with Google Libraries allows you to increase the speed of the page load and reduce the traffic to your server.
Use the above tips and make your site as fast as wind!