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.
Related
I'm trying to improve my site speed as I integrate certain features of a theme I purchased into my site and came across this interesting feature on the website of said theme.
The problem I have now is my CSS style sheet is absolutely massive (220kb) and takes ages (3-4 seconds) to load. I'm working to reduce that, but that's a different story...
When I try to load that exact same page on the theme dev's website, it loads much faster. Upon inspection, on my website, I find my 'Size' and 'Content' amounts of the stylesheet in the dev tools is about identical.
On the developer's page, the size is much smaller than the content. Does this mean that ONLY the elements called upon in the HTML are downloaded from the stylesheet? If yes, how does one accomplish this, because it sounds tremendously efficient.
I also thought it was because the dev's page was caching the content on my browser but I've disabled cache and it still only loads a portion of the content.
My website's cache works by the way, I'm just interested in speeding up that initial load time.
Any thoughts?
Relevant imagery:
Cache Disabled:
Dev's website with small size/content ratio - http://i.imgur.com/B3uhOWF.png
My website with ~1:1 size/content ratio - http://i.imgur.com/Ymu2YRz.png
Off the top of my head, you could minify your CSS. There's a few free tools around including the Page Speed Insights for Chrome.
See https://developers.google.com/speed/docs/insights/MinifyResources
It looks like your CSS is already in a minified file, but perhaps the content isn't!
Just so people aren't confused. The solution was to enable gzip on the server, which you can read more about at https://developers.google.com/speed/articles/gzip (but still minify your css as well).
Thanks to user worldofjr, I found the answer to be ENABLE GZIP on the server.
Unbelievable increase in speed.
That should be required reading whenever someone signs up for webhosting. I can't believe my site has gone 1 year without this when it took 2 seconds to enable!!!
"On the developer's page, the size is much smaller than the content. Does this mean that ONLY the elements called upon in the HTML are downloaded from the stylesheet? If yes, how does one accomplish this, because it sounds tremendously efficient."
That's not generally how css works. And what you describe might not be very efficient even if you did somehow implement it. The server would have to know which styles to send, which would require the browser to load the page and send in it's list and the server would have to generate the custom css and send it back...
You certainly can limit which css loads where--and you should. But that has to be done manually, at least in my experience.
Anyway, a few things to consider before you proceed:
I think 200k is really, really big for a stylesheet. Most sites I work on the total CSS weight might be 20k. Or less. I'd investigate why yours is so huge. Maybe something has gone wrong. Minifying might help, but it isn't going to knock you down a whole order of magnitude.
However, even if it is the world's largest CSS file, 200k isn't THAT big. Not 4-5 seconds big. I'm working on a site right now where an entire page weighs ~350kb and I have it loading in under a second. Again, I suspect something else has gone wrong. The size of that CSS is probably indicative of something but I suspect it's not purely the time it takes the file to download.
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!
Sometimes on completely valid browsers, but a hindered Internet connection, the webpage loads without some of the external css files, resulting in a ugly webpage.
Is there a way to prevent this without resorting to embedding all of the css in the html?
I guess you might be hitting the timeout when hitting the CSS file. You might try caching the CSS file on the client side by using far future headers. And minify the CSS so it has a small file size and can be quickly grabbed.
Try to use less css files as much as possible because ever single css files send different http request so, when there are less css files that means less http request .Which automatically increase the speed & minify the css also .
A general rule of performance is to reduce the number of HTTP transactions. This is particularly important in these days of add-ins. Each HTTP transaction adds an overhead of about 1kB up and down by adding the headers. It adds load on the server and delays rendering. It also opens up the risk of network timeouts -- especially a problem on 3G phone networks.
Regarding CSS, it's better to have a single larger file than lots of smaller ones to avoid exactly the problems you're experiencing. If you minify the file -- but don't optimise it -- it will also get rid of the comments and white space.
Similarly it's worth combining jQuery addins into a single file for the same reasons.
Would it be wise to combine all CSS into a single file? Would there be any performance increase. I have to assume that an HTTP request is made to get each file on initial page load, and reducing those requests would seem to make sense.
Are there any reasons NOT to combine all css into a single file?(such as maintainability or other performance issue)
Merging all of your css files into one will absolutely gain performance. Whether that performance is noticeable depends on your load, number of requests etc. For the average blog, this will have close to zero impact.
Read Best practices for speeding up your web site at Yahoo! Developer. It'll explain things way better than i can.
As you say, a reason not to merge css files is for maintainability. However, there are many tools out there which automatically merge and minify your css files into one.
You should check out YUI Compressor, this will help you with merging and minifing your css files.
Would it be wise to combine all CSS
into a single file? Would there be any
performance increase. I have to assume
that an HTTP request is made to get
each file on initial page load, and
reducing those requests would seem to
make sense.
Yes, but make the combination at build or runtime and don't try to maintain a single file if you started with multiple ones.
In addition to the number of HTTP requests it is also important to set the right expiration headers in the response.
Are there any reasons NOT to combine
all css into a single file?(such as
maintainability or other performance
issue)
It is not necessary to maintain a single file, but good to serve a single file, because CSS data is anyway merged.
The YUI Compressor is a good tool for JavaScript and CSS minification.
Would it be wise to combine all CSS into a single file? Would there be any performance increase. I have to assume that an HTTP request is made to get each file on initial page load, and reducing those requests would seem to make sense.
Yes, yes, yes.
Are there any reasons NOT to combine all css into a single file?
No
(such as maintainability
Combine them at build time and not at development time an there won't be a maintainability problem.
When not all page need all the css then splitting it in multiple files might be faster.
Maintainability becomes an issue if the CSS file gets really huge, when different teams need to coordinate their work on it.
There might be another reason, to NOT combine files:
If the combined stylesheet file is getting too large, Internet Explorer 9 will ignore some of the styles..
See: IE 9 ignoring CSS rules
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.