Comments (8)
Currently we're relying on WebPageTest as a source of data. Is this something we can extract from there? If not, what other tool would you recommend?
from speedtracker.
Hi @eduardoboucas,
You may want to check this - http://stackoverflow.com/questions/34179483/how-to-find-resourcescss-js-etc-that-are-blocking-in-chrome
Paid offerings like speedcurve also use webpagetest in background and are able to figure this out so I am sure based on above thread on stackoverflow, there is a way to figure this out.
Rockey
from speedtracker.
Where would we display this information? In the same graph as the content breakdown (requests)? I'm not sure it's a good idea to add yet another chart, as we'll end up with too much information.
What do you think?
from speedtracker.
I think it's ok if you want to add this to content breakdown (requests) graph. I would like to see two metrics (Critical blocking CSS and Critical Blocking JS).
from speedtracker.
In that case a separate graph with render-blocking CSS and JS would probably make sense.
I just wonder if the method of determining whether a resource is render-blocking that you linked to is really accurate. If you have a bunch of scripts with defer
, the browser could technically start retrieving them before the first paint time and yet they're not render-blocking?
from speedtracker.
Good point..
I think this is how speedcurve has done this ..https://speedcurve.com/blog/critical-blocking-resources/
I guess this is the key part from above link
Not all scripts and stylesheets necessarily have a big impact on performance, so it's important to be able to tell the blocking requests when trying to improve the user experience. In the waterfall above we see that there's an early script (request #6, "lazysizes.js") that is not marked as a critical resource. That's because this script is loaded asynchronously and thus doesn't block rendering of the page. Since we only want to highlight resources that block rendering, asynchronous scripts are not highlighted.
Similarly, in some cases it's possible to have stylesheets that don't block rendering of the main page. This typically happens with third party widgets that are loaded in an iframe, like the Twitter widget. Since stylesheets in iframes do not block the main page from rendering, they're not marked as critical resources.
from speedtracker.
You should also check this - https://speedcurve.com/blog/measuring-blocking-resources/
I think this can get complicated. I wish if this information was available from WebPageTest as standard metric.
Not sure if you want to take speedtracker this far and start to build all this logic.
from speedtracker.
So I suppose we'd need to actually download the HTML page for the given URL and inspect the DOM look for scripts and stylesheets, taking into account their attributes and position in the document.
I agree that the information is very useful, I just wonder if building (and maintaining) this is viable.
from speedtracker.
Related Issues (20)
- Inaccurate Google Pagespeed results HOT 2
- Deep linking to historical reports HOT 2
- No repeated tests
- Increase visibility
- Display monthly average load time when period is year
- Delete incorrect measures (outliers) HOT 3
- Tests not running as scheduled HOT 2
- Graphs showing no data despite tests running for 3 months HOT 4
- Add custom Headers to the test
- Is it broken? Or did I not set it up right? HOT 3
- Internal Server error when using special characters in encryption key
- Use with BitBucket? HOT 1
- Don't get automatic updates HOT 1
- Content breakdown as metric
- Running test with scripts
- Application error when running test HOT 4
- Innacurate Google PageSpeed results
- All tests are blank
- Speedtracker test bot is down since 2019-09-19 HOT 2
- No test is running since 2021 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from speedtracker.