: Is there any webpage preloader? I found preloader for flash|swf files. preloader,lazyloader for images.But nothing for complete webpage. Some sites, like mine, have big header and footer. I need
I found preloader for flash|swf files. preloader,lazyloader for images.But nothing for complete webpage.
Some sites, like mine, have big header and footer. I need some preloader for this. Please suggest.
More posts by @Sims2060225
3 Comments
Sorted by latest first Latest Oldest Best
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:
en.wikipedia.org/wiki/Link_prefetching http://www.whatwg.org/specs/web-apps/current-work/#link-type-prefetch developer.mozilla.org/en/link_prefetching_faq
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.
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:
Combine and minify your CSS files. You have 6 right now. You have overhead for each file you load.
Use browser cache to cache the images used on your site. That way people will only have 1 page load slowly for them. After that the images will be pulled from their cache.
Specify width and height of all of your images. This will decrease load time.
Minify your html
Minify your images. They are 11% larger than they need to be.
Put images on a cookieless domain to make them load faster.
Sprite smaller images that you use over and over again. This will reduce the number of http calls required for each page to load.
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.