Hi,
I just wanted to know that as per SEO guidelines if the CSS present in the inner code then we have to minify it because inline CSS can takes a time to load a website. So how can we minify it.
Google has some recommendations:-
You need to make it a goal to know everything about CSS write up. It sounds like you just need to put the code in the head tags withing the style tag. Right? Then just keep reducing your CSS by condensing them with each other.
Minifying is done by removing excess white-pace: spaces, tabs, new-lines, etc. so the code is condensed and uses less bytes.
Though I’m of the opinion that if you need to minfy and it does give any significant saving in bytes, then you probably have far too much bloat anyway.
3 Likes
can we delete the code of CSS in head tag and create a new file .css extension and placed that code in it. Can this method is successful in minifing the CSS
Removing to an external css itself will not minify anything. You have to remove excess white-space which is a laborious task to do manually, so better to use some tool to do it.
Ok. So what is the best tool for doing the task as mentioned by you for minifying the CSS.
Or give me link so that i can use it.
I cannot recommend any because I have never used any.
I did earlier post a link to Google’s recommended minify tools.
Have you checked to see the actal time taken to load the current css an javascript files? a useful tool is…
i would hazard a guess and think that optimizing images would be a better than saving a few bytes on reduction of the included files.
A substantial file size can usually be achieved by using php:
$tmp = file_get_contents( 'style.css' );
echo '<br>' .strlen($tmp);
// Replace two spaces with a single space
$cssFile = str_replace( [" ", "\t", "\n"], " ", $tmp);
echo '<br>' .strlen($cssFile);
file_put_contents( 'crunchedStyle.css', $cssFile );
// BEWARE - tapped on a tablet and not tested. PHP functions may be incorrectly named.
1 Like
Do you have a computer? Do you have a text editor on that computer?
Open the CSS file(s) in the text editor.
[Search] the file(s) for spaces or carriage returns.
[Replace] with nothing.
I should imagine there will be a problem with the following:
.mga { margin: 1em auto 2em;}
.p42 { padding: 0.42em 1em 0.12em; }
You’re right, of course. The searches would have to be more specific. I guess the point I would like to make is that one does not need a plug-in or “utility” to perform such a task in reasonably short order. Just don’t forget to keep a copy of the pre-minimized code because troubleshooting minimized code in a site under development is a pain. “The errors are in the CSS on line 1… yes, all of them.”
1 Like
I think an obvious fix would be to get rid of all css code on the page that is not being used. I assumed you already know this.
There are many ways to minify CSS and JS for SEO.
- Put following code in your .htaccess file.
<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
</IfModule>
- Manually minify your CSS and JS using following tools and replace it with your current JS and CSS
- If your site is Developed in WordPress then there are lots of plugins available for minifying CSS and JS
I loved: Autoptimize
All 3 options are good, you can choose any of them as per your needs. Then also I recommend the first option as it is easy and no need to install plugin in website.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.