How to make page loading feel faster?

Question

I want to decrease the time taken by my pages to load and be displayed, assuming I start with an empty browser cache, and the pages may or may not have inline css and javascript in the html file. does changing the order in which files are sent to the browser decrease the display time, and thus make pages seem to be loading faster?

For example if a page has some.css, .js, .png files and so on, would loading the css first, display things faster?

And is there a standard/specific order to load file types?

Answer 1

Here are few steps that could optimize the performance of your web pages.

• put css at top.

• put javascript at bottom.

• cache everything.

• set far future expire header.

• return 304 when appropriate.

• use unique url for css and js for propagating the change.

• apart from that use ajax wherever required.

Answer 2

Beware of too many HTTP connections. It takes time to establish an HTTP connection and it can easily eat up loading time if you have many elements linked in your HTML file.

If you have many small icons, glyphs, etc. combine them into a sprite so only one image is loaded. Facebook for instance makes use of the sprite technique - you can see that if you inspect the images it loads.

You can also consolidate your CSS files into one file - same with Javascript files.

Also, if you have JavaScript that affects the content of your page when it loads then make sure to use the event that notifies you when the DOM is ready, instead of waiting for the body load event which doesn't trigger until all resources, such as images, CSS files, JavaScript etc is loaded.

Answer 3

js files block page loading until they're executed. When possible, include those before closing body

Answer 4

Yahoo has an excellent article about that.

http://developer.yahoo.com/performance/rules.html

Answer 5

At first make sure that your webhoster has no slow servers. This can happen on very cheap shared site webhosters. Than you should check that you remove all unnessesary stuff from your html output. Than you could check if your content is dynamic or static. If it is dynamic try to convert it to static content.

In some conditions you can simply activate the caching functions of a CMS that should also help to send the website content faster. Just on slow connections it could be better to use gzip to compress the output stream. But this costs time. The server and also the client have to compress/decompress. You have to check that too.

If you use javascript and the execution is delayed you could also use the ready event to execute your javascript after the html document is loaded (and not all images and so on) like using the document.onload event.

Answer 6

You can save your page load time to use few trick like:- CSS image sprites rather than call every single image for every single purpose this will Minimize your website's HTTP Requests, remove unnecessary div tags or unnecessary code from your HTML-Markup & CSS

Where we can get good results through CSS and so we should not use Jscripts there. Should make always clean HTML-Markup without any irreverent code.

Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet. Combining files is more challenging when the scripts and stylesheets vary from page to page, but making this part of your release process improves response times.

Answer 7

The solutions turned out the simple, combine all the different files into a single large file and compress that file using zip. Unfortunately, if you do this manually you are going to run into maintenance problems. That single compressed file is no longer editable. So after editing one of the original source files you will have to re-combine it with the other files and re-compress it.