In today’s day and age full of young, motivated people, they want their information to be presented to them in an instant. They despise the feeling of slowness, and will ultimately go to a lower tier website if their content isn’t loading quick enough. To keep your website afloat amidst all of this chaos, you must ensure your website loads quickly and the important information is no more than one or two clicks away.
To be perfectly clear, this will not teach you how to reduce the size of your font or how to fit more onto one page, rather, the goal of this post is to provide some tips and tricks on how to reduce file sizes on your website, ultimately decreasing page load times and increasing your user’s happiness and your website’s search engine rankings.
The most time-consumptive part of loading a website is loading the images. The internet browser has to make individual requests for each and every image on the website, thus increasing page loading times. There are two ways to reduce the amount of requests internet browsers have to send:
- Reduce Images: The most linear way to reduce the amount of requests is by explicitly reducing the amount of images present on your website.
- Use Image Sprites: Image sprites is a quick and easy way to reduce the amount of requests the internet browser will have to send, without removing any of your website’s content. To do this, you have to use CSS (cascading style sheets), which will pull the specific part of the image you need to be displayed in a specific location, while other areas can use other locations from the image.
The best way to conceptualize image sprites is by creating a mashup of your four favorite images in your head. Then, place a grid over the image, sectioning off each image into its own little quadrant. From this, you can pull a specific quadrant’s data (we’ll use quadrant 1) and place it anywhere on the website, while quadrants 2, 3, and 4 can all be placed anywhere else on the website. With this method, the internet browser is only requesting one image’s information, but you are getting 4 times that amount! This method’s efficiency increases exponentially as you add more images and more sprites to the website.
If you are having a difficult time developing a website or would like to completely redesign your site to keep up with the modern times, feel free to contact us at Windy City Web Designs to get the ball rolling.