Context: I ran a link sleuth / error checker on my Wordpress website, and found some broken links originating within style.css. These were caused by the theme developer who set up a long list of CSS definitions for certain classes that would load images for them by using the 'background: url()' property, when the classes are present of course. Well this raised 2 general issues for me as follows, and I searched everywhere but couldn't find the answers (the main question is in the title, can you please think of these as 'sub-questions'?):
Doesn't this way of building style.css load a lot of extra unnecessary cruft into the session? Maybe not. I am pretty sure that these image files themselves are not actually requested by the browser unless needed by the page, but I am not sure the process of how this works. Is it that the browser gets the stylesheet, parses it in conjunction with the HTML to determine which classes are 'present', and then requests the stylesheet-linked images from the server accordingly? So in that case, the "background: url(image.png)" definitions that are unused (due to that class not existing on the page), would just be ignored, and that line of the .css file would represent a link to 'somewhere' that is in the 'namespace' of the DOM, but the line of code just sits there, it isn't acted upon, and the file is not pre-fetched or anything? Do I have this correct, close enough, or how could I learn more about this topic?
What happens if, (as it does in this case which the link sleuth showed me), the image linked to from within the stylesheet actually returns a 404? I know this is happening because the theme developer forgot to add those assets into the website folder structure. But is the browser itself 'making it to' all of those 404 errors each time it parses the stylesheet (which presumably would impact performance somewhat, or trigger various alerts on my server software and other places due to all of these invalid link requests)? Or again, are those links just ignored since the classes don't exist in this particular instance of the markup, and so they would only be requested case-by-case in the event that the resource is actually needed by some code on the site?
Related
Is there any way to find which CSS tags and elements are related to the specific HTML page section?
For example: We have a large CSS file but few of elements are related to content in HTML classes, is there any way to find related elements and remove other parts?
How large is the CSS file? I can't think of anything else than splitting it to multiple libraries and then including a library in your page if it's required.
For example, if the page has a slider then it will have a CSS link to slider.css this might not be ideal when you send too many HTTP requests so you might embed the library as internal <style> CSS. I've seen many WordPress theme developers use that technique.
This shouldn't be a problem since minification and Gzipping reduce the filesize drastically and once the file is cached your users wouldn't need to wait extra time to load your next pages.
For Chrome
In the Chrome DevTools, there is an Audits tab that will allow you to run a Web Page Performance audit and see a list of unused CSS rules :
For Firefox
You could install one of these add-ons :
CSS Usage for Firebug
Dust-Me Selectors
CSS Usage
Dust-Me Selectors
I don't think there is. It would be really hard to do this, too, because your system could build up a page by including 500 different files of different languages. How could such a program know which of your files is included where and under which conditions?
The thing that I think comes closest would be using your DevTools to see which styles apply to which element and maybe by hand or in an automated way create a list of which CSS rules apply to which end-page (for example which URL endpoint) element. But! Even then it would be hard, because it would be really hard for a program to find out which styles are dynamically added to elements (for example Javascript could add/remove classes when a user performs a certain action).
The question is very simple and even tho I might get downvoted into oblivion for it, I can't find a good search query for this.
If I link images, stylesheets, scripts and other things with the full website url (http://url.tld/css/style.css) instead of path (css/style.css) , are the visitors affected negatively? Is there any difference?
The html page is on the same link as the resource, so we're not talking about external resources.
This only makes a difference if you change your domain name. You cannot simply transfer the scripts over but have to change each line or the include of those files then.
One small thing to keep in mind: Your string will be longer and so your file will be a very bit bigger in size but it doesn't really matter.
Either won't affect visitors. Specifying the protocol might cause problems in the future if your users can switch between http and https. Specifying the folder also means changes when you move the site. So best to use relative
So I know generally it is not best practice to have multiple css files placed within the head tag of your site due to the increased number of http requests you would have to make. Therefore it has been recommended to me to just use one big css file instead of smaller ones. However, wouldn't it make sense to break up that css file into separate, smaller files, and then link those individual css files only on the pages where they are needed? So say my homepage had its own set of styles, and my about page obviously will differ from my homepage with it's own set of styles. So why not link a homepage.css file to the html homepage and then only link an about.css file to the html about page? There is still only one http request being made in each case, and you can have much smaller css files. Is there something I'm missing?
CSS is cached, so that if you were to link to your big CSS file on your homepage (lets say domain.com/css/homepage.css) then the user travels from your homepage to the about page and it calls the same homepage.css, but you're browser then says "wait! I already have it!" and it skips the HTTP request for the file, resulting in no additional requests.
Where as you have a CSS file for each page, there would be a request for nearly identical CSS files that is wasting bandwidth needlessly. It may not seem like a big deal on smaller sites, but bigger sites with 1000s of requests happening, the extra bandwidth adds up and results in higher operating costs.
The only exception to this is when you're using a responsive framework of some sort (like bootstrap) where editing the main bootstrap file is either impossible (through CDNs) or impractical and hard-to-maintain (i.e. when bootstrap updates you'll lose all your customization), which in this case you would have one bootstrap.min.css file and one custom.css that allows you to keep your customizations while only increasing bandwidth slightly.
I've been playing around with Filament's Critical CSS (https://github.com/filamentgroup/grunt-criticalcss) and have a question about it's usage.
As I've been using the tool, it generates a "critical" sheet for every page I point it at so that I can inline those files into my HTML via a <style> tag in the <head>. This all makes sense.
However, once the user visits any of my sites pages, they'll have the main sheet fully cached. At this point does it make sense to stop inlining the CSS, as the user already has the CSS loaded, and instead link to it via a traditional tag?
If you're certain that the user has the stylesheet cached this would be a valid approach, assuming that parsing a cached stylesheet or inline styling of critical css will take the same amount of time.
You however can't be certain that it exists in the users cache. As the critical css also exists in the stylesheet this isn't a problem, but it will make rendering the page slower.
The only way to know when it might be useful is to parse your access logs, try to find how often the stylesheet is also requested when a specific page is requested by a specific user. Using that you can create a probabilistic model on when it's useful to inline critical css. This seems like too much work for a small gain. I'm guessing that using inline critical css is most useful for landing pages or pages that go viral.
Yes, Inline CSS usually now is only needed when you want it to take complete precedence over an external style-sheet you do not control of a .JS file that makes unwanted changes which overwrites your style-sheet as well. Doing this also helps with performance, band-width, etc., etc.
I am going to answer here as it is best to do so instead of in comments.
The problem that you're having is strange in the matter that you are wanting to cover all possible bases with two separate, but tied issues.
Firstly, your performance gains. Since you want to have higher performance doing inline styles is the technically correct answer. There are some minor gains because you are not doing a request. All requests that go out take time and depending on the time it takes for the server to communicate each request you will see a possible performance drop. This is why some requests that are much larger are considered excessive and Google generally informs you to sprite the image or some other form of connection.
The other part is you want ease of accessibility and want to be able to update quickly which is what would be provided by an actual CSS file. You would need to at some point call this CSS file so that it can be cached into the browser as you expect. You can do some cookie checks and depending if the user has been to the site or not they will have a specific call, but here is the major issue:
At some point you HAVE to actually load it. You will have to make the call. Whether it be on the first load or the last at some point for it to be cached it actually has to be retrieved. You will spend a ton of time checking each variable if they don't have it they will need to have the style sheet loaded. If you are already required to load it at some point then it comes down to never really needing to do inline styles. And if you have inline styles you never really need to load it.
You could potentially do a PHP include of the file and have it pull in that way. You would just include the file between a style declaration and it would populate the CSS that way. I wouldn't say that is the best way to do it, but it is possible. It can be done. I still stand by saying inline is not the right way to go. Technically yes it can help. Reality... no. I have not seen it be beneficial ever in my time. If someone wants to show me one that is fine, but I doubt I will use this practice unless it is last resort.
Keep in mind this final thought. Most cases inline styles are styles that are meant to be final styles; ones that end overwrite original external style sheets that we as developers can not edit ourselves (or do not want to change for other reasons).
Google is great and they provide great research, but research is meant to be considered and not always used exactly as they write. It is to provide insight. Not usually a guide into the way.
I recall some very rare instances of seeing major websites (Amazon, Facebook, etc.) either not downloading a CSS file or not applying the rules, causing the page to look like this:
I've been tasked to provide an internal explanation after we received a complaint email with an attached screenshot from a user of one of our websites showing the same effect. The screenshot contains sensitive user information, so I'm unable to post it. But it shows that inline styles are being applied, but any style referenced from an external CSS file isn't being applied.
Unfortunately, I am unable to reproduce this issue, and other than just saying "styles aren't being applied", I am coming up dry with a detailed explanation and I would love to understand it myself.
I would appreciate any input on why this might happen, or reference to any articles. Even if someone knows what this event is called, I would be happy to go research it, but as of now I'm coming up blank.
There are more than one scenarios under which this can occur:
1) bandwith issues : as italo.nascimento mentioned, a slow connection, where your HTML is downloaded but your CSS is timed-out so you're left with a naked HTML page (happens often also when a website is under DoS or has many many visitors and the server can't keep up with the traffic)
2) caching problems : something is changed in your HTML, but the CSS is served from the browser's local cache so the selectors don't match...
3) FOUC : It's not really similar to what you're asking, unless the printscreens were made during the page load.. It's called Flash of Unstyled Content.
In general 90% of these kinds of problems are cause by connection issues. Dropped packets, TimeOuts, CDN's not working properly.. And as they are random I don't think you can "reproduce them" - it's not something that can get fixed.
Happened to me lots of times in major sites.
Mostly, it happens when Internet connection is very slow or oscilating, so the files doesn't load correctly from the server (packages get lost) and the site is showed in pure HTML. Maybe you could reproduce it by limiting your bandwidth and reloading the page.