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.
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:
-moz-transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-webkit-transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-o-transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-ms-transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-webkit-box-shadow: 1px 1px 5px 1px #555;
box-shadow: 1px 1px 5px 1px #555;
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.
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).
Want great posts like this every day?
Follow WSM4B for the best business ideas, plus tips to build & market your business.
Get free help for your business on everything from building websites to marketing & SEO.