How can I make my web page load faster?

Question

Assuming an empty browser cache - How can I make a web page load faster by only applying HTML/CSS/JavaScript code changes?

Meaning, don't recommend moving servers, using a CDN, etc. Just code changes to make it load faster.

Answer 1

Externalize JS and CSS declarations instead of including them inline - that would be the obvious one. That way users can download them once and use them from their cache later on.

Answer 2

Move your JS and CSS out of the HTML and into one minified file for each. Also, reduce the size of any images, if you can. I didn't notice any rollover images, but if you have them, consider CSS sprites.

Answer 3

I wonder if that loading thing that pops up slows things down

Answer 4

Read and apply all that Steve Souders has ever written (especially but not exclusively his two superb books), it's just all about this very questions (maybe 10% of his splendid recommendations are the kinds you don't want to hear, such as using CDNs, but the vast majority of them is exactly on target for what you ask).

Answer 5

Don't load all of the data for the alternate tabs until the use actually clicks them. Just grab the counts for the tab text and load the data should the user want to look at the other options.

Answer 6

Serve gzipped content to browsers that will accept it.

Answer 7

Considering that there is no load time involved with HTML and CSS other than downloading it, if you're not willing to consider moving it to external files or using a server-side solution such as compression, then there isn't anything you can do except shrink the actual code size. And really, that's not going to make much difference to your pages.

In terms of your Javascript... you've got a ton of it inline in the page, and it's probably the cause of your slowness. Unfortunately, I can't take an hour out of my day to profile it all for you. Stack Overflow isn't for free work... if you're willing to narrow down the slowness to a specific area, I'd be happy to help analyze it, but asking for someone to take your entire site and analyze it from scratch is a bit much.

Answer 8

You're loading some JS libraries and whenever the render engine hits a tag, the browser halts and starts executing it and everyone sits and waits until your hefty JavaScript library finishes loading.

Read this article: non-blocking JavaScript documents and apply it to your website. Also externalize all JavaScript in your webpage and load them in an unblocking way at the end of your page. All your JS will be executing while the users optic neurons are transmitting the first visuals of the page and trying to figure out where to click. That's called perceived performance btw.

Answer 9

Apache's mod_expire grant so faster loading performance that you will notice it even in local tests. Its a nice idea to mod_expire all static content, including the .js files as Matt Grande said. Most "really big" sites use that or similars, including Stackoverflow.com.

Answer 10

Apart from the suggestions above:

• Do not use CSS expressions.

• Your fade effect code is trying to set an invalid color #ffff100. Why are you not using jQuery.animate()?

  $(<selector>).animate({backgroundColor: <targetColor>}, <duration>)
  

Answer 11

1. Images: Photoshop can optimize your images to be saved for the web. This reduces a HUGE amount of space.
2. Scripts: Less loops, more optimised solutions, etc.
3. HTML : Tableless layouts (it reduces quite a lot of tags)
4. CSS : less use of functionalities such as filters, etc.

These are tips for ANY webpage optimisation.

Answer 12

optimize images, use sprites, optimize html,separate css, js, compress/minify, use caching and aggregation to combine js /css into one file. user server-side caching, get a faster server, ensure you have a fast network with minimal delay and fast response time.

Answer 13

From my experience:

(1) Install YSlow and Page Speed extensions for Firefox and follow their advice where possible.

(2) Very important: configure HTTP caching for directories where you keep your images, JS and CSS files. I just put them in a directory named static and put there this .htaccess file:

<IfModule mod_headers.c>
    Header set Cache-Control "max-age=29030400, public"
</IfModule>
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault A29030400
    ExpiresByType image/x-icon A29030400
    ExpiresByType application/x-javascript A29030400
    ExpiresByType application/javascript A29030400
    ExpiresByType text/css A29030400
    ExpiresByType image/gif A29030400
    ExpiresByType image/png A29030400
    ExpiresByType image/jpeg A29030400
    ExpiresByType text/plain A29030400
    ExpiresByType application/x-shockwave-flash A29030400
    ExpiresByType video/x-flv A29030400
    ExpiresByType application/pdf A29030400
    ExpiresByType text/html A29030400
</IfModule>

(3) Take the CSS code from HTML file and put it into a separate CSS file.

(4) Combine your JS files into one file. Then it will be useful to compress this file using JSMin.

(5) Turn on gzip compression in Apache for static text files. If you have mod_deflate on your Apache server, put this into .htaccess file in your website root directory:

<IfModule mod_headers.c>
    <FilesMatch "\\.(js|css|html|htm|php|xml)$">
        SetOutputFilter DEFLATE
    </FilesMatch>
 </IfModule>

Answer 14

I didn't find the grabble map feature useful. It's very snazzy, but it arrests my attention and the home listings produced by it never got my attention. I would have preferred a more conventional search feature, maybe expanding from the input search feature. And, skimming through the source file looks like the map and home listing javascript is 2/3 of the source. There's gotta be faster loads without it.

Answer 15

I'd suggest downloading Safari and using their awesome Dev tools (and pretty interface) to see exactly what is taking so long, and what you can do to speed it up.

If you're using JQuery, don't forget to use Google's hosted versions!!