CODEWITHSUNDEEP
javascripthtmlcss
TimJK
TimJK

Reputation: 475

How can I make my web page load faster?

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.

Upvotes: 6

Views: 4960

Answers (15)

websky
websky

Reputation: 3162

  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>
  1. psychological trick :) use preloader, user likes something happens :)

Upvotes: 0

Sneakyness
Sneakyness

Reputation: 5403

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

Upvotes: 0

aaron b11
aaron b11

Reputation: 138

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.

Upvotes: 0

warpech
warpech

Reputation: 6433

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>

Upvotes: 9

Reputation:

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.

Upvotes: 0

Salvin Francis
Salvin Francis

Reputation: 4267

  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.

Upvotes: 0

Chetan S
Chetan S

Reputation: 23803

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

Upvotes: 1

Havenard
Havenard

Reputation: 27854

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.

Upvotes: 1

Mehmet Duran
Mehmet Duran

Reputation: 176

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.

Upvotes: 1

zombat
zombat

Reputation: 94147

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.

Upvotes: 8

Pat
Pat

Reputation: 25675

Serve gzipped content to browsers that will accept it.

Upvotes: 1

Jay
Jay

Reputation: 2703

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.

Upvotes: 0

Alex Martelli
Alex Martelli

Reputation: 881487

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

Upvotes: 5

Matt Grande
Matt Grande

Reputation: 12157

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.

Upvotes: 8

raptors
raptors

Reputation: 332

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.

Upvotes: 2

Related Questions