I would like to analyse the amount of unused CSS on my webpage. This web page is written in Angular 7 and the css is being added in the angular.json build configuration.
This seems to be appending the css to the head of the html file; in the developer tools I can see several style tags.
I have read in many places that I should use the coverage tab of the developers tools in Google Chrome to do this. For me this is working for JS but not for CSS.
Here are screenshots of what I am seeing:
It is all JS. If I filter for files that conatin css it returns no results
But I can see that css files have been downloaded here.
How can I analyse the code coverage styles in the head of the document?
The head of my document looks like this:
p.s. I am using Chrome Version 75.0.3770.80 (Official Build) (64-bit)
So all your CSS is internal it seems (they're not being served from a file, are bundled in the HTML).
Do a small test: put the CSS content of one of the <style> tags in a .css file (for instance, test.css) and include those files in <head> with <link rel="stylesheet" href="test.css">, and see if they work, and show up in coverage.
(and remove the corresponding <style> tag from original)
EDIT
If you don't filter by keyword CSS, you will see that there is a single row with type CSS+JS or JS, which DOESN'T show when you filter by keyword CSS.
Since your styles are all bundled in the HTML, they all clobber up to this row!
For instance:
Your address would be the root URL of the application.
EDIT
https://codepen.io/nilo-c-sar-teixeira/full/KLjbZW
You were right regarding dynamic CSS, it just isn't covered in the tab. The above link puts a <style> tag via javascript and the rules never show in any rows of the coverage tab. Good job :)
Related
Goal:
I have a specific clientlib ready with "critical CSS" that I would like to add to a page template in <style> tags, per Google's performance recommendations on a high-traffic e-Commerce site.
Problem:
We all know how to add a file reference in HTL:
<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientlib.css # categories='template.noncritical'}"/>
but how would I output plain generated CSS styles on the page via HTL? Is there some other HTL property I could use?
I want this:
<style>
/* contents of AEM clientlib CSS here */
</style>
Tried:
I have Googled, searched StackOverflow, and looked in the AEM docs about clientlibs, but haven't found anything about inlining styles, except to
use a third-party script to inline critical CSS. (don't want to do)
modify HTML Library Manager OSGi configuration to inline all styles by default (don't want to do)
I am looking for something AEM-native that can be turned "on" or "off" in HTL. Thanks for reading and offering any solutions you may have.
You can try https://github.com/dmantsevich/aem-critical-css
It will generate CSS files and "integrate" with AEM. You can use it for extract small component CSS.
Some features:
CSS will be loaded only, if component presents on the page
Supports 2 injection types: <style /> and <link />
Supports less, css, scss.
CSS will be injected only once
Example:
MyComponentTemplate.html
<sly data-sly-use.aemCriticalCSS="${'./_aem-critical-css.js'}"
#aem-critical-css="my-component/my-component.scss">${aemCriticalCSS.inject # context="unsafe"}</sly>
Where my-component/my-component.scss is a path to css (related to ui.frontend/src/ folder). We used it on several projects and it helps to improve rendering performance. (path can be configured)
You can use the Core Components functionality https://experienceleague.adobe.com/docs/experience-manager-core-components/using/developing/including-clientlibs.html?lang=en#inlining
<style type="text/css"
data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' # categories='wknd.base'}">
${clientlibs.cssInline # context="unsafe"}
</style>
I am working on changing the styling of pages within a learning platform. The platform allows for the user (me) to use my own CSS to change the styling of pages I myself have created. The problem is that the platform uses som predefined (and unknown to me) CSS before appending their CSS with my CSS. I don't have access to the actual HTML.
Here is the problem: I would like to use web fonts in my CSS. I have therefore been trying to use #import at the start of my CSS. My CSS is appended too late to the predefined CSS for #import to take effect. The only code I can give the system is my own CSS so I can't directly edit the html head to link to the web fonts.
Is there any other way to add web fonts to my CSS with said CSS being the only code I can write? Is it possible within CSS to append links to the html head? The support team of the platform consider this is a bug but don't offer a workaround. It would be nice not to have to wait for an update if possible.
I understand that CSS is used to decide about Layout and other styling things on Web Page. and If CSS is at the bottom of the page then everything (html elements, text, image, etc) will be displayed by using Browser's own styling and when browser find our CSS then it redesign pages again for us. It may be called repainting!
So, I understand that it will look very ugly repainting the page and user seeing it (FOUT - Flash of Unstyled Text - as expert named). But still, I want to understand about:
How much time this repainting can take? Approx value! I understand this can depend on content on the page.
What else happen or can happen?
My main concern right now is about using font-awesome CSS file (externally hosted on their own cdn which download css and font files). I want to know what will happen across devices if I place this at bottom of the page or delay its loading ? Currently it is placed on <head> section as
link rel='stylesheet' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' type='text/css' media='screen'
Use Del so that it should not look main part of the question. Main part of the question is about Some CSS at the bottom then What will happen to repaint, Blocking, etc. with measurement given or supported by measurement etc.
In the above case or in case when only part of document will get affected by CSS at the bottom then what will happen? Browser repaint everything, and what else? How much time it can take. Suppose, font-awesome is used at 10 icons placed in <i>.
I am never sure of what actually happens when CSS is at the bottom. So, please if you have any video or image showing flow then please mention here.
Base everything on performance across devices, and off course user experience as well. Thank you.
Update: I got something more for myself and for everyone.
Here is a function (delayLoadCss) Google suggest for css for below-the-fold content. Though, I am not going to go that extreme but what about doing that for Font-Awesome kind of CSS?
In my experience the loading of css will be virtually instantaneous no mater where it appear on the page--except in one instance: what will cause a delay in the browser applying your css is placing your css after a script element that takes time to complete.
This is why it is considered best practice to end your body section with your scripts, that way your page is rendered and styled before the browser commits to crunching through your scripts.
So if you html looks like this:
<head>
<link rel="stylesheet" type="text/css" href="/css/styles.css">
<script>
[long loading js]
</script>
</head>
<body>
... content
<script>
[long loading js]
</script>
</body>
Then your css will still be applied right off.
However if you structure it like this:
<head>
<script>
[long loading js]
</script>
<style>
[css here]
</style>
</head>
<body>
... content
<script>
[long loading js]
</script>
</body>
or even
<head>
<script>
[long loading js]
</script>
</head>
<body>
... content
<script>
[long loading js]
</script>
<style>
[css here]
</style>
</body>
Then your css will not be applied to the document until after the js has completed.
The first is best practice and I recomend keeping style tags out of your document completely, but certainly out of the body of your document. External style sheets placed above you script tags is the way to go... This is true for font awesome's externally hosted css also. The browser should not hang on rendering that unless your link to it appears after a script element that is taking up the browsers attention.
* EDIT *
However this post directly contradicts what I just said.
There are two cascades that occur with CSS.
The small Cascade: this is the parsing of an individual style sheet
The Big Cascade: This is where the browser performs three "small cascades", in this order:
User Agent (the web browser's native stylesheet)
Author (the stylesheet that you write)
User (the stylesheet the end user can write).
Your question is about what would happen if you put styles anywhere but the head. Let's discuss:
The browser has its own native stylesheet sitting in the background
The browser loads your HTML document first
The browser then reads the <head>
the browser loads assets in the <head>
the browser parses the rest of the document, i.e. the <body>. assets and style rules located here will be processed last.
the last <style> block, or the last stylesheet in your document is the one whose styles over ride everything else.
In a nutshell, the browser applies styles in the order in which they are seen. A stylesheet at the footer would make things worse, not better. I can't offer a quantifiable measurement of worse because I don't have your stylesheets or website.
All Browsers have FOUC (or FOUT). The duration of it is based on the speed of the browser and the quality of your stylesheet. A minified stylesheet which applies text styles immediately after the reset, and before other styles, usually has the least amount of FOUC.
The styles in the footer are not blocked from being processed, and they will not block styles in the <head>, either. Styles in the footer are simply processed last.
I appreciate the answer from Jeremythuff, however I would also like to answer as well and hope it helps you.
Approx it will take a time to download CSS file (if not cached and not inlined) + a moment. This moment depends on CPU, GPU, HD speeds (if cached) and content + scripts as you have already mentioned. In real practice you do not want to use [link href="..."/] at the end of body because of download time.
You also do not want to use inline styles, because they are not cached and this is yet another piece of code users will download with html, however, this solution can work with small inline styles. In practice it does not produce blinks.
I recommend the following schema:
HEAD > MAIN CSS > BODY > HTML > ADDITIONAL CSS > SCRIPTS
If scripts change default behavior of elements (for example preventing a link from clicking) I recommend to put scripts in head instead.
Now about fonts. In my opinion using external fonts is a bad practice. But if you want, fonts better to include in head because you probably cannot inline them in style tag. So the download time problem occurs here.
10 icons is nothing for nowadays CPUs even on mobile phones.
My advices are straightforward:
(if across devices, I also think of page weight because of slow mobile networks)
Have large additional css (significant difference between the size of html with and without css) - do not include at the end nor as [style]...[/style] (never caches), neither as [link href="..."] (takes download time).
Have small additional css - try with [style]...[/style] at the end of the body before scripts.
Do not worry about 10 icons rendering, worry about download time for 1st visiting users (for fonts).
Your questions are interesting... But there's a problem:
CSS stylesheets must be placed in the <head>!! (except if they are scooped)
Otherwise, your html markup is invalid. Then, every browser could handle it differently.
If you want to look at the CSS of other people's websites (to steal learn from them), Firebug lets you inspect the prettified CSS:
But in Chrome 16, you only get the minified CSS as it was served out:
Is there a way to get Chrome to prettify the CSS?
In the newer versions there is a "format" button that prettifies the source:
(only just realised myself :P )
The Developer's console shows the file as served. If you want a human-readable version, copy-paste the code to http://www.codebeautifier.com/.
If you use the Elements tab, the applied CSS properties are also shown per element.
I recommend Quick Source Viewer, which is an extension to chrome and requires no human copy-pasting (acts sort of like an extra chrome dev-tool).
It can show you the source of the current page formatted and colour coded.
It's pretty powerful, showing all 'sources' of the page, be it css, js or html. Even things like inline css/js can be viewed individually (with injected code highlighted). And the best part is it prettifies all of them, even the css (which chrome's dev tools still refuses to do).
You may want to checkout Pretty Print: https://chrome.google.com/webstore/detail/prettyprint/nipdlgebaanapcphbcidpmmmkcecpkhg?hl=en
After installing, when you view a minified CSS or JS file, it will appear (after a moment) un-minified.
I'd like to print http://www.delicious.com/tags/engmark to PDF (Using Firefox on Linux, if possible), but the result looks rubbish. How can I print without taking into account the print-specific CSS (which I think is loaded by the enormous JS on the site)? I tried to disable print CSS in the Web Developer extension, but that didn't affect the print output.
I looked through the HTML file and found that there's a link tag with the attribute of media="screen"
If you just remove that attribute, the CSS would then load.