In attempting to profile the performance of a site with PageSpeed tools i get a vague minimize main thread work suggestion as shown below:
The Learn More link is not exactly helpful here. I can see that style & layout is a large portion, so i'm trying to profile the site using Chrome Dev Tools. After i run the performance trace, i can see all the style, layout, and repaint in the main thread.
Where i am stuck, and have not found a helpful guide is how to actually translate these events on the timeline into the actual DOM element, or styles that are causing the performance bottleneck or particular repaint. All of the examples i've been able to find show a very simple example with just a few elements on the page.
How do i trace down what is causing the largest style and layout bottlenecks in terms of actual code?
Related
Our app loads extremely slowly, especially the pictures, and the developer has not been able to come up with a solution to this. The movements are slow and the buttons are slow in response (works on the 2nd or 3rd press).
The stability is terrible, for example the whole screen moves to the left by 2mm when you press a back button.
The app downloads information from the server every time it runs. We have tried changing the server, but this did not yield any results.
The current solution is to make the images smaller (compress them) to make the app run faster, but we are dubious if this will work.
Is there anybody who has had the same problems with their app?
I would be very grateful for any suggestions for how to fix this. We need it to be fast and responsive.
These are very vague, general issues. You ideally need a developer to take a look at the whole problem.
Some things they may look into would be:
Is data access asynchronous?
Are there transitions running on the
page?
Are styles being added on hover or focus?
If the app is written badly, simply chucking more resources at it probably won't solve the problem.
Does anyone know what the triangular warning icon on Google Chrome Developer Tools Timeline View represents? When I hover over it, click it etc - there's no different information provided than for any of the other events. The event itself doesn't look to be long either, I can't work out what it's warning me about.
Thanks.
This warning sign means that some code (e.g. element.offsetHeight or document.width) has triggered a synchronous layout event, which can adversely affect the performance in some cases. You should be able to see the associated stack trace if you expand the event tree.
A full explanation of this triangle and what it means is in the DevTools documentation:
https://developer.chrome.com/devtools/docs/timeline#locating-forced-synchronous-layouts
(source: chrome.com)
It includes a Forced Synchronous Layout demo to understand it better.
For some reason Google Page Speed, the add-on to Firebug, doesn't show the "Paint Snapshots" option as seen on http://code.google.com/speed/articles/browser-paint-events.html
I've tried this with the latest version of Page Speed on Fx 7.0.1 with Firebug 1.8.3 and Fx 5.0.1 with Firebug 1.8.0. Both to no avail.
My question is thus: what am I missing here? If it just isn't in anymore (all docs I can find are about Fx 3.x I believe), is there other software that does the same? That is, showing in fairly slow motion how a page is rendered, which assets are shown first, etc. For an example of what I'm looking for, click "Play Paint Events" at the URL above.
It looks like this feature was removed in an earlier version of Page Speed:
In the upcoming Page Speed 1.9 release, we will be removing the Page
Speed Activity panel. At the time of launch, Page Speed Activity
provided information unavailable in other tools like Firebug, such as
accurate DNS lookup timing, TCP connection timing, and JavaScript
parse/execution timing. As of Firefox 3.6, Firebug and other tools are
able to access the same DNS/TCP/network timing information as the Page
Speed Activity panel, and Firebug now displays this information in its
net panel. Thus, we have decided to remove the activity panel from
Page Speed since it duplicates information found in other popular
tools.
Page Speed Activity also provided JavaScript parse and execution
timing. However, in recent releases of Firefox, there was a noticeable
"observer effect" when profiling JavaScript parse and execution, which
made this timing information invalid.
Going forward, we recommend using an existing network waterfall tool
such as Firebug, HTTPWatch, Speed Tracer, or Chrome Developer Tools to
gather HTTP waterfall charts. Page Speed will continue to focus on
providing specific performance suggestions to make your sites faster.
Thank you, Bryan and the Page Speed team
I don't know of a suitable replacement for the Play Paint Events capability. As Andy Davies mentioned, webpagetest.org does have a "video record" feature which captures the page as it's being drawn, but perhaps not at the detail this tool used to have.
webpagetest.org can do a similar sort of thing
I've been pulling my hair out for the last few hours trying to wrestle with the IE8 developer toolbar while working with some styles not playing with IE7 mode properly...
Coming over from Firebug the difference is like... well lets just say its better then nothing.
What I'm wondering is, has there been any.. additions, patches, hacks, updates etc to improve the toolbar at all in IE8? It seems, like with most things associated with the IE line, this was really done as an afterthought and not much effort was put into making it work well...
Update: So I was, it seems, not specific enough.. here is what is annoying me about the IE offerings:
Style support - yeah, it is there, but it just doesn't feel right. It isn't easy to see the inheritance, and if you want to tweak an existing style you have to go into Attributes and add an override to the element.
HTML element location. This just seems a LOT cleaner in Firebug
Scrolling - If you have an element selected in the HTML pane, and you goto scroll in the CSS pane on the right it wont happen until you focus that pane.
Most of all its just the small annoyances - I think I've been too spoiled by Firebug, and I want it in IE - but considering the 'closed'-ness of the product it would be hard to get this rectified. To be honest, if I could contribute I would, because it would make my life so much easier - but... yeah.
Not sure what specific issues you are trying to debug, but the following tools all work well for their specific purposes:
Fiddler2 - HTTP Debugging Proxy - if you want to see what files are called, loaded, how, headers etc. this is the tool you want.
IE Tester - If you want to see how your site renders in IE6, IE7, IE8 without installing a bunch of virtual machines (or different PCs) this is a very good tool (not perfect, but very good)
DebugBar - Similar to the IE dev toolbar (but its been around much longer) it will let you inspect/alter various aspects of the HTML/CSS/JavaScript.
You're looking at Firebug Lite. See: http://getfirebug.com/lite.html
You can just install it easily onto your web page and it'll work just like Firebug on Firefox.
Tools may not help in this case as readily as you may wish. Here is Position Is Everything, a site that addresses some of the hacks required Internet Explorer. I have used IETester for IE 6 issues, but not for IE 8.
Good luck. IE issues really suck. If you're dealing with Sharepoint and it's mess of html and css I feel for you dude! If not, be thankful.
I am having my first foray into website design and I am learning a lot. I am also now seeing why web developers are not a huge fan of developing for Internet Explorer. Nothing seems to work how I expect. However, since the website has to work cross-browser, I am spending time looking at it in Firefox, Chrome, and IE. Something that is very non-obvious to me, however, is how to tell where problems lie in the website.
For example, the layout of one of my pages forces a footer to the bottom of the page. It looks great in Chrome and Firefox, but there's something broken in IE that make the footer align to the right (and cause a horizontal scroll to appear). I have played around with the code, but nothing really is responding to how I want in IE (even though it does in other browsers).
Are there any tools that can help "debug" the problems on a web site so fixing it is more than just a trial-and-error approach? Thanks.
One of my favorites that works in all browsers is X-Ray. You simply stick the link on that page into a bookmark and it loads some external JavaScript on top of the page you're testing. It reveals a bunch of parameters about the DOM object you click on, as well as its hierarchy in the model.
As for your specific footer problem, I would look to a potential lack of clearing of floats and divs that are wider than their parent containers somewhere up the line.
There are frameworks like GWT, ext-js, YUI which hide a lot of the browser bugs from you. But today (near the end of 2009), there still isn't a good, realiable way to narrow down browser issues and to fix them.
PS: I'm collecting tools that help during debugging here: Which tools do you use to debug HTML/JS in your browser?
I assume you have checked that your code is valid, with
HTML validator, for example: W3C Markup Validation Service
CSS checker, for example: W3C CSS Validation Service
And, of course, you should have correct doctype in your html file. Without doctype, some browsers go to quirks mode to emulate bugs in old browsers.
A cross-browser JavaScript library, like jQuery and its UI components, can be very helpful in avoiding idiosyncrasies between browsers. Microsoft provides the IE Developer Toolbar, it's not quite as easy to use as Firebug, but can still be very helpful. A Just-In-Time debugger like MS Script Debugger or Visual Studio are also a time saver.
I like Firebug for Firefox
and IE8 has Developer Tools from the tools menu and IE Developer Toolbar for older versions.
Chrome has similar tools from the page menu.
All of which allow you to see elements on the page as they are rendered in their specific browsers, which I usually find very helpful in debugging browser specific problems.