Grow your CSS skills. Land your dream job.

Jerky Site In Chrome Only

  • # April 21, 2012 at 10:04 pm

    Ok.. I’ve spent hours trying to figure this one out and I’m stumped. I’m building this site in WordPress: http://sonyasspotlight.com/Wordpress/

    In Chrome, on several different computers, the site is jerky when I scroll. In IE and Firefox, it works fine without any jerking.

    Does anyone have any insight on this one?

    # April 22, 2012 at 3:26 am

    First, quick note: your site took a long time to load due to loading two MASSIVE images. One is 3.5mb and the other is 2mb. The images were being resized down to 200px wide, but I still have to download the entire image – super important to fix that.

    I’m also receiving the following three errors: http://cl.ly/3L160Q2t1x2l143N1N1R

    Actually, after some testing it appears that simply removing those massive images from the page totally improved the performance!

    # April 23, 2012 at 9:42 am

    My client is constantly uploading large size images to her site, no matter how many times I tell her to resize the images before uploading, she doesn’t do it. Is there a way to handle that after upload to reduce the file size??

    I think I have those errors fixed that you pointed out as well.

    Thank-you again for your help!

    # April 23, 2012 at 11:23 am

    one error – jQuery is not defined.

    I think it is the images that are causing the problem on Chrome.

    # April 23, 2012 at 11:27 am

    For image resizing, tell her to put them through JPEGMini first, just to trim off some of the filesize at least.

    # April 23, 2012 at 11:40 am

    Hmmm… I started with the Foundation theme and the app.js that is throwing that error was part of that theme. I’ll have to try to figure out what’s causing that.

    I’m thinking of maybe trying this for image resizing… http://wordpress.org/extend/plugins/resize-at-upload/

    She is just dead-set against having to go through anything to resize her photos. She wants to go straight from digital camera to website.

    # April 23, 2012 at 3:12 pm

    She should adjust the size the Camera takes them.

    # April 23, 2012 at 4:04 pm

    WordPress offers tons of resizing features – when she inserts the post into the page she should have to select a size, no?

    If you’re inserting the posts from the backend, then you should be able to resize them yourself by picking a different version of it (medium, large, featured, thumbnail, etc.).

    Every time you upload a photo via WordPress it creates multiple copies of it at different sizes.

    # April 23, 2012 at 5:02 pm

    That was what I thought, but she’s apparently not worrying about the size she inserts since I have the css taking care of making sure it fits into the layout without blowing anything up.

    I’ve played with that plugin a bit, and it seems to work. It’s resizing them at 600px wide instead of 4,000px wide that she uploads originally.

    I think in most situations, this isn’t really an issue since WordPress handles it, but between the photographer and her love for big, bold images in the articles, it makes it a bit more difficult.

    On another note, I still can’t figure out that jQuery error…

    # April 23, 2012 at 5:40 pm

    That error is occurring because you’re including app.js before jQuery is being loaded. You just need to reorder your scripts.

    http://cl.ly/0H071e0f3h3e0S0N3m3C

    You should also be careful, you’re loading two version of jQuery, as also seen in my screenshot.

    # April 24, 2012 at 1:39 am

    You really need to make your customer understand that she’ll be damaging her own business/website by including such huge images and excluding large parts of her audience if she insists on uploading huge images. Not everyone has fast connectivity and she’ll be effectively exclude those visitors that have slow connections.

    Sometimes you just have to be super strict and she’ll understand.

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

You must be logged in to reply to this topic.

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