EN ES  BR 

BaseKit Learning Centre

Web design & online marketing articles, tutorials, videos, slideshows and more!

How to make your website super speedy

By Alex Woods on December 07, 2011

Once you’ve created your website  you’ll want to ensure that your users can access and view it as fast as you can. With super-fast internet speeds these days, there really is no excuse for your website to be sluggish. 


You may not even realise if the load time on your website is crawling at a snail’s pace.  Remember, people will be accessing your website from a variety of connection speeds and browsers as well as devices such as mobile phones and iPads. 


Therefore, you’ll want to make your website as efficient as you can for all your users. 

You’ll need to first determine the speed of your website. This is easily done through Google Webmaster Tools.

How to make your website super speedy

Design

An obvious factor not to be overlooked is design. Having a simple design will reduce the amount of web elements on your website and will therefore lower the http requests for your page. Do you really need that flashing multi-coloured background? Probably not. Although you may get caught up in the moment when designing your page, try not to overload your pages with design features and widgets. Only use what you need and your users will thank you for it.

 

Content

The actual content of your website will also contribute to your loading time. Make sure you only have what you need on there and don’t have pages and pages of unnecessary copy. If you do have vast amounts of copy that cannot be whittled down then split it into pages to break it up and make it shorter. Not only will this make it more digestible to your reader but it’ll make your page load a lot faster. 

Getting rid of an excess whitespace will also make your life easier. Removing the spaces between your coding will speed up the loading time on your page as there won’t be as many bytes on your page.

 

Images

Resize images before uploading them onto your site. Having an image too large will delay loading time and in turn, you’ll have a lot of frustrated visitors. Whether it’s JPEG, PNG or GIF files, you’ll need to do some research and determine which works best with your image as each have different formats.

 

Kill flash

Flash is a devious culprit when it comes to page loading speed. It may make your page look pretty but causes a lot of problems regarding download and speed. All elements of a page created with Flash need to load before you are able to see the full page. Sometimes plug-ins are required to view certain elements of a website. You need to think how likely it is that the user is going to spend time downloading a plug-in. People viewing your website from mobile devices will also encounter problems as Flash is not compatible with a lot of handsets.

 

Kill flash

Use CSS

Using CSS is a great way to reduce your load time in regards to layout, fonts and colours. Your files can be stored in an external CSS file which separates the document content from the document presentation. The browser can then cache all the formatting instead of reading each tag individually. Written in HTML and XHTML, it styles your web pages allowing shared formatting, tables web design while reducing structural content being repeated.


To speed this process up even more you could use Minify. Minify removes all unnecessary characters from source code without affecting its function. It’s great for reducing white space especially in HTML which can reduce the page dimensions dramatically. It is commonly used with CSS and Javascript, minimising their file size. The great thing about it is that it minimises all the code without affecting the function.

 

Height and width tags

It’s important to use height and width tags when working with images and tables. Including the tag ensures that the browser will automatically know the size of the image or table and will therefore not spend time trying to determine the size before loading the page. This also means that your user can read your text before the image has loaded.

 

Content Delivery Network

For some of the heavier content on your site, it may be worth thinking about getting it hosted by a Content Delivery Network. A CDN will host your chosen content on a selection of web servers across the globe and the server used to deliver the content will depend on the network proximity. This ensures the information reaches the user in the fastest amount of time possible.

This is a brilliant option for videos and images that contain a bit more bulk.

 

Sometimes, all it takes is tweaking the elements on your page and taking advantage of all the web design software available to you. 

Image description

Leave a Comment

blog comments powered by Disqus

Learning Centre Newsletter

Image description

Stay up to date with our weekly email

digest of how-tos, guides and advice!