Grow your CSS skills. Land your dream job.

As a front end person, what steps can I take to improve the speed at which the site loads?

  • # March 28, 2013 at 11:55 pm

    I’ve worked on a site that’s almost nearing completion (even the backend work) – it’s a dynamic site. Now, unfortunately, when I started off, I wasn’t really aware of how disastrous a table or inline styling is, and thus ended up using some tables and a lot of inline styling (wish I had discovered CSS tricks earlier)- restructuring that is out of the question since the programming bit has already been done. (but I suppose will be done if it **has to be done**, the only trouble being, the site has to go live asap.)

    Will clearing the white spaces in the html and Css help in reducing the load time? (For readability, the programmer has left huge gaps in the html, sometimes even 10 empty lines between two lines of code).

    The scrollers and carousels that have been used have dynamic content, and thus the images that appear even as thumbnails are really compressed versions of the same large images(that have been used elsewhere , using .divclass img{width:xxx px;}). Does this add to the load time?(the admin has been built in such a way that the user only has to upload ‘one’ large image for a product and the same image is resized in all areas.)

    Also, **while** the site loads, any link that is clicked directs the user to the home page (I’m not sure if this is because of the large load time or a programming glitch).

    What about reducing JS file sizes? Does that help?

    Any input would be great.

    # March 29, 2013 at 12:31 am

    A little whitespace isn’t a big deal, although the less the better of course. HTML and CSS should be served gzipped so that stuff is negligible.

    This video covers your biggest easy wins as a front end person:

    # March 29, 2013 at 11:09 am

    Harry Roberts of CSS Wizardry has some good pointers on this: http://csswizardry.com/2013/01/front-end-performance-for-web-designers-and-front-end-developers/

    # April 1, 2013 at 9:28 am

    Thank you every one for your inputs.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".