An Introduction to Speed
HTTP Requests
A web browser, just like the one you’re using now, uses HTTP requests to load a webpage. The absolute minimum number of HTTP requests a page can make is 1. That would be, requesting the page you’re on assuming it doesn’t include any other files.
Cache
Making an HTTP request takes a bit of time, so the more you have the slower things are going to get. You might then assume that it’d be better to put your CSS and Javascript all in the same file, but then caching comes into the picture.
When you visit any page your browser makes a copy of some of the files, you probably already know this. So caching is important when you have people visiting your site multiple times. Larger files take longer to load, so if we have them stored locally (cached) your website will load faster.
Making Your Website Faster
Manipulating the Cache
A good strategy then, is to have your CSS and Javascript in separate files, and include them whenever needed. That way they won’t be loaded again from page to page, but loaded off the person’s computer, which is much faster. Although you won’t have cut any actual time off a raw load time with no cache, you’ll make things run faster for returning visitors.
Less Images
Loading less images means less HTTP request. That means faster load times! So removing images that you don’t need is your next option. Sometimes you need a lot of images though, and that’s where CSS sprites come in! To put it simply, you put all of your images that don’t repeat into one file. You can then include them in CSS like so:
background: url('images/file.png') Xpx Ypx; width: 500px; height: 500px;
The Xpx and Ypx are the coordinates of the image you want in the sprite file, and the width and height are the width and the height of it. So this is more lines of code, which you’d think would take longer to load, right? However, the fact that you’re loading multiple images in one file and thus making less HTTP requests will actually greatly decrease your load times.
Combine files
You may notice that sometimes people use multiple Javascript and CSS files. Sometimes this is a good idea, like if you’re including one javascript file on only one page, and then another on all the pages.
Sometimes though, you’ll find you have a lot of files and scripts that are used on almost all your pages, all in different files! That’s no good! So what you should do is combine these into one, which should hopefully radically decrease load times.
Server Problems?
Sometimes a slow down on your website can be caused by your server, in which case you should contact your web host, or whatever you’re using. It’s always good to make sure, if you don’t know why things are going so slowly.
Optimize your files
When you make your own blog, it’s easy to add useless CSS and Javascript everywhere while working on it. This can seriously slow down your website! Removing spaces, line breaks, and things comments can also really optimize load times. You should consider having a set of files for development, and a set of files for your website
GZipping
GZipping is obviously not possible with external files on other websites, so social buttons don’t get to be a part of this. However, for your own files, GZipping can really reduce load times! This code comes curtesy of Techiepark
Apache 2.x:
<IfModule mod_deflate.c> SetOutputFilter DEFLATE # Donβt compress SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary #Dealing with proxy servers <IfModule mod_headers.c> Header append Vary User-Agent </IfModule> </IfModule>
Apache 1.3.x:
<IfModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file \.(html?|txt|css|js|php)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* </IfModule>
Better Coding
Everytime you make a mistake in HTML your browser has to figure out what you did wrong and corrects it to the best of its ability. Less errors in your code means less correcting, so the browser can spend more time actually loading the page instead!
Some Useful Stuff
- You might want to try out Pingdom for testing just how fast your website loads
- If you’re using Chrome or Safari (dev tools) you can right click and select ‘Inspect Element’. Then click Audit and run it. This will give you lots of tips on how you can speed it up even more!
- I believe in you!