I'm testing a website speed using PageSpeed Insights tool.
In the result page, one of the warnings suggested me to reduce byte size of css, html and js files.
At the first I tried to remove comments, but nothing changed.
How can I do that?
Should I remove spaces and tabs?
It seems to be a very long operation, worth it?
The action of removing spaces, tabs and useless chars is called minify.
You don't need to do that, there are a lot of services that can minimize files for you.
for example:
http://www.willpeavy.com/minifier/
Be care if you have jquery code: sometimes it removes spaces in wrong place.
You have two things to do to reduce page size:
Minify CSS & JS files
In server side, if you are running your website via Apache, you can install APC, for page cahing. You'll have better parformances
APC
In addition to CSS minifier/prettifier tools above, I recommend using proCSSor for optimizing CSS files. It offers variety of advanced options.
Never found those tools to be much use beyond giving some tips for what might be slowing it down. Minifying is unlikely to achieve much. If you want to speed up your site, save the page and see what the largest files are. Generally they will be the image files rather than the code, and see if you can reduce these.
Also, try and test it on two servers - is your host slow?
If your html file is massive, that suggests a problem with the site's structure - it is rare that a page needs to be large.
Finally, large javascript files are most likely to be things like jquery. If Google hosts these, then use the hosted version. That way, it will probably be already in a user's cache and not impact on your loading time.
EDIT, after further testing and incorporating the issues discussed in the comments below:
PageSpeed Insights is an utterly amateurish tool, and there are much more effective ways to speed up the rendering time than minifying the codes.
PageSpeed Insights is an utterly amateurish tool, that as a matter of standard advises to reduce HTML, CSS and JS file sizes, if not minified. A much, much better tool is Pingdom Website Speed Test. That compares rendering speed to the average of the sites it is asked to test, and gives the download times of the site's components.
Just test www.gezondezorg.org on both, and see the enormous difference in test results. At which the Google tool is dead wrong. It advises to reduce the CSS and JS files, while its own figures (click the respective headers) show that doing so will reduce their sizes with 3.8 and 7.9 kB, respectively. That comes down to less than 1 millisecond download time difference! (1 millisecond = 1/1000 of a second; presumed broadband internet).
Also, it says that I did do a good thing: enable caching. That is BS as well, because my .htaccess file tells browsers to check for newly updated files at every visit, and refresh cached files whenever updated. Tests confirm that all browsers heed that command.
Furthermore, that site is not intended to be viewed on mobile phones. There is just way too much text on it for that. Nevertheless, PageSpeed Insights opens default with the results of testing against mobile-phone criteria.
More effective ways to speed up the rendering
So, minifying hardly does anything to speed up the rendering time. What does do that is the following:
Put your CSS codes and Javascripts as much as possible in one file each. That saves browser-to-server (BTS) requests. (Do keep in mind that quite a number of Javascripts need the DOM to be fully loaded first, so in practice it comes down to putting the scripts as much as possible in 2 files: a pre- and a post-body file.)
Optimize large images for the web. Photoshop and the likes even have a special function for that, reducing the file size while keeping the quality good enough for use on the web.
In case of images that serve as full-size background for containers: use image sprites. That saves BTS requests as well.
Code the HTML and JS files so that there is no rendering dependency on files from external domains, such as from Twitter, Facebook, Google Analytics, advertisement agencies, etc.
Make sure to get a web-host that will respond swiftly, has a sufficient processing capacity, and has a(n almost) 100% up-time.
Use vanilla/native JS as much as possible. Use jQuery or other libraries only for tasks that would otherwise be too difficult or too time-consuming. jQuery not only is an extra file to download, it is also processed slower than native JS.
Lastly, you should realize that:
having the server minify the codes on the fly generally results in a much slower response from the server;
minifying a code makes it unreadable;
de-minifying tools are notorious for their poor performance.
Minifying resources refers to eliminating unnecessary bytes, such as extra spaces, line breaks, and indentation. Compacting HTML, CSS, and JavaScript can speed up downloading, parsing, and execution time. In addition, for CSS and JavaScript, it is possible to further reduce the file size by renaming variable names as long as the HTML is updated appropriately to ensure the selectors continue working.
You can find plenty of online tools for this purpose, a few of them are below.
HTML Minify
CSS Minify
JS Minify
good luck!
Related
Google Pagespeed complains when you have blocking CSS in an external file. In HTTP/1 this probably makes sense, but what about now with HTTP/2 ?
If you inline critical CSS (above the fold), that bytes still need to download, parse and everything else, all before the document renders.
With HTTP/2, there is no need to make another connection since the same can be reused, so that is not an overhead. Plus, with server push you can even push the CSS file before it's being requested.
So... is inlining critical CSS still a recommended thing?
I agree that in heavy sites, you probably don't want to download all CSS. For example if you are visiting the gallery, you would only need gallery.css, not profile.css, not forum.css, etc. But that is manageable with chunks and other techniques (and still using external css files, no need to inline them)
Inlining also makes CSS not cacheable.
I am missing something?
This has nothing to do with the possible duplicate question. Whoever marked this as duplicated has no idea about what critical CSS is or probably didn't even have read this question.
Yes it can still help. A lot.
When you download the HTML you still need to wait for that to download, then process it, and then make another request for the CSS file(s) and wait for those to download.
While downloading additional resources is quicker under HTTP/2, and there is not as much of a bottleneck when you have a lot of additional resources to download when using it, the CSS file still can't be requested until the HTML file has downloaded and been processed. Additionally the CSS file is usually prioritised by the browser, since it's render blocking, so usually will be one of the first resources requested meaning the avoidance of head of line blocking for HTTP/2 is not as beneficial for CSS resources.
When HTTP/2 Push becomes more common place it may not have as much impact as requests for the HTML page can also push the CSS file needed for that, but that's added complexity and there's still some questions as to how that will work (e.g. if the browser already has the CSS file then server should somehow know not to push it).
I wrote a blog post on this topic if you want more detail on this (and this is on a HTTP/2 site): https://www.tunetheweb.com/blog/inlining-css-is-not-for-me/ . I'm still not a big fan of this process as I explain in that post...
Don't inline it if it doesn't make sense. I guess inlining ten lines of css won't kill you, but inlining the equivalent of 18 kb of gzip-compressed CSS is just madness.
Just use HTTP/2 Push to be sure the browser gets the CSS as early as possible.
Worst case HTTP/2 Push will push the resource multiple times, but browsers reset pushed streams which they consider are fresh in cache (use etags). So worst case HTTP/2 Push is still slightly better than inlining.
The cache issue with HTTP/2 Push is largely attenuated using a cache digests polyfill (until the real thing be available in browsers):
https://www.shimmercat.com/en/blog/articles/cache-digests/
For a quick video introduction to cache digests: https://www.youtube.com/watch?v=Zq1YF3ri98k
We use it in production and we are very satisfied.
As a general note, take automatic optimization recommendations with a grain of salt until they complete their transitions to HTTP/2.
I am missing something?
You're right in general, for the modern browsers and http 2. For the mobile and old browsers, for gprs or other slow high latency connections - not exactly. In some cases, you can get an advantage of fewer documents downloaded and improving browser parsing speed by inlining .css. Additionally, if you're dynamically adding the .css and something goes wrong, the inlined .css still works, the same is right for any resources could be inlined in html.
Its not really about to download all files, its about how long it takes to download this files.
If you are using critical CSS the CSS(Design) is directly shown, so its really faster then first downloading the CSS Files because the CSS is directly in the <head> of your Page so the Page is shown directly without blocking Resources ( e.g download the big CSS File ).
If you have the CSS File which is for Example 5MB big, the Browser first has to download this file until the Design is shown.
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 if i combine all the CSS of the complete site into a single file.
would it be cached by the browser or be reloaded every single time a new page is opened.
the single css file contains different values for different pages.
should i divide the css for different pages or keep it in a single file?
Yes the files are probably better of combined but will only be cached if the correct headers are set. I suggest downloading YSlow (or Page Speed) which is a plugin for firebug which analyses your page and shows how it is slow and gives advice on how to improve it.
http://developer.yahoo.com/yslow/
Also look at css minification tools like those in the YUI toolkit to compress the css code as well as combining the files.
http://developer.yahoo.com/yui/compressor/
Combining CSS files into one will give you better performance. You can compare this in FireBug( https://addons.mozilla.org/en-US/firefox/addon/1843 ) in FireFox.
If you use asp.net have a look at the ScriptReferenceProfiler, it shows the list of downloaded resources, these can be combined to improve performance: see blog: http://blogs.msdn.com/mikeormond/archive/2008/06/26/asp-net-ajax-scriptreferenceprofiler.aspx
Generally speaking, combining your CSS into a single file is a good practice for production servers. The single file reduces the number of http requests required and, in both cases (single or mutiple files) caching will be used.
The benefit of fewer http requests is greatest for first time visitors.
Also, you reduce the number of requests required on subsequent pages as the file will have been cached. (think of it as pre-loading the css if the portions unused on the current page seems wasteful to you)
Most sane browsers will cache CSS files, so compacting them down into a single file can help a little when it comes to request times. However, maintainability is also an issue - if you have difficulty maintaining the CSS code when it's all in a single file, you may still want to stick with separate files.
In the end it's up to you, whatever feels best.
It is is good to have one file. Please see for the file size also that might affect the page load time. All browser catch the css files. Next time it will not load new one.
Please use the yahoo info for that.
Anyone know how I can reduce my page size while it's loading? Like anyway I can reduce my CSS file's size and Javascript file's size?
Gzip compression
Minification
Combining multiple requests into one
GZIP compression is effective on text-based responses such as stylesheets and HTML, but not images.
Minification is effective on CSS and Javascript (more so on Javascript). There are various solutions available depending on your language and framework. This obfuscates the code that is sent by removing whitespace and shortening identifier names where possible.
Combining multiple requests into one cuts down a lot on latency, even if it doesn't save much bandwidth. It results in a faster perceived load time for users. You can combine multiple CSS files into one, which is easy. With images, you can use a technique known as sprites.
YUI's Compressor is one option.
YSlow is decent for getting an idea as to why it's slow.
It does tend to make recommendations for large sites rather than small sites, so apply common sense.
Do you mean bytes transferred? If so, you would use GZIP compression of the HTML. In Apache, use mod_deflate. There are also servlet filters out there.
w3compiler is a tool that will do exactly what you want.
There is a great book on this called High Performance Web Sites. It's an O'Reilly book that takes you through the various steps of client side performance upgrades. It covers the topics you suggest such as CSS and JS file sizes amongst other things.