Question
How can i decrease page loading times on my site?
Answers
4
Best Answer
Best Answer
Try some of the following:
- Make as few requests to the server as possible
- Optimise all images to make them small without loosing clarity
- Use CSS for graphic elements where possible
- Limited the amount of external server call from the pages (ex external Javascript plugins)
- Use caching on the server (memecached is good)
Yahoo have a page about best practices for speeding up your website which is worth a read.
3
I think I can help you with that :)
If you want your pages to load much faster, then you can simply have your images preloaded onto your site. This will allow the user to surf through your pages at a faster rate then if they would've had to wait for every image to load.
Preloading Images Using CSS:
#preload-01 { background: Url(http://uploaded.com/image folder/image-01.jpg) no-repeat -9999px -9999px; }
#preload-02 { background: Url(http://uploaded.com/image folder/image-02.jpg) no-repeat -9999px -9999px; }
#preload-03 { background: Url(http://uploaded.com/image folder/image-03.jpg) no-repeat -9999px -9999px; }
Preloading Images Using JavaScript:
<div class="hidden">
<script type="text/javascript">
<!--//--><![CDATA[//><!--
if (document.images) {
img1 = new Image();
img2 = new Image();
img3 = new Image();
img1.src = "http://uploaded.com/image folder/image-01.jpg";
img2.src = "http://uploaded.com/image folder/image-02.jpg";
img3.src = "http://uploaded.com/image folder/image-03.jpg";
}
//--><!]]>
</script>
</div>
SOURCE
If you want your pages to load much faster, then you can simply have your images preloaded onto your site. This will allow the user to surf through your pages at a faster rate then if they would've had to wait for every image to load.
Preloading Images Using CSS:
#preload-01 { background: Url(http://uploaded.com/image folder/image-01.jpg) no-repeat -9999px -9999px; }
#preload-02 { background: Url(http://uploaded.com/image folder/image-02.jpg) no-repeat -9999px -9999px; }
#preload-03 { background: Url(http://uploaded.com/image folder/image-03.jpg) no-repeat -9999px -9999px; }
Preloading Images Using JavaScript:
<div class="hidden">
<script type="text/javascript">
<!--//--><![CDATA[//><!--
if (document.images) {
img1 = new Image();
img2 = new Image();
img3 = new Image();
img1.src = "http://uploaded.com/image folder/image-01.jpg";
img2.src = "http://uploaded.com/image folder/image-02.jpg";
img3.src = "http://uploaded.com/image folder/image-03.jpg";
}
//--><!]]>
</script>
</div>
SOURCE
1
Not much to add to suggestions above but may be worth looking at Google's page speed addon for firebug which analyses page performance and offers suggestions for improvement: code.google.com Http://getfirebug.com/
0
1. Set a long cache for any resource you have (let's say a year), then use '?v=1' to control when the browser should get the newest file from the server.2. Use css sprites to the maximum3. Use fixed layouts (this will avoid browser repaint, therefore 'loaded' sense increased)4. Put all css in just 1 file and control pages by <body id='page-[id]'>5. Use a static server for your resources and images (browser won't send cookies, so, lighter calls)6. Use different sub-domains. That will increase the parallel loads.7. Put the content of your html before the header. This will increase the sense of 'loaded'
0
Depending on the framework you are using:
- Use tools to combine and compress multiple CSS and JS file
- Host your images on a CDN like Amazon
- Use wellformed AND valid XHTML - it really makes a difference!
- If you have static pages, use Tidy to strip white space (can also really improve loading times)
- Do profiling on Javascript that is run before the page load is completed.
And Google for many more tips! ;-)
- Use tools to combine and compress multiple CSS and JS file
- Host your images on a CDN like Amazon
- Use wellformed AND valid XHTML - it really makes a difference!
- If you have static pages, use Tidy to strip white space (can also really improve loading times)
- Do profiling on Javascript that is run before the page load is completed.
And Google for many more tips! ;-)
