I'm using Chrome's Lighthouse audit to make some performance improvements to a website and there are some styles under the "Remove unused CSS' section that I cannot locate anywhere on the site.
The ones I am questioning are the 2 lines starting html, body etc.
They look a bit like reset styles but aren't the ones I have in the CSS file.
I've tried searching the theme files (this is a shopify site), the page source, turning off javascript and these styles don't show up anywhere.
Has anyone encountered this before?
Since it's a Shopify Site it's using the Shopify style CDN by default. Since it's a CDN the css files are not going to be found in your project directory but rather on Shopify's website. An example of a style CDN can be found here, this one is for bootstrap.It uses a URL to access style options that are stored on their servers so you don't have to download the CSS locally.
Here's more on CDNs.
As for your issue, it looks like your project is referencing these CDNs but you're not using them. If you can find where in your project these CDNs are linked and remove them/comment them out it should resolve the issue.
Here's a similar question about whether or not it's safe to remove unused/deferred styles for Shopify.
Related
I've got this stylesheet loading on the index, but I can't seem to find the source anywhere. After researching CodeMirror, I'm guessing it has to do with the page customizer?
Is there any way to disable this stylesheet?
This stylesheet is not included in the code of theme.liquid
It's loaded via the {{content_for_header}} in the head section.
It is not coming from an app, as one would suggest,
Its coming from Shopify and is only loaded, when previewing a theme.
It is a little misleading when you are trying to get the page-load down and you are using the developer tools from chrome.
Inspect the theme again after it's live or block the requested URL in dev tools.
If the stylesheet is included in the layout/theme.liquid file, then you can comment out or remove it there.
If it is not included in that file, there is a good chance that it is coming from a Shopify app store app. If that is the case, you would have to check that app for settings, or not use that app.
As I'm sure many of you know, Google PageSpeed Insights will sometimes complain about what it calls "render blocking css" when you test your sites.
Their suggestion is to render only "necessary" CSS inline in the HEAD. If you have CSS in an external file (as most everyone does), the recommendation is to load this after the page loads. This seems pretty extreme, but that's the recommendation. It appears to be a big blocker to improving one's Mobile PageSpeed scores as well...
You can use the PageSpeed Module for Apache or nginx to help you identify which CSS is actually "necessary". Again, one can argue about the relative value of doing this, but it is Google's current recommendation.
I had a notion to use javascript to "Lazy Load" the CSS file by having a small script fire in the footer of my theme, injecting the CSS into the head. You can see an example of this technique here: https://bensmann.no - This is NOT my site. I'm basically looking to replicate or copy what he's done with his minified CSS - Load it into the HEAD after the page has loaded via Javascript contained at the bottom of the page
I would then put <!-- W3TC-include-css -->
inside a <noscript> tag, thereby suppressing the placement of the minified CSS, as well as ensuring it appears for non JS browsers.
So, the issue is I need to get the location of the minified CSS file somehow, as well as the hash used to name the file (for an ID for the element). Anyone know how one can access the location of minified CSS file with PHP in the footer?
While this post does not give you the solution, it might bring you closer to moving the css where you want it:
http://freetheweb.tumblr.com/post/12482217372/w3-total-cache-better-css-js-placement
You'll have to learn about Critical Path CSS, which is a slippery slope, and truly, nobody really knows for sure which CSS is critical or not.
In the interim (or as a permanent solution), installing a plugin like Autoptimize and playing around with it will greatly improve your Page Speed Insights scores.
Remember to tick Show Advanced Options when going to the settings. I'd personally suggest to just inline all CSS and use that option, but that's just me.
If any plugins are broken after implementing this, just untick the Optimize CSS code, find the plugin's CSS file, and add that to the exception list.
I need to edit a css file that manages the position of certain buttons for a block.
Using Google Chrome to inspect the element, Drupal only gives me this information about the css file name: DSFJHjdfkvwvSDFVSFbvnhsdjnvjsdnfjbvw.css
Wonderful... that doesn't exist. How am I suppose to pinpoint the exact location of a css file? I've torn apart the css files within the styles folder in themes.
So basically finding the source code for everything in drupal requires you to find the needle in the haystack. Is there a way to find exactly what css files my webpage is using by using the admin panel??
Drupal, for performance reasons , aggregates all CSS files into one generated file so only 1 request Is needed to load all necessary styles.
You can disable this (not recommended on a prd site) by going to the performance settings in drupal config and disabling js and CSS optimizations.
Clear the cache and now you will see the specific file the CSS rule lives in when inspecting in chrome tools.
As a side note, it is not recommended to edit anything in a contributed module unless you contribute it back. Otherwise, when you need to upgrade to the next version of the module, you will lose your previous changes. I would just apply CSS rules in your custom theme that override the modules CSS.
Sorry if there are typos. This was written on my phone and I will clean it up when I am at my desk.
I think in your drupal configuration you have enabled the "Aggregate and compress CSS files" settings. Try disabling it by going to Configuration > Development > Performance. It might solve you problem.
You can revert back the setting after you have made changes.
Turn of the caching and then clear the cache. You should then get the correct location of the CSS rules. Once you are done with this, enable caching again.
In my asp.net mvc application, I'm using bundling for css. When I created a new css stylesheet and used the same id names as another page in the application, the styles on the first page were messed up.
I must be doing something wrong as I know that the same id can be used on different pages, but I don't find others having this problem when I searched the web on the subject.
Please help. Thanks.
The two CSS files are styling with the same ID (yet intended to style different pages) are bundled together and causing styling problems on those IDs.
This is because the page is loading the bundled CSS file then all the styles (from both CSS files) are applied to that ID regardless of page. The solution is to only load the relevant CSS file (and not bundle) or of course use different IDs.
id re-use throughout an application is unusual and often overcome by using class instead.
^^ summarized from comment discussion
You should be able to look in your developer tools (firebug, chrome devtools) and see which styles from which stylesheets are messing things up. Or am I misunderstanding the problem?
I'm making a website that will have to render correctly on FF/IE6/IE7/Opera/Safari. IE6 came as a late requirement (when I had done all the other browsers) and it just has to be useable, not necessarily the same as on the other browsers. Now I'm tweaking it so that it's useable on IE6 as well.
To this end I've created another stylesheet in my theme called IE6_override.css. As you might have guessed, I want it to be applied only when the browser is IE6. Conditional comments would perfect for this.
The only problem is - ASP.NET renders a <link> tag for every CSS file that is in the theme's folder, thus including this file unconditionally on all browsers.
I would like to stick to themes because it's completely feasible that we might create more skins for our application later (if the customers desire that).
Is there any way how I can make ASP.NET exclude this specific .CSS file from its auto-including?
Added: Thank you for your answers! In the end I found a workaround. Due to some other styling problems I've asked about earlier, I'm forced to have a IE6-workaround Javascript as well. Thus I prefixed all my IE6-specific rules with a .ie6_dummy class selector and then removed it in JS upon page loading. :)
Yes you can... You can just remove the specific page header control in code behind. The css files are added automatically through theming, but u can remove them again after. Like for example u can put in the page load of your master file:
Page.Header.Controls.Remove(YourCssFile);
Or if you wanna have all the css files removed at the same time:
var themePath = string.Format("~/App_Themes/{0}", Page.Theme);
var removeCandidate = Page.Header.Controls.OfType<HtmlLink>().Where(link => link.Href.StartsWith(themePath)).ToList();
removeCandidate.ForEach(Page.Header.Controls.Remove);
I don't think you can. We stopped using the App_Themes folder for exactly that reason. This also saved us having to prefix every css file with a number so they load in the right order.
Indeed it's not possible to exclude a specific CSS file. However, there seem to be several workarounds located here. I'd suggest reading through those and choosing an appropriate solution (if any).
There are a couple of posts out on the web which seem to address your problem - looking for "Conditional comments in asp.net themes" I came across these which look like they may help:
How to take control of style sheets in ASP.NET Themes with the StylePlaceholder and Style control
Conditional stylesheets in Themes
The first one will also address the media issue with theme stylesheets as well.