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.
Related
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.
I have an app which needs to work in several languages, and several different color schemes and I would rather not load all the CSS every time since a large amount of it is not necessary or relavant (rtl css for example) but meteor automaticaly loads all CSS files he can find.
is there a way to selectively load CSS files?
Thanks.
If you place a CSS file within the reach of Meteor compiler, it's merged into the main app and in the current release there's nothing you can do about this.
You can however put the file in /public directory. Meteor won't touch it there, and you will be able to load it at will by adding <link/> tag to your page head.
Please have a look at https://stackoverflow.com/a/26694517/1523072 which seems a quite elegant way to do this and also explains why you shouldn't do it.
One of my apps currently loads 2.6MB compressed Javascript and 300KB compressed CSS, which seems like a lot. However, after the first visit all the resources are cached by my browser, which means the only thing that is transferred between browser and server after that is pure data.
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.
I've been working with the ModX Revolution manager, and was wondering if I can turn my CSS into ModX Resources rather than files. I'd also like to utilize Templates and their variables. Is that possible? What are the drawbacks of doing so? Are there any advantages (aside from the ones I think below)?
The reason I would prefer this is that I use several CSS pages with the #import statement to object orient my CSS a little bit better. If I could do this directly in ModX, it would save me uploads and syncing.
In previous versions of ModX (Evo and Revo), you used to have to go through tricks. Now with 2.2.2pl, it is possible with very few tricks. The information to do this is sparse and inaccurate any more. Here's how you do it:
Create Your Template
Create a new Template. I named mine CSS Stylesheet. (Simple as that)
For the content, simply put [[*content]].
Create Your CSS Page
Create a new resource. Name it whatever you would like.
Add your alias. Make sure you do not add the .css at the end. ModX should do this for you.
Now, make sure your new page is published. You may also want to hide from menus.
Add your CSS code. No funny tricks... Just copy and paste it like you normally would.
Test the Stylesheet
Simply navigate directly to your new page as if it were an html document. Don't forget the .css instead of .html. If you see the CSS code, then you've succeeded.
Add Your CSS to the Templates
This one is the tricky part. You won't be able to use the <link rel=></link>.
Simply go to your <head> element. Add the following code:
<style type="text/css">
#import url("");
</style>
Test the
Inside the url("");, just place the url to your new resource.
Advantages
Aside from the saving the uploading and downloading, you can now edit your CSS using any of the ModX tools. Additionally there are a few other perks:
If you're like me, file names are useful, but often not descriptive enough. You can name them whatever you like! Its the alias that is important anyway.
Handy tool-tips based on the Description of the resource.
You may also utilize the Summary of the resource for other things. I place the important file comments in here, so that my CSS is smaller.
Template Variables! In previous versions of ModX, you couldn't have a Template for your CSS.
Chunks and Snippets, if you so desire. You have to write them as plain text, rather than HTML, but it's still useful if you are creative.
Your CSS is now shared between all of your Contexts if you like. This is due to the nature of the #import statement.
You can edit your CSS from any computer. You may even set up your front-end for the editing.
Drawbacks
There's always trade-offs, and with this technique it is no different. A lot depends on how you have things set up for your site.
Your saving and editing is based on your server performance.
Your URL requests will be based even more on your ModX performance. For some, adding these extra resources could slow things down. Often, its not enough to worry about, but its worth mentioning.
It's now managed by the database, so its subject to database security. This can be good or bad. Even it is good, it probably will require extra set up from you.
Your Templates, Snippets and Plugins can break your CSS, if programmed incorrectly. This is something you really want to be careful with.
Each CSS request is treated as a separate request by ModX. The Template Variables and plugins do not apply to the web page you are viewing. They apply to the CSS content.
Conclusion
The whole process takes about 15 minutes. And ultimately, it's even faster to revert back if it doesn't work for you (just don't delete the raw files until you are sure). The added functionality is worth it to me.
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.