11
I’ve been noticing that some sites have compressed CSS, I believe this only serves to load pages faster, do you have any risk in doing this? because there are some sites that use normal CSS, I imagine that if you didn’t have any problem compressing all the sites would be like this.
So, is there some kind of criteria for compressing or not CSS? and this really makes a lot of difference in page loading?
18
There’s some risk in doing that?
I can’t imagine any direct risk in compressing the CSS file, because it is exactly the same code, without all the unnecessary characters maintaining the correct syntax. If your CSS code works perfectly, the tablet will work the same way. What directly adds is the need to keep two distinct files: the original, for maintenance, and the tablet, for use in production.
Why do you have some sites that use normal CSS?
I can see three reasons for this: need, laziness and ignorance. First of all, not all pages need this level of optimization. Depending on the content of the page, it will make no difference to the user or server if the response takes a few tenths of seconds more to stream. If so, why compress? The second reason is laziness. The application may even have a certain need for CSS compression, but the developer doesn’t care about that. Writing a decent source code will influence the response time of the application much more than the compression of the CSS, so in these cases the compression becomes unnecessary. The third reason is the lack of knowledge, that is, not every developer dominates the HTTP protocol and does not know such techniques.
So, you have some kind of criteria for compressing or not compressing CSS?
Has. Is your source code very well structured, with all the necessary optimizations and even so the page load time is unsatisfactory? Compress CSS and Javascript. Make the images as well and create very well configured cache systems.
This really makes a lot of difference in loading pages?
No. It makes a difference, but it’s not going to save your application. As stated, there are many other points that should be observed before and that influence response time much more than simple CSS compression. You can do it, it will improve the response time, but it does not mean that the application will be completely optimized. If the application treats a large number of requests for a short period of time, it can make a lot of difference, otherwise, no. It will depend a lot on the requirements of your application.
8
It’s not primarily for SEO, reduce the size and decrease the requests help a little with SEO, but this is what we can call a positive side effect, is not by far a "deciding factor".
has some risk in doing so?
Not if the tool or platform you used to do this is reliable, well-updated and tested, for example who you use Node.js and Express:
Now if you do it manually the risk is the factor "human error", it is very easy to make mistakes, even more when you have many scripts.
because there are some sites that use normal CSS
I think it’s because they don’t know and understand how HTTP works and how much this can influence on the server or simply by using "archaic" tools that don’t support automatic minification, after all doing it in the hand is something extremely laborious.
So, you have some kind of criteria for compressing or not compressing CSS?
For production, if you can always compress and "merge" them, unless the actual file is small and unique, for development and/or approval environments you can use an alternative version that shows the originals, without minification or compression, of course worth noting that compression gzip (see Content-Encoding) is something different.
And this really makes a lot of difference in loading pages?
Does if you have many files, even more in the matter of rendering blocks, as the download time will be shorter.
However compressing and unifying are not the only things that will help, depending on the tool you use for the service if you do this without having a cache system you will end up consuming the server more to make the service compress and compress manually can be a big problem.
So, minifying is beneficial, as it will reduce the "download" time and thus improve the response time for multiple requests and multiple users, but as I said there are factors that have to take into account, because it can not end up having effect contrary to the desired as if you have no cache, I’ll say this further down.
You can do the process manually sometimes, depending on the site I do, however it is not worth much if the project receives many modifications, in case the best would be to use something for the platform itself, if it usually uses a framework, examples of tools according to the technologies:
In addition to minifying and unifying multiple CSS or JS files in a single, removing comments, spaces and unnecessary lines you can use HTTP Cache and use the 304 Not Modified, as I explained in this question:
If you do not do this and use automated tools on the server may be that the consumption increases and until the response time is longer than expected, or if the tool is misused ends up being harmful.
Servers like Apache and Nginx usually already manage to do this automatically, but talking about the type of compression, usually the Deflate is more efficient that only "minificar", a file .js that I have normal weighs 63kb, but compressed by Apache it weighs 9kb, ie it is 86% lighter than normal, to use this has to have enabled in Apache module:
Of course it’s critical that you use this along with HTTP Cache, as I mentioned before, a very simple use example is to add to your archive .htaccess (Apache) something like:
<IfModule mod_deflate.c>
<filesMatch "\.(js|css)$">
SetOutputFilter DEFLATE
</filesMatch>
</IfModule>
For Nginx servers just add to location specific the gzip_static on;
location / {
gzip_static on;
gzip_types text/javascript application/javascript text/css; # mimetypes aceitos
gzip_min_length 1000; # tamanho minimo para executar a compressão
}
Read more on: https://www.nginx.com/resources/admin-guide/compression-and-decompression/
5
So, you have some kind of criteria for compressing or not compressing CSS?
Search for content on - Minification - there is a vast amount of explanation on the subject.
And this really makes a lot of difference in loading pages?
Yes, depending on the file size you will compress, you can gain exact ms or even seconds in uploading your files.
In this Minify project that is published on Github, he exemplifies, see the images below that the Bytes sent before the compression was 2,681 and the received was 98,453 and after the compression of the files he reduced to 783 Bytes sent and 29,049 received, a major reduction.
Before compressing
After compressing
3
Compressing CSS or Javascript is good practice in the sense of performance, especially for mobile devices that usually have slower connections, what improves is that the browser makes fewer requests to mount the page.
For example we have:
An HTML page with a CSS file X and linked in HTML and we have another separate CSS file called Y also linked, when the browser enters the page will have to call the HTML page, CSS X file and CSS Y file.
Not all websites use because not all the same websites implement techniques to improve page loading.
2
It’s important yes! Including for your website’s SEO.
A basic example of this is in Speedpage Google, it always warns that it is necessary to compress or compress (or minify) your CSS and Javascript.
If you’re thinking of a requisition some bytes don’t make a difference, but what if you have millions of requests? The sum of this memory could be saved.
Resource reduction refers to the elimination of unnecessary bytes such as extra spaces, line breaks and indentations. HTML, CSS, and Javascript compression can speed up download, analysis, and runtime. In addition, for CSS and Javascript, it is possible to further reduce the file size by renaming variables, as long as HTML is updated appropriately to ensure that selectors will continue to work.
That is, the benefits:
I believe there are no criteria for compressing CSS, even because compression is removing comment/spacing.
A good site to minify your CSS is: cssminifier.com that even has its own API.
2
There’s no problem compressing CSS, and it sure makes a difference when loading the page because the file gets smaller.
Depending on the size of the CSS, I find it valid to "wipe it down" because some less Kbytes on loading is always better, especially when accessed by mobile devices that use plans with limited amount of traffic.
Some sites don’t compress because they don’t care too much about it or because the difference between pill and uncompressed would be derisory.
I already compressed a CSS and gave a difference of about 5kb from the original. It may seem small, but it makes a difference when considering when hundreds of users access the site all the time.
Browser other questions tagged css
You are not signed in. Login or sign up in order to post.
Depending on the amount of elements your css has makes a difference yes on page loading. Making an analogy , the compressed file is indexed thus making the search for elements faster and the uncompressed is a read without index. Besides being more organized :)
– Marcos Marques