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

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

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 4

阅读并应用史蒂夫·索德斯曾写过的所有内容（特别是但不仅仅是他的两本精湛的书籍），这只是关于这些问题的全部内容（可能有10％的精彩推荐是你不想听到的，比如使用CDN，但绝大多数都是你所要求的目标。

Answer 5

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 6

将gzip压缩内容提供给接受它的浏览器。

Answer 7

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 8

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 9

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 10

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

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 14

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!!

Answer 15

1. htaccess

   AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript

php

if(substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) 
 ob_start("ob_gzhandler");
else
 ob_start(); 

2.

<IfModule mod_expires.c>

# open

ExpiresActive On



# file images

ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"



# CSS

ExpiresByType text/css "access 1 month"



# javascript

ExpiresByType text/x-javascript "access 1 month"




# icon page

ExpiresByType image/x-icon "access 1 year"



# other

ExpiresDefault "access 2 days"
</IfModule>

3. psychological trick :) use preloader, user likes something happens :)