3

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.

Improve this question
3

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:

Improve this answer
1
  • What I mean with lazy-loading of the page is loading invisible portion of the page on demand or on view/focus that I can achieve using jquery ajax request for HTML contents and other ways. – Amit Kumar Gupta Feb 11 '18 at 15:00
6

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:

  1. Combine and minify your CSS files. You have 6 right now. You have overhead for each file you load.
  2. 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.
  3. Specify width and height of all of your images. This will decrease load time.
  4. Minify your html
  5. Minify your images. They are 11% larger than they need to be.
  6. Put images on a cookieless domain to make them load faster.
  7. 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.

Improve this answer
1
  • Minifying HTML can be quite impractical and doesn't gain a huge advantage. With CSS/JS you can keep the originals and minify to a different file but that's usually very difficult with HTML generated from different sources like templates, database, etc. – DisgruntledGoat Oct 7 '10 at 14:01
1

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.

Improve this answer
1
  • i use my site for example purpose only. I'll surely optimize header & footer for my site. I vote up for your 'content type' observation. thanks – Amit Kumar Gupta Oct 8 '10 at 6:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.