I was just trying to improve my site performance and for that i just run through google developer performance test, the results were pretty good but the google analyzer suggested me to compress the css files for better performance.
Until then compression and minifying was same for me, but now I Wanna know the difference between these two if there is any.
Also I want to know whether its a good idea to import all css in one main css file and then just link that particular css to the html pages
I am newbie I hope my questions make sense
Thanks
Minifying removes whitespace and other unnecessary characters from the file to create a different CSS file with exactly the same meaning.
Compressing uses a compression algorithm (such as gzip) and adds an HTTP response header to tell the client that the file is compressed CSS (instead of plain text CSS) so it can be decompressed before being passed to the CSS parser.
See Minifiying your css file will remove all comments, blankspaces/whitespaces from your css file. Also it removes any irrelevant data from your css file and after minifying your css file you will notice that your css code will appear only in a single file. Now when you will load your web page and hit F12 you will notice this change in your css file and it will improve the performance by reducing the loading time of your web page.
Also as you talked about putting all your css files in one main css file will just provide you a touch of bundling all your css i.e at the time of loading you will notice that a single bundle of css will be loaded instead of loading all .css files separately. It will again improves the performance by reducing the loading time. For more information you can read the concept of bundling and minification on web.
It also provides you the concept of versioning your .css and .js files. You need not to worry about cleaning browser cache each time you make changes to your css or js files. Hope this will help.
Related
MY CONDITION
I have multiple pages index.html, menu.html and I have single stylesheet style.css.
More than half of styling code needed for index.html is not needed in menu.html.
MY CONFUSION
Shall I create 3 CSS files index.css, global.css, menu.css? Each stylesheets focused for corresponding HTML document and global.css for global stylings
MY DOUBT
Will doing so affect my webpage load performance or not? Here, we are just loading multiple files but the no. of lines altogether has been decreased significantly.
As Heretic Monkey pointed out the performance of a website is a very complicated topic and there are no easy answers. Sometimes single large bundle is better, sometimes few smaller files.
If you would like to split up your CSS into multiple files during development but still publish it as a single file on the website, then you could use a css preprosessor like SASS. Check it out: https://sass-lang.com/guide
Anyways it sounds like your project is pretty small so I would not worry about this kind of optimizations yet. It is pretty crazy how much css (and other resources) are used on modern websites.
For example this is one of 4 css bundles that this stackoverflow page is using: https://cdn.sstatic.net/Sites/stackoverflow/primary.css?v=c05ce93d5306
More important on the performance side is that the resources (css and others) are cached properly. That means that user only needs to download the css file once and after that the browser will use locally cached copy of the file. Caching can be configured on your web server or hosting service you are using.
Although keep in mind that caching might be bit risky and if configured wrong your visitor might end up running old styles or javascript. For example here is a good read on the topic: https://simonhearne.com/2022/caching-header-best-practices/
I have built a site named http://typingtutorfree.com/. How do I minimize the CSS file size? It's taking so much time to load the site. Is there any other way to make it load faster? Please give me some solution to make my site load fast.
Your CSS takes about 200ms seconds to load, so the problem isn't located there. You have quite a lot of javascript/jquery files though (quick count: 35 of them), and you can minify those to speed up some things. You should also check if you really need all 35 of them, and remove those that you don't need.
You can minify JS files with a lot of tools (if you use dreamweaver or visual studio, there is a minifier included), or on the internet.
Google has a tool for this: http://closure-compiler.appspot.com/home Or you have other sites who offer the same service: example , another one, third example.
The last one also compresses your css, if you'd want that.
A last point of advice: check that error.wav file, because it takes quite a lot of time to load. See if you can't compress it in any way.
You can reduce the file size of your CSS files by removing unnecessary white-spaces, line breaks, indentations, comments, semicolons, quotes and by combining rules when possible.
I personally use an online tool like https://compresscss.net/ to make things easier.
Your first option would be to concatenate any CSS blocks you can. Duplicate styling will only cause the load speed to be longer.
If your CSS code is already as minimal as it can be, sites such as http://csscompressor.net/ can remove new-lines and other code formalities, making the output unreadable but considerably smaller.
Your website may be unable to distribute the CSS with speed due to the server's limitations on its up-link. There are many services out there such as CloudFlare which are able to cache a multitude of files, including CSS, and send it to the browser with much less loading times.
I like the idea of encapsulating my CSS into separate files. This also brings the added advantage of being able to easily minify the CSS. But I know performance is negatively impacted by the overhead needed to pull these separate files from the server.
To address the latter point, people often suggest inlining the style or at least putting the CSS in the HEAD of the html document. I'm not going to inline because then editing the style becomes a nightmare. I can consider putting it in the head to increase performance, but I do not want to put it in there minified. I won't be able to read it, and it will be a pain to have to adjust the CSS once minified.
So my question is, What is the better option -- in terms of performance -- between these two?
Minified external CSS file
CSS placed in the HEAD but not minified
You are not considering browser-side caching in your evaluation. It is almost ALWAYS better to serve up CSS in an external file for cases where you will be using the same CSS file throughout a multi-page website. The reason for this is that once the CSS is downloaded on first page visit, assuming you have expiry headers set properly, the browser will not need to download the CSS on subsequent page loads until the expiry TTL is passed. This even holds true across multiple user sessions on a website, such that if a user visits the sites some days/weeks later, they may not need to download the CSS at all. If you served up in-page CSS, it would need to be downloaded on every page load.
Also minifying is typically not that big of a performance boost, as most server to browser connections will perform text compression on transmitted content anyway.
Of course it is also usually much easier to maintain CSS in an external file as you have pointed out.
The best option would be to:
Minify them all and bundle them in the server side with something like bundles for Asp.Net or brewer for nodejs, that way you remove the overhead you mentioned above.
To expand on my comment:
Generally, when optimising web page loading, you want to minimise the number of HTTP requests that the browser makes as these are expensive, time-wise; even requests for small files require the browser to send its request to a server, wait for the response, and then act accordingly. From that perspective, the best thing would be to put all the code for your page into a single file. However, this would be a page maintenance nightmare, and it also fails to take into account caching of resources by browsers, as covered by #MikeBrant.
A single css file (potentially composed of several concatenated minified files) is a good compromise between separation of style (css) and content (html), and performance. The same applies to javascript. You can also consider using a content delivery network (CDN) for Javascript if you're using a common library like JQuery as the user's browser may already have the library cached from visiting another site. Google's CDN serves a number of useful libraries.
Generally, you'll get far bigger performance gains from optimising images, enabling server compression, and removing extraneous javascript than you will from minification or inlining CSS. Images are almost always the "heaviest" elements of a page, and it is often very easy to reduce image size by 20-50% and maintain decent quality.
What do you think is the best for website performance ? Load a different css per page (minified of course), so there won't be any unused css rule in this file, or load the same big (minified too) css in every page of the site ?
The question could seem obvious, but I am wondering about the browser cache... if the big css is loaded in the browser cache, it won't be reloaded in each page, no ? So, maybe it is better to have a lot of unused css rules, but one file which is not reloaded every time than multiple files that we have to load when you browse the website.
Thanks !
It is better to have one big minified css with all the rules, that way you are reducing the amount of connections the browser attempts to do to the server, as well as only one CSS gets cached for every request.
Actually this is what most minify tools do, they compress all of the files in only one CSS file for the whole application.
The other approach for performance is to use Content Delivery Networks (CDN) to load common CSS or JS from the internet.
That's it. I've been hearing about CSS files a lot.
What are the main advantages of having a CSS file instead of writing the styles in the HTML code directly?
Assuming your site has 10 pages
You don't have to repeat yourself 10 times.
If your style changes, you don't have to do the change in 10 files
Your HTML files are smaller
Your CSS files can be cached
You can reuse the style sheet on other sites you make
I'd add to JohnP's excellent answer by saying:
you can separate out your caching
on your page (where content may
change regularly) to your CSS (where
it may not) - sites are more likely
to cache CSS for longer than they
would the content of a page,
separating it out will allow you to
do this
you can deliver your CSS
from a content delivery network,
potentially improving site
performance
you can 'minify' your
CSS as part of a build process so
that what you're developing on is
readable/verbose, and what you
deliver is small/terse, again as a
means of improving performance
once the content and presentation
are separated out, your users will
benefit from all of the above and
you will get a faster page load.
Please read this artical on Advantage of using external css.
There are a few advantages;
1) You can re-use the CSS in different pages across your site.
2) The download is separate for CSS when it is in a separate file, this is quicker.
3) The separate CSS file will be treated as static content and likely cached locally. Again quicker.
I personally find CSS easier to read and edit when it is in its own file.
Some good answers by JohnP. However, the most important reason for me would be the separation of presentation and content.
Versioning becomes far easier as you have a central point to apply changes.
The loading time of your site advances because you only deliver the stylecode ONCE and not with every html page you deliver.
Furthermore you save up loading time as the css can be cached locally and so the site loads faster after first load, if there was no changes. This can also cause problems, see solution for those problems in point 2.
you can also use different styles for different platforms or different tasks (such as braille or print)
see available types here:
Media types
There are severe cache problems regarding Internet Explorer, you can give version numbers to keep the cached css out of order, if there were changes applied, so there is NO disadvantage of using css files but a HUGE advantage in administering the site.
Example of versioning:
<link rel="stylesheet" href="[path_to_css]/style.css?v=[date]" type="text/css">
So there are only huge advantages and no disadvantages of using css, so it is best practice.