Current time: 12-15-2017, 04:54 AM Hello There, Guest! (LoginRegister)

Post Reply 
 
Thread Rating:
  • 1 Vote(s) - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Suggestions for more speed
03-05-2012, 10:35 AM
Post: #1
Suggestions for more speed
Hi

Results at http://www.webpagetest.org/result/120304...1/details/

The animation is the bugbear I want to work on. At the moment I have it set for IE7 or less to pull the separate images, and IE8+, Chrome and Firefox have the images embedded in the html in base64.
I think I can css sprite a few images, and have just come across Helium (https://github.com/geuis/helium-css) so will be trying this to trim the CSS down. Is there a tool for analyzing js the same way?

Can anyone suggest anything else to improve the results? the TTFB for the images seems slow to me, and I occasionally get a 1sec+ TTFB for favicon.ico

Thanks

Doc
Find all posts by this user
Quote this message in a reply
03-05-2012, 10:26 PM
Post: #2
RE: Suggestions for more speed
Hi Doc,

The Base64 images is an interesting idea. Have you done some before/after tests comparing page load times? Has the embedding of images in html improved or worsened the overall page load time?

I played with Base64 images at one point, too, but in my case it slowed the load time. I suspect this trick may be useful for just very small images, but not useful for larger jpegs.

Marvin
Find all posts by this user
Quote this message in a reply
03-06-2012, 02:05 AM (This post was last modified: 03-06-2012 05:12 AM by SWortham.)
Post: #3
RE: Suggestions for more speed
Well you've already mentioned CSS sprites. It'd be nice if you could make CSS sprites out of just about everything. I understand the difficulty though. When you're dealing with images from a product database like this it's not really practical to use CSS sprites for the products, for example.

However, several of your PNGs/GIFs can still be combined.

Check out this sprite from StackOverflow for inspiration...
http://cdn.sstatic.net/stackoverflow/img...es.png?v=5

Then I'd suggest moving as much as you can to a CDN. CDN's are very cheap nowadays. In addition to the performance you'll gain in terms of reduced global latency, you'll have a few other benefits:

1. Moving static content to a cookieless domain helps since the request no longer contains a cookie, therefore reducing request payload & latency.
2. Serving up content from a 2nd domain allows the browser to download more assets in parallel.
3. Using a CDN for your static files frees up your server to just focus on the dynamic content.

Those 3 benefits all pay off. If you look at the graph along the bottom for bandwidth usage, you can see drastic dips in bandwidth. This is due to the inherent latency of so many files being downloaded as well as the browser's limitation of only being able to download 6 files simultaneously from a single host.

Oh, and as for embedding the base64 images in HTML, I'd be worried about how the repeat view time is affected. Sure enough, your repeat view time is only a couple tenths of a second faster than the first view. I'd be tempted to just serve the images individually (and set appropriate max-age headers). Your first page view time might be slightly slower. But the "start render" time should improve, and the repeat view time will definitely improve.
Find all posts by this user
Quote this message in a reply
03-06-2012, 05:19 AM
Post: #4
RE: Suggestions for more speed
Hi all

Thanks for replies

Base64 images - embedding them in the page is about 1/3 worse than the images as std, but don't forget the pages are then gzipped down the line - try the same test for IE7 to see it run with 8 separate images and the results - at least 2 seconds worse, see http://www.webpagetest.org/result/120305_AC_3FJT8/
I'd actually tried the animation as both background and foreground css sprites, but it didn't play nice for me - I couldnt get the images not frontmost to scale properly.
The only other idea I have had is to throw up a static snapshot image of the animation so that there is something there, then lazy load the whole animation on top of it after the page has loaded.

CDN - I have set up 2 subdomains - http://www.cdn1. and http://www.cdn2. - but because the pages have a base ref in the top, then a lot of the images are loading using one of the subdomain paths, as though they are being carried on thru the page from the last subdomain reference. Ideas anyone?

Static content - are js, css and images classed as static content? The pages are all dynamic php, except a single lazy load layer in the footer on the index page

Thanks

Doc
Find all posts by this user
Quote this message in a reply
03-06-2012, 05:37 AM (This post was last modified: 03-06-2012 05:41 AM by SWortham.)
Post: #5
RE: Suggestions for more speed
(03-06-2012 05:19 AM)doc_uk Wrote:  Base64 images - embedding them in the page is about 1/3 worse than the images as std, but don't forget the pages are then gzipped down the line - try the same test for IE7 to see it run with 8 separate images and the results - at least 2 seconds worse, see http://www.webpagetest.org/result/120305_AC_3FJT8/
This isn't actually a fair test. IE7 could only download 2 files simultaneously from a single host. That's why the waterfall looks so different. There aren't as many overlapping downloads. As a result, most websites you visit in IE7 are going to be substantially slower to load than in IE8 (which allows 6 simultaneous downloads per host).

(03-06-2012 05:19 AM)doc_uk Wrote:  CDN - I have set up 2 subdomains - http://www.cdn1. and http://www.cdn2. - but because the pages have a base ref in the top, then a lot of the images are loading using one of the subdomain paths, as though they are being carried on thru the page from the last subdomain reference. Ideas anyone?
What are you using the base href for? Is it possible to do without it?

The way I've done this in the past is like this...
1. Move my CSS file to cdn.[mydomain].com/screen.css and update my href to point to that URL.
2. Move all of my images and javascript into the root of the CDN as well.
3. Use relative links to images inside screen.css. e.g. url(sprites.png)

(03-06-2012 05:19 AM)doc_uk Wrote:  Static content - are js, css and images classed as static content?
Yes, that would all be classified as static content.
Find all posts by this user
Quote this message in a reply
03-06-2012, 06:06 AM (This post was last modified: 03-06-2012 06:07 AM by Marvin.)
Post: #6
RE: Suggestions for more speed
Quote:Base64 images - embedding them in the page is about 1/3 worse than the images as std, but don't forget the pages are then gzipped down the line - try the same test for IE7 to see it run with 8 separate images and the results - at least 2 seconds worse, see http://www.webpagetest.org/result/120305_AC_3FJT8/

Doc,

But that's not a fair comparison because IE7 is able to do only 2 parallel downloads per domain while "modern" browsers can do up to 6 of them. That's likely the (main?) reason for your worse test result using IE7.

Marvin
Find all posts by this user
Quote this message in a reply
03-06-2012, 06:33 AM
Post: #7
RE: Suggestions for more speed
(03-06-2012 06:06 AM)Marvin Wrote:  Doc,

But that's not a fair comparison because IE7 is able to do only 2 parallel downloads per domain while "modern" browsers can do up to 6 of them. That's likely the (main?) reason for your worse test result using IE7.
That's what I said. Wink
Find all posts by this user
Quote this message in a reply
03-06-2012, 07:04 AM
Post: #8
RE: Suggestions for more speed
(03-06-2012 06:33 AM)SWortham Wrote:  That's what I said. Wink

That's the result of me opening my browser to read a post, and then, a half an hour later getting around to replying, but failing to refresh the page first to check if a new reply has been posted since. :-)

Marvin
Find all posts by this user
Quote this message in a reply
03-06-2012, 07:21 AM
Post: #9
RE: Suggestions for more speed
@Marvin + SWortham
Point taken - I had images with less content (and thus less kb) initially when I set this animation up. I've just tried it on our test site for IE8 with the animation as 8 separate images rather than base64, the results come in about the same times for the document complete time. However what has stayed from the initial testing I did when setting up the animation is the improved start render time - 1.9 seconds for the base64 images page as opposed to 3.1 seconds for the 8 images, both on IE8.

@SWortham
The subdomains are symlinked to the main domain at the moment. I am currently loathe to take out the base tag in the header because it's supposed to be good SEO. I'll do some more playing on this to see if I can stop cookies on the subdomain that is symlinked.

Thanks
Doc
Find all posts by this user
Quote this message in a reply
03-06-2012, 08:33 AM (This post was last modified: 03-06-2012 08:54 AM by SWortham.)
Post: #10
RE: Suggestions for more speed
(03-06-2012 07:21 AM)doc_uk Wrote:  @Marvin + SWortham
Point taken - I had images with less content (and thus less kb) initially when I set this animation up. I've just tried it on our test site for IE8 with the animation as 8 separate images rather than base64, the results come in about the same times for the document complete time. However what has stayed from the initial testing I did when setting up the animation is the improved start render time - 1.9 seconds for the base64 images page as opposed to 3.1 seconds for the 8 images, both on IE8.

That is weird that the start render time increased. I wonder if your Javascript is blocking the rendering somehow until the images have downloaded. That normally doesn't happen, but maybe it's possible. I did notice that your anim.js file is referenced inside the <head>. If it's possible to do so without causing errors, you'd be better off putting this file in the <body>. That's because rendering will be blocked until all CSS and JS files in the <head> have been downloaded.

Also I don't know if you've run into this problem. But after StackOverflow was launched Jeff Atwood soon regretted launching with the stackoverflow.com domain. By not including a www, the cookies are shared across the entire domain by default. Therefore introducing a cdn.stackoverflow.com subdomain wouldn't actually be a cookieless domain. But if your entire site is sitting on 'www', then you can introduce a new subdomain 'cdn.[mydomain].com' and it will be cookieless as long as you never explicitly create cookies or serve dynamic content from that subdomain.
Find all posts by this user
Quote this message in a reply
Post Reply 


Forum Jump:


User(s) browsing this thread: 1 Guest(s)