One of the most important aspects of your site is its loading speed; users want to instantly receive a picture without any brakes, and if you are not able to give them this, then they will not hesitate for a long time to look for information elsewhere. In this article, we will discuss 5 ways that will allow you to speed up the loading time of your site.
1. Use YSlow to Track Page Load Times
By knowing the amount of time it takes to load pages, you can identify problem areas. It will also give you another incentive to get into the functionality and try to fix the situation.
Before we begin, you need to install YSlow if you haven't already. YSlow is an extension to Mozilla Firefox which you can find on this page:
Now let's open some site. Let's say Six Revisions, so that we have approximately the same data (just open this site in a new tab of your browser).
On the bottom right side of your browser, you have a special panel with an icon (see Figure 1). A little further away from this panel, after the page loads, next to ‘YSlow’ you will see a number. This number is the time in seconds for this page to load in your browser. We want this number to be as small as possible.
The most common "brakes" are the following objects or operations:
- Too many HTTP requests
- Uncompressed JavaScript files
- No header expiration time for graphic files
We'll take a closer look at this in a few minutes.
In order to get comfortable with this system, go through several sites and look at their loading times. You can test Google, Facebook, and a couple of your favorite blogs/websites that you visit the most. Note that JavaScript files and images are the ones that affect speed the most.
We use YSlow to the fullest
In addition to YSlow calculating the page load time, given extension also provides you with extensive information on what you need to fix to optimize your site loading so you can patch up holes.
For such information, click on the Performance tab. After crawling the site, YSlow will give you an overall score that will characterize the performance of your page.
Access to information can be accelerated using a CDN (content delivery network). CDN is best used for large sites. They are used to distribute information across multiple servers in different parts peace. This way the information will be downloaded from the appropriate server (which is closest to the user) so as not to go through personal routers. YSlow also tracks CDN requests.
But people generally don't use CDNs (which is pretty expensive).
Classification of error types
Now let's go through each item that is in the above mentioned extension. Below you'll find a summary of how your pages are judged against and how to deal with problems to achieve maximum performance.
Make as few HTTP requests as possible: An HTTP request occurs when the browser sends a request to the server. The same can happen when connecting scripts, CSS files, images, as well as with asynchronous requests, both from the client side and from the server side (Ajax and other similar technologies). However, when it comes to system performance, it is worth considering how much similar requests happens on your page. One solution is to use caching to help client machines load scripts, CSS, and images faster.
Adding Expires Headers: 80% of page load is focused on downloading scripts, photos, and CSS files. In most cases, these things do not change on user machines. By adding some code to your .htaccess file, you can cache duplicate files on the user's local machine (we'll talk about how to do this later).
Gzip Components: Apply Gzip or compress JS files, images, HTML documents, CSS files, etc. allows users to download information in a reduced size, which significantly increases the speed of page loading. In addition, this will save space on the server, however, unpacking the data can slow down the response, and it directly depends on the user's browser.
Place CSS at the top of the page: If you place your CSS connection at the top of the page, it means that they will be loaded first, and images and scripts later.
Place your JS at the bottom of the page: Now that your CSS files are loading at the top, it's time to place your JS scripts right before the closing tag. This will allow your page to render and then include the necessary scripts.
Avoid CSS expressions: I personally have never used CSS expressions (also called dynamic properties). These expressions are native IE programming concepts (such as conditional expressions) in CSS. The technology that is used in IE8, and in all other versions, will no longer be supported, so in any case, you will have to tie with this writing of CSS expressions. PHP is more suitable for such purposes, for example, to load different CSS styles depending on some condition, such as a random number, time of day, or the user's browser.
Write JS and CSS in separate files: if you put your scripts in JS and css styles in separate files, the browser can easily cache them, thereby allowing your page to load faster in the future.
Reduce DNS lookup time: when a user types your site name in a browser bar, the DNS lookup of the IP address where your site is located immediately begins. The more external sources your site contains, the more time DNS lookups will take. As a rule, one such search lasts 60-100 milliseconds.
Minify JS: In addition to compressing with gzip, minifying JavaScript files will allow you to lighten your scripts by getting rid of unnecessary spaces, tabs, and other special characters that add up to large file sizes. It's obvious - the smaller the files, the faster the pages load. You can use the JSMIN tool to minify JavaScript files.
Avoid Redirects: It doesn't matter where you do the redirect, in JS, HTML, or PHP. Either way, your browser will receive a blank page header that will take time to load. So just try not to use a redirect where it can be avoided.
Avoid Duplicate Script Loads: If your browser loads a script more than once, it will significantly affect page loading. The math here is not difficult. The more downloads of the same files, the more longer loading pages. Review your scripts and make sure you don't call jQuery 2 or 3 times. The same applies to JS scripts.
Well… I think that's enough. Now let's move on to the next tab of YSlow before looking at some other techniques that will increase your page loading speed.
The Components tab will allow you to determine how much effort you need to make to improve your download speed. Here you will find information about how much each file weighs, as well as how long it takes to download. You will also be able to see which files are being gziped, find out the response time, and whether the files are cached on the user's machine, and when the cache itself ends. This information can be useful to you when assessing the problems of your site, you will know what is wrong with you and what needs to be optimized.
And finally, let's move on to last tab Stats tab. Here you will find information about all HTTP requests, both for regular files and for cached ones. The Empty cache value indicates that these files need to be loaded in order to render the page. In turn, Primed Cache are files that have already been cached by the user's browser. This means that they do not need to be downloaded.
2. Use CSS Sprites to Reduce HTTP Requests
CSS sprites are probably the most significant thing mankind has come up with since Tesla invented electricity… I actually said that.. oops, I meant Edison.
Well, maybe not quite the coolest, but still.
CSS sprites can help greatly improve page loading speed by reducing the number of HTTP requests that are made to download images.
You can find many tutorials that talk about how CSS sprites are easy to navigate - in general, to use them in a user interface.
Now let's take a quick look at how YouTube uses CSS sprites. This is what the sprite they use looks like:
YouTube uses this file in a rather original way. They load it as a background to the sprite class. When it becomes necessary to select an element, the initial position is selected when CSS help background-position properties and then applying the height and width.
Let's try something similar. Let's experiment on the same image from YouTube.
In the example below, we are displaying the YouTube logo on the screen. Using the same sprite class, and the same image, we can create an image that changes on mouseover.
Thus, using this image, we can reduce all connections to a single HTTP request. Well, what's the effect?
Another advantage CSS sprites is that when applying the :hover pseudo class, the image will not disappear for a few moments (which take to load a new image), as it happens without CSS usage sprites.
3. Load CSS files at the beginning, JavaScript at the end
For some sites, cutting down on the number of HTTP requests can break functionality. Another way to speed up page loading is to put all JavaScript file connections at the end of the document.
It is also worth noting:
- Load the CSS files in the section right before the start of the body tag.
- Include JavaScript just before the closing body tag.
If you follow our advice, you will allow your users to admire your sites while your JavaScript loads in the background.
Note: If you don't want to move JavaScript tags, because you are afraid that the functionality will fall, then I recommend that you use the defer property. Apply it like this: