Any ideas?

Web Performance Discuss Test Results
1

http://www.webpagetest.org/result/110816_PW_1B4B5/1/details/

Short of reducing the number of images, or removing jquery, does anyone have any ideas on how I can decrease the load time by a second?

Thanks.

2

A full second is close to 30% so it’ll be tough but here are some thoughts:

  • Inline the css and html5.js (will save around 200ms)
  • Take a look at your back-end page generation (there’s at least 200ms available there)
  • Put some of the images onto a cdn2 domain so that they can all load in parallel (maybe 500ms there is you aren’t bandwidth constrained)
  • Maybe use a css sprite and combine the rotating images into a single image (bigger win but a pretty big rewrite)
3

What do you mean by inline the css and html.js? I thought they were inline to stop the blocking.

According to the backend logs my CMS only spends 250ms max generating a page, with the homepage averaging 80ms.

I’ve added a cdn2 domain to see if this helps.

As for reducing the images to a sprite, Is that possible to do and keep them linking to different pages?

http://www.webpagetest.org/result/110817_4N_1BED8/

I don’t think my server likes cdn2…

4

Hi Kye,

Looking at the test linked in your first post, I see three different URLs pointing to the same 21.7 KB jpg file:

http://cdn1.pimlicoplumbers.com/uploads/page_images/Twitter/.thumbs/picture5_2b9f86.jpg

http://cdn1.pimlicoplumbers.com/uploads/page_images/Twitter/.thumbs/picture5_1_8d2b44.jpg

http://cdn1.pimlicoplumbers.com/uploads/page_images/Twitter/.thumbs/picture5_2_5ea2c8.jpg

5

Yea, you need to ignore that. The CMS won’t let you add an image twice to a widget as the database forces uniqueness on the image ID’s. It’s a pain but I don’t have time to rewrite that as it will affect to many aspects of the code.

Just trying to see if I can get sprites on it to work.

6

By inline I mean put the content directly into the html inside of a / block instead of referencing the external file.

Yes, you can still keep every image linking to a different URL while using an image sprite but it’s pretty custom work - you’d be setting background images on fixed size block elements (div for example) and then animating the block elements.

7

Sprite test:

http://www.webpagetest.org/result/110818_P0_1BRGR/2/details/

Sprites are a lot of work when the pictures change! Need to set the caching up on it better, it generates the sprite every hour or so. Custom CMF plugins are hard work.

It has however taken 500ms from the document load and 1000ms from fully loaded.

Both domains are on the same server, with the same setup and apache settings so I’m hoping that won’t effect the results.

Is it good or bad code practice to inline the code? I can probably get it set up so it only inlines the CSS if your in production mode so that firebug still works fine. Don’t want bad code practices leveled against the site by a search engine by decreasing the content:source ratio.

Thank you for all your help.

8

Yes, if the resources are small enough (and in this case it looks like they are only ~6kb compressed).

Thanks,

-Pat

9

http://www.webpagetest.org/result/110823_FS_1D2A2/

How is that?

I’m fairly against the inline code at the moment due to the heavy rewrite of the CMS I am using for that, although if it would continually produce a more efficient site I will add it as an option. Although it would remove the issue I was having with the css cache expiring before the html cached did.

Is it just me thats annoyed at the inefficiency of the google+1 button? You’d think a company of google’s size, and the fact they tell everyone to be faster, would fully optimise everything they did.