5 website optimization tips to increase page speed

Website optimization is an important part of SEO (Search Engine Optimization) because page load time and speed are factors in how well pages rank in Google search results.

Reducing page size and decreasing load times help to minimize load on your servers, improve the browsing experience (because visitors don't have to wait long for pages to load), and increase PageRank (because Google monitors page speed).

The net result of a fast page load time is a lower bounce rate, higher engagement, more conversions and more revenue.

While you might be aware that there are plenty of great online SEO and page speed tools to help improve SEO and page speed, including the excellent PageSpeed Insights tool from Google, it takes more than software tools to optimize a website.

Website optimization

The overall goals of website optimization are:

• increase efficiency
• increase speed
• decrease page size
• decrease requests

This list of top web optimization tips is aimed at helping you do all of the above with little effort. In particular, these optimization tips will help you to adopt newer methods of web design to help slim down and speed up your webpages.

1. Swop CSS3 for images

CSS3 can mimic many cool design effects that were, until recently, only possible using PNG images with transparent backgrounds.

The following image is fairly large (approx 30Kb), but demonstrates to features that PNG files are good at, namely background transparency and smooth, high quality rendering for things like drop-shadows:

30Kb is larger than most webpages used to be in total. But now it is possible to get the same, similar or better effects using CSS3. Here is a JPG image of the same ebook:

This image is only about 6Kb, which is a far more acceptable size. The problem is that JPG images have no transparency and can't handle smooth drop-shadows as well as PNG files.

CSS3 can help save the day. By wrapping this image in a div container and applying a rotate transform as well as a box shadow:

we can get the desired effect at a small fraction of the size:

The final image using CSS3 to transform and provide a drop-shadow will load 5X faster than the original PNG image. In addition, it is also possible to add effects to the drop-shadow using CSS transitions - really useful if the image is used as a link.

Hover over the final CSS3 image to see the drop-shadow transition effect. This is something that is very hard to replicate using images if page speed is something you care about.

2. Aggregate and compress CSS and JS files

Every object that must be downloaded from a server in order to successfully create a webpage requires at least one round-trip request from the browser to the server and back. This creates a significant latency in page load times.

Reducing the number of server requests is therefore a really good idea.

One of the best ways to reduce the number of server requests is by aggregating files. It is possible to aggregate images into a single image (called a sprite), but most commonly, aggregation refers to combining one or more CSS files into a single CSS file, or combining one or more JavaScript files into a single JavaScript file.

Many good website platforms provide facilities to aggregate CSS and JS files, so the chances are you won't have to do this manually (and can also avoid any serious coding).