Which uses less resources while loading a website which uses font-awesome icons ?
using online link :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
or using locally downloaded fontawesome.min.css file and giving its link in html
The main benefit of having them on a CDN is that the files can be downloaded in parallel to files downloaded from your own website. This reduces latency on every page. So, the flip side of this is a pitfall of hosting locally - increased latency. The main reason for that is that browsers are limited in the number of connections that they can make at the same time to the same webserver. In IE6 this was defaulted to 2 concurrent connections to the same domain - shared between all open windows of IE!! In IE8 it is a bit better, defaulting to 6, which is inline with FF, but still, if you have a lot of images and you are not using sprites, you will experience heavy latency.
Using a CDN, I would always set the library version explicitly rather than getting the latest one. This reduces the risk of new versions breaking your code. Not very likely with jQuery, but possible.
The other main benefit of using a CDN is reduced traffic on your site. If you pay per GB or you are on a virtual server with limited resources, you might find that overall site performance increases and hosting costs come down when you farm off some of your content to a public CDN.
from - Benefits vs. Pitfalls of hosting jQuery locally
Related
Have been working on a site and have used Boostrap via MAX CDN by putting
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
in the head section.
Google Pagespeed is showing:
Your page has 1 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
Optimize CSS Delivery of the following:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Is there anyway of fixing this?
Thanks
The other answer is too incorrect, so I am writing this if anyone still needs help on this.
CDNs speed up your production websites too, not only your local development environment. Hosting a static file locally on your own host does not solve the Render Blocking issue that pagespeed tool suggests here. A static file hosted locally is still render blocking.
The solution here is inlining the render blocking CSS files completely. However, I would recommend to not inline the resources for several reasons:
Resources delivered over CDN are delivered faster. If you inline them, the entire payload is expected to deliver at slow pace.
Resources delivered separately are cached by browser, while if you inline CSS resources browser will not be able to reuse them across requests.
Resources inlined are compressed on every request along with the other dynamic contents of the file. You cannot take advantage of pre-compression that comes with CDN.
Bigger HTML document due to inlined CSS files is expected to slow when it comes to parsing.
What should one do to resolve this issue? You might think differently, but I would suggest you to do nothing.
Its not that bad if the browser has to wait a little for resources to download. If you are using CDN, chances are visitors will not perceive the download as most of the CDNs now a days have less than 50ms average global latency.
Resources are cached by browser. While pagespeed tool loads fresh resources on every request, please note that browser may be loading some of the resources from cache, completely eliminating the CDN request.
Resources are shared across websites. If you are using Bootstrap from a public CDN, chances are that the same bootstrap file is already available in browser cache of the visitor, that is downloaded when the user visited another website that used bootstrap. This gives 0ms latency and 100% bandwidth saving for that particular resource for even your first time visitors that have no other resources of your site in their browser cache. Browser can now spend the saved bandwidth elsewhere to speed other things up.
Manually inlining external libraries make it little more difficult to keep traces of all inlined copies of the library and makes the edits and updates hard.
Dynamic inlining adds few more disk seeks per request. This just adds to the server load. These IOs can be saved if the files are served separately. Your OS may just cache the files if they are hot enough. Using CDN will completely eliminate this load.
Although not exactly a solution that will remove this pagespeed warning, its possible to reduce the impact of render blocking resources for real visitors (not performance measurement tools):
Serve resources with aggressive compression to reduce the payload size.
Serve resources with immutable cache-control header to tell the browser to confidently store this file for longer period as this is not going to change in the future. If you use bootstrap cdn by pagecdn, these two optimizations are enabled by default.
If you know a file is going to be loaded immediately after a page load, you can use HTTP/2 Server Push to deliver the file before even the browser asks for it. However, if you do this, you will need to make sure that the same files are not aggressively been pushed on every request (that is not a good option as the files should load from browser cache on second request onwards).
Either change the CDN (which will most likely do nothing for you) or, simply store the file locally. This will up your Google Page Speed rate.
Download a copy of the bootstrap file you are using and store it like so root/css/bootstrap.min.css
Where root is your project folder.
CDN's are used mainly for test purposes (instant access to files) or in larger-scale projects which have multiple requirements that can't always be met locally.
Read this thread to better understand.
While the error that Google gives you might not be a serious issue for your project, it is always a good practice to use your resources locally, so that your website may load by itself, without referencing external sources that resemble in a separate query.
Static files = better load times = happy Google.
I'm getting starting with bootstrap and followed a website that says
There are two ways to start using Bootstrap on your own web site. you can Download Bootstrap from getbootstrap.com or
Include Bootstrap from a CDN
also later
you want to download and host Bootstrap yourself
then
If you don't want to download and host Bootstrap yourself, you can include it from a CDN (Content Delivery Network).
what does it mean what is the process
Hosting any css/js file yourself means that you put it on your own website/server.
It means people will download it from your website every time they open it up. (unless it's cached locally by the browser, but at least the very first time)
CDN is used so that people already have the files in their cache from any other website they visited using the same CDN. (For example, a google font)
This drastically reduces loadtimes for first time visitors, but you do risk delays that are out of your control by loading something from an external website (if it's out, yours won't work properly!)
So it's a speed vs risk thing, basically.
hosting it yourself means you download the file and put it in the same place as your website on your web-hosting server.
otherwise, you can reference it in your website with a CDN(content deliver network). these networks hold files for you to use. you add a reference to in your website. and you don't have to keep the bootstrap files on your own server.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
^ this is an example of CDN. they'll probably have a server keeping the file bootstrap.min.css, then they get a domain (bootstrapcnd.com), create a sub-domain(maxcdn). and you can request the resource(the bootstrap.min.css file) from it.
Of the 2 options, you can choose which one is the best for YOU.
i'd list out the "goods" and "bads" of both:
Availability: Hosting on your own server means, you never have to worry what happens about downtime. as long as you have your own server up(where your website files are placed) your resources will be available too. Whereas, if your vendor resources(jQuery, Bootstrap) come from a CDN, the CDN server being down will affect your visitors too. A GOOD CDN Service however, gives up time up of around 99.9%.
Usability: What do you do when you want to update your jQuery or Bootstrap? If you're hosting yourself, you go to the jQuery or Bootstrap website, download the file and put it on your server, then update the reference in your html. With CDN, you just update the version(given that particular CDN has the updated file).
Caching: Every unique visitor to your website will download the resources(jQuery, Bootstrap etc) if it's hosted on your server. With CDN, it these files might already be cached on their browser if they visited a website that uses the same CDN as you. resulting in faster loading time for YOUR page.
Bandwidth: Let's say you're using a very cheap hosting. and they give you like 100 MB bandwidth every month. but you do get a 30 unique visitors daily. your website page size with jQuery is 100 KB. and your monthly bandwidth usage around, (30*100*30/1000 = ) 90MB. with jQuery(~84KB) on CDN it becomes (16*30*30 /1000 = ) 14.4MB. (Again this is a hypothetical case. i don't think you can find a hosting as bad as 100MB a month, but you get the point).
I'll add up more when i remember them. hope it helps.
I have a website that runs just fine on my local server. It's quick, responsive, and overall runs great.
But when I put it on the server of my domain host, sometimes it takes excessively long to load assets. For example, one 1MB png file took 2.31 seconds to load:
Chrome's Network Developer Tool reveals to me the following:
So is this likely due to poor implementation of my code or is it possibly a crappy server? (The company is subscribing at the lowest tier possible to host their content) My internet connection is quick so I doubt it's that.
I think it is probably a problem with your host. An image is an image :) there aren't a 100 ways to implement one!
Oversized images always take longer to load, so you should keep your images as small as possible.To lower down the content download time, you can optimize/compress the image without degrading it's visual quality.If you are using any graphics software to optimize the images, you should use “Save for Web” option. This will reduce the size of images and hence image load time.
Furthermore, you can use CDN to serve static assets of your website like, images, CSS,JS, videos, etc. A CDN populates your website files to geographically distributed network of servers called POPs. CDN serves the website resources from the nearest geographical location of a visitor, that means your website assets will load more faster.
Use SSD based host. SSD has excellent read/write rates compared to that of traditional HDDs. Hence, solid state drives perform better than hard disk drives and they are almost 100 times faster than traditional HDDs.
Here's a question for you
Is the image you're trying to load in background, or its an image tag?
I'm doing a new site for which I actually have licensed/free fonts for use as #font-face web fonts.
My question is this: as these fonts are also on TypeKit.com, do I actually gain anything from either using them from there vs hosting the fonts myself?
My site will run through CloudFlare and therefore the font files will be cached there as well.
Is there any reason why I should continue to use TypeKit for this particular site?
Best regards,
Michael
There are performance, cost and stability trade-offs when choosing where to host your font files. Font files can make up a large portion of a page filesize and load time. Ideally, you should use a CDN (content delivery network) to speed up load times by serving the files from locations distributed around the world. Both CloudFlare and TypeKit use a CDN. If you host the font files themselves, you can put CloudFlare in front of your server to cache and deliver the files. The really nice thing about CloudFlare is that they don't charge based on pageviews/bandwidth (TypeKit charges by views). If your site suddenly becomes hugely popular, you won't get a huge bill from CloudFlare, while you would with TypeKit. Additionally, all providers have outages every now and then. Some networks have more robust setups than others. I personally respect CloudFlare because they always are extremely upfront about issues and post detailed post-mortems right away.
On another note: CloudFlare usually doesn't cache external resources (such as fonts served by TypeKit) on webpages. Files are only cached if they are originally from a server that's behind CloudFlare.
I am thinking to save server load, i could load common javascript files (jquery src) and maybe certain images from websites like Google (which are almost always never down, and always pretty fast, maybe faster than my server).
Will it save much load?
Thanks!
UPDATE: I am not so much worried about saving bandwidth, as I am reducing Server Load because my server has difficulty when there are a lot of users online, and I think this is because there are too many images/files it loads from my single server.
You might consider putting up another server that does nothing but serve your static files using an ultra efficient web server such as lighttpd
This is known as a content delivery network, and it will help, although you should probably make sure you need one before you go about setting it all up. I have heard okay things about Amazon S3 for this (which Twitter, among other sites, use to host their images and such). Also, you should consider Google's API cloud if you are using any popular javascript libraries.
Well, there are a couple things in principle:
Serving up static resources (.htm files, image files, etc) rarely even make a server breathe hard except under the most demanding of circumstances (thousands of requests in a very short period of time)
Google's network is most likely faster than yours, and most everyone else. ;)
So if you are truly not experiencing any bandwidth problems, I don't think offloading your images, etc will do much for you. However, as you move stuff off to Google, then it frees your server's bandwidth up for more concurrent requests and faster transfer on the existing ones. The only tradeoff here is that clients will experience a slight (most likely unnoticable) initial delay while DNS looks up the other servers and initiates the connection to them.
It really depends on what your server load is like now. Are there lots of small web pages and lots of users? If so, then the 50K taken up by jQuery could mean a lot. If all of your pages are fairly large, and/or you have a small user base, caching jQuery with Google might not help much. Same with the pictures. That said, I have heard anecdotal reports (here on SO) that loading your scripts from Google does indeed provide noticeable performance improvement. I have also heard that Google is not necessarily 100% uptime (though it is close), and when it is down it is damned inconvenient.
If you're suffering from speed problems, putting your scripts at the bottom of the web page can help a lot.
I'm assuming you want to save costs by offloading commonly used resources to the web at large.
What you're suggesting is called Hotlinking.. that means directly linking to other people's content. While it can work in most cases, you do lose control of the content, that means your website may change without your input. Since image hosted on google are scoured from other websites, the images may be copyrighted, causing some (potential) concern, or they may have anti-hotlinking measures that may block the images from your webpage.
If you're just working on a hobby website, you can consider hosting your resources on a free web account to save bandwidth.