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?

Solution 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.

Solution 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 loadevent which doesn't trigger until all resources, such as images, CSS files, JavaScript etc is loaded.

Solution 3

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