Top 3 optimizations you can apply to your site front-end
Apr 14, 2009
This may be trivial to you by now, but i'm posting this anyway cause someone has to! And I'm hoping to get feedback from readers that get good results and discover other ways of optimizing a site.
When optimizing most websites, it's important to know that style sheets, scripts and images account for over 75% of the load time. There are several ways to reduce this time, I am going to explain the top 3 solutions that have the most impact.
- Number of requests: If your site has a lot of files requested it will dramatically increase the page load time, you have to avoid duplicating requests and even come up with new ways to replace a group of requests with only one. You should only have ONE style sheet for the entire website placed on the <head> tag of your pages. Join all possible javascript files into one and place it at the bottom of the page, just before the </body> enclosing tag. Avoid using several dummy images like cornered borders, just make them a single image and use the background-position property to display them. This technique is very useful when you want an image link/button mouse over effect, all the states of the link/button should be one single image. Ultimately, try to use more css than images.
- Content Delivery Network (CDN): Use a CDN for all static files like images, SWF files, css. The more you move to the CDN the less load on your web server and the lower the latency of all the static files loaded. CDNs are not as expensive as they seam, SimpleCDN prices starts at 0.04 $ per GB.
- Caching & Compression: These are two great ways of reducing page load, make sure you use GZIP in your web server, Apache supports this by default. Minify your javascript files, this means removing the spaces and line breaks. Last but not least set up the expires header.
There are several other optimizations you can apply to your site, a great tool that describes these and measures the results is YSlow. YSlow is a firebug plugin that rates your site depending on 13 basic optimizations your site should have. Take it seriously and try to get the highest rate.
-
-
-
Fernando Torres
Tailwind CSS in Modern Web Development
Integration with AEM, Sitecore, and Optimizely
-
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.