Hello,
I would like to get Your opinion on:
http://www.webpagetest.org/result/140418_TN_WHA/
Let’s take Run 4 as an example for discussion:
http://www.webpagetest.org/result/140418_TN_WHA/4/details/
HTML and CSS is completely loaded around 0.6 sec. All images have dimensions on them. There are no iframes, objects etc. JavaScript is deferred (actually the same behavior can be noticed when JS is disabled). Yet first paint consistently occurs around 1.4 sec. I’ve spent quite some time on it and I can’t tell why is it happening. Do You have any ideas or tips how to analyze the issue? Or any tips or gotchas I should be aware of?
Note:
I don’t see anything fancy going on Timeline in Chrome - only data is being downloaded.
That’s about as good as you’re going to get without spriting a couple more icons and maybe switching some of the png’s to jpgs. Even at that you’re going to see minimal improvement. Might be worth lazy loading some of the images but again its going to be a miminal improvement over where you are now? 4 seconds is generally considered to be the break point for a good websites and your in the one second range.
Hey not bad at all. In addition to what Chris above is saying, I would also see if I can do without the custom font files. These represent 3.8% of your page load. Do you really need them? Most browsers aren’t going to display them anyway, and they still get downloaded regardless.
Also, there are some images you can fix up still and really save bandwidth on. This image for starters - the third option you see there it’s 43% smaller in file size than what you’re using, saving 23kb.
Here’s your entire image breakdown and you can see, there’s still some trimming to be had on several of the images. Just click where you see “Analyze JPEG” and WPT will make your optimized images for you.
You’ve done a nice job with this it’s refreshing to see.
Thanks for tips:) However I really just wanted to discuss why browser is waiting so long to do first paint and how it can be optimized. I have a feeling that there is still room for an improvement, even without ‘over optimizing’ things and making them overly complicated. I would like to cut another 300-400 ms from first paint event.
Fonts - they are loaded dynamically so that’s not that big of an issue, but yes, I would like to get rid of them too.
CSS sprites - I leave them for the end of optimization process. They are maintenance hell in my opinion, especially on e-commerce site where sprites may include images from several third party modules.
Images - true, some images could be better optimized. For now however I rely on lossless compression . The heaviest image is noticeably different at 85% quality setting.
[quote=“datadiggers, post:4, topic:8686”]
Thanks for tips:) However I really just wanted to discuss why browser is waiting so long to do first paint and how it can be optimized. I have a feeling that there is still room for an improvement, even without ‘over optimizing’ things and making them overly complicated. I would like to cut another 300-400 ms from first paint event.[/quote]Trying the basic optimization techniques posted thus far might just improve that, and can certainly do no harm at all. It’s just a little bit of extra effort.
There is NO such thing as “over optimizing.” Taking 200kb or more of unnecessary bandwidth off each pageload is the payoff, improvement of first paint if it results, is a bonus.
That’s 200kb-plus each pageload, times what? A thousand? A million, over time? That’s alot of bandwidth and alot of saved load time.
Trim what little unnecessary bloat you have, then see what happens to first paint time.
[quote=“datadiggers, post:4, topic:8686”]Fonts - they are loaded dynamically so that’s not that big of an issue
[/quote]That’s not relevant, they are still representing over 3 percent of your bandwidth, 3 percent of your kb load, and add time. And 3 percent is right at what you’re looking for, in improvement of first paint time.
Optimize code, look at this:
it’s not the only way, but help a lot.
datadiggers , Hi there ))
What to start from…hm. Don’t get why no one pointed that site’s JS as slow as hell.
That UX is very poor . Everything feels slow (But visual feedback on hoverover - mobile like behaviour)))
1 - Don’t build lay out with help of JS ( that is what you do for - Green buy buttons , Header, nav menu ) I have a believing that rendering does not start since it waits for JS loaded 2014-04-23_0727
2 - Fonts should not be deferred. Since it visually very obvious how unstyled fonts become styled )
3 - all of js animations should be faster , remove time out , if exists . IT feels slow when Hover over navigation menu or products - Now it is noticeably slow
Perfomace:
1 - CSS 2014-04-23_0747
2 - image subdomain ?
3 -
bugs: http://screencast.com/t/lWtSDh0NpJlK, 2014-04-23_0749 and so on
So my verdict : Get a QA first. Get your UX speed better
