I found preloader for flash|swf files, a preloader and a lazy loader for images. But nothing for the complete webpage.
Some sites, like mine, have big header and footer. I need some preloader for this. Please suggest.
Webmasters Stack Exchange is a question and answer site for pro webmasters. It only takes a minute to sign up.
Sign up to join this communityI found preloader for flash|swf files, a preloader and a lazy loader for images. But nothing for the complete webpage.
Some sites, like mine, have big header and footer. I need some preloader for this. Please suggest.
Want to preload a complete web page? Boy, do I have the perfect solution for you!
Firefox supports link prefetching, and it's part of HTML 5, meaning more browsers will support it in the months ahead.
Just stick something like this in the <head>
section of your HTML document:
<link rel="prefetch" href="http://url.goes.here/" />
<link rel="prefetch" href="http://url.goes.here/images_work_too.jpg" />
Read more about it here:
I am not sure what you mean by preloader. You can't load anything on a page before you go to it unless it is something that is re-used on a page that was already hit or is loaded on an earlier page in anticipation (this isn't a good idea).
You can use JavaScript to lazy-load header and footers by loading the header and footer with all empty tags that have IDs and then load them later with JavaScript. In general I wouldn't suggest doing this as it adds a lot of extra work and can make your page bigger. You will have extra JavaScript and you didn't really gain anything.
What I would suggest is lazy loading your images with JavaScript as they appear to be a major portion of your page. Also, try your page out in Fire Fox and install Firebug and YSlow. This will help you see why your page is slower.
Here are a couple of things I noticed specifically and that you can do right away:
Finally, another thing that might be able to help you is caching things on your server. If you site has a lot of database queries for content that rarely or never changes, cache the results of queries in your servers cache. This will make server processing time go down. Companies like Facebook do this to the point where 99% of their content is in the server cache.
Your header and footer are very large in total 202 KB. If you reduce the JPEG quality parameter when saving the images, you can probably get that down to 150 KB or even 100 KB without a noticeable loss in quality.
Another option is to split the header into two parts, one with the detailed graphics like the dice splashing in the water, then another with the "solid colour" blocks. Save the second part as PNG and you may make savings there. If possible, reduce to 256 colours (you can almost certainly do this with the footer).
I also noticed that the header/footer were being served as application/octet-stream
. (If you open the image directly you are prompted to download it.) I don't know if this makes a difference but I would use try to use the appropriate image mime types like image/jpeg
. It's possible the browser is downloading the whole file before knowing exactly what type it is.
Failing all this, you could use a Javascript trick to load the images last. Move the CSS rules for the background images into two separate CSS classes, but don't add them to the HTML. (Now when the page loads the images do not show.) Use Javascript to add those classes once the page is loaded.