One of the most important aspects of any website is loading time, No matter how flashy your images are or how interesting your content is. if it doesn’t appear to the to the visitor is a speedy manner, It’s unlikely your will ever see them again. Today’s post you’ll find some helpful tips to ensure that your website will load more faster than before !
1. Optimising Your Images
Knowing when to use the appropriate file format for your images and changing to a different file format can dramatically decrease the size of an image.
- GIF is ideal for images with few colours like logos.
- JPEG is great for images with lots of colors and details like photographs.
- PNG is the choice when you need high quality transparent images.
2. Place CSS files closer to the Top
Moving your stylesheets to the top of your of your HTML document helps your pages feel like it is loading faster because doing so allows your pages to render the styles progressively.
3. Place JS files closer to the Bottom
Browsers can only download only two components per hostname at the same time. If you add your scripts towards the top, it would block anything else below it on the initial loading of the page and to avoid being in this situation, place JS files as far down the HTML document as possible, preferably right before the closing </body> tag.
4. Minimise HTTP Requests
When visiting a new web page, most of the page loading time is spent downloading components of that page e.g. images, stylesheets and scripts, by minimising the number of request of a single page it will load faster. To reduce HTTP requests for images you can use CSS sprites to combine multiple images
5. Reduce 301 Redirects
Each and every time a 301 redirect is used, it forces the browser to a new URL which increases page-loading times. If possible, avoid using 301 redirects.
6. Place CSS and JavaScript in external files
If your CSS and JavaScript directly in your HTML document, they are downloaded every time it gets requested and doesn’t take advantage of browser caching and increases the size of the document. Placing your CSS and JavaScript in external file is the best practice to as it is easier to maintain and update.
7. Compress and Optimise Your Content
The task of compressing your website content can have a huge impact on reducing load times. Using HTTP compression for all of your web page data is sent in a single smaller file instead of a request that is full of many files You can also optimise and compress your CSS and JavaScript files by combining them and minifying(compressing) the code.