There is no denying that websites are getting bigger. With the variety of content shown on any particular website and with stylesheets now accommodating multiple screen sizes via responsive web design methods, the modern website can be slow to load. As the majority of web browsing is now done on tablets and smartphone via mobile connections, a successful website not only has to provide good content but be light on the user’s limited bandwidth as well.
Fortunately, the best way to do this is by reducing and optimising the number of files requested when a user views a website.
Fewer HTTP Requests
A lot of websites will use more than one stylesheet in order to separate out elements such as layout and typography. A website can also use multiple Javascript files in order to add visual effects or additional functionality. Depending on the size of each file, this can increase the time it takes to load a website as a request is made for every file required.
To combat this, the best practice is to merge multiple stylesheets or Javascript files before publishing so that a website only has one CSS stylesheet and/or one main Javascript file, thereby reducing the number of HTTP requests required to load a website.
Minifying
“Minifying” refers to the elimination of formatting such as line breaks, indentation and spaces from source code. Such formatting is usually to help the developer with reading or editing code but depending on the amount of code, can dramatically increase the overall size of the file.
By removing such formatting from any HTML, CSS or Javascript files before publishing, said files can be reduced in size significantly, allowing for faster loading times.
Image Optimisation
Websites which rely heavily on imagery can have long loading times if said images aren’t optimised. This can boil down to choosing the right format for each image, the quality setting when exporting or removing excess white space.
For images that only use a few colours, using the GIF or PNG (8-bit) formats can result in a smaller file and most image editors will allow you to choose the size of the colour palette used for each image, which can reduce file sizes further. For images that use millions of colours (such as photographs), the JPEG format is your best option and most image editors will offer quality settings so you can determine the best ration of quality to file size.
Additionally, there are several online tools available, such as Smush.it, which can optimise images for those unfamiliar with image editors.
At FSE Design we take care of all of this and will ensure that your website is optimised in a way keeps loading times to a minimum, meaning end users will have a positive viewing experience.