jsDelivr ( http://jsdelivr.com ) has Multiple File mode:
https://github.com/jsdelivr/jsdelivr#load-multiple-files-with-single-http-request
Problem is, libraries with CSS such as Gritter and Font Awesome use images in their interface components.
This leads to 404 errors when doing something like this:
//cdn.jsdelivr.net/g/jquery#2.1.0,bootstrap#3.1.1,summernote#0.5.0,mousewheel#3.1.6,jquery.timeago#1.3.0,jquery.gritter#1.7.4,jquery.unveiljs#1.0,jquery.waypoints#2.0.2,bootstrap.tagsinput#0.3.9,bootstrap.datepicker-fork#1.3.0,jquery.jqote2#0.9.8,portal#1.1.1
How can we use multiple libraries off the one CDN pageload, but change the paths CSS files reference to use the appropriate jsDeliver.net URI?
Is this a job for post-processing CSS in-browser, by jQuery or pure JavaScript, or is one forever doomed to one CDN pageload per CSS file referencing images, plus one remaining pageload for the CDN served CSS without image references?
Yes, unfortunately /g/ does not work with files that contain relative paths.
You can load this kind of files individually and use /g/ for the rest of them normally.
Related
I have been reading about leveraging cdn to boost the speed of web application. I am developing a react application and I am using stylus for css. My current structure of project is something like this: Each component or page has it's own seperate local stylus file. So this way I am trying to keep the syles isolated for each component so that it is easy to maintain. But mostly all the stylus files has around 1000 lines of code which is common for all the stylus files. This brings down the speed of my application while it loads. I am thinking of putting the css on cdn. This way it will be faster I am assuming. How can I do it with my present project structure?
Right now I include stylus like this in each component
import c from "./reviews.styl"
render() {
return (
<div className={c.container}>
If I create a seperate css file as sugegsted in answer to include all the common css, how will I say to each component to use that common.css file. Each component is already using the imported stylus file like I shown above
You have a few ways here...
In the constructor you can append a link tag to the head
In componentWillMount you can append a link tag to the head
e.g.
document.getElementsByTagName('head')[0].appendChild('<link rel=stylesheet href=mycdn.com/mystylesheet.css />');
I'm not saying moving your CSS to a CDN is a good solution, but this is how you'd accomplish it.
The benefit of a CDN is that your static web assets are deployed across the world on multiple servers and your users can easily retrieve quick copies of these assets. In the case where you are using a file like jquery-x.js, users may already have retrieved the file from the CDN for another website and even on the first page load, they can use a cached copy.
Your biggest issue is the duplication of CSS code throughout each component's style page and that can be overcome by just creating a generic style sheet with the common styles (say "common.css") and then including it in each component. You don't have to use a CDN to achieve this and you can investigate CDNs after you first get rid of the duplicate CSS as another way to speed up your page load.
I'm trying to refactor a nodeJs project and my css is in my .ejs file. I need to put some dynamic data in my css file. I need to have dynamic data in my css, when my css is in my EJS file it's good.
But when I put my css into an external file, nothing happens!
So, how can I inject ejs tag in my external stylesheet file?
This is one of the questions to which one has to ask you - why do you want to do that? You are asking about a solution to a problem that you didn't describe.
By suspicion is that you are trying to use a templating system for something that could be done with a CSS preprocessor like Sass or Less. Particularly Less can be easily used on both the client side and server side. See http://lesscss.org/#client-side-usage
Now, if you really want to use a templating system created for HTML to generate CSS then you will have to take few things into account: You need to store your CSS templates somewhere where your HTML templates are stored, not where you store your static assets like images. Then, your server will have to serve your generated CSS with a correct MIME type. Then, your HTML will have to reference the styles using a URL to your generated CSS that will be generated on every request instead of being served directly from disk.
I'm Building a website, and It has a lot of pages approximately like 30 pages, and I linked these pages with one CSS file (the main css files) not to mention the other files such as bootstrap.min.css and other plugins that requires their own css files.
My point is that in all of these I'm using like the same css files, but in some pages I don't need all of the properties and styles in main.css file, so I'm thinking that I split that css file into multiple files, and create file called (global.css) and type in the properties that I'll need in all pages, and make another css file for each individual page.
My question is:-
Is it going to be helpful for the website speed if I split that main css into multiple css files and include only the necessary things for each page?
Ideally you want to abstracts your CSS files into many different SCSS files and then compiles them into one minified master file. One file for the header styling, one for links, one for typography. I was afraid of SCSS but now love it... Nothing changes in production, you are still running off CSS bit in development you are just making your life that little bit more organised.
NO,
you better dont want to do that if your code is small like less that 50kb or even 100kb
also if you provide seperate css for each page browser has to download each css file when user visit that page that will cost you one additional request for every single page this will slow down your page and affect your performace
instead I would suggest when your code goes live compress your code or minified it so youll get the more smaller version of your code
I also suggest to leverage browser caching (using .htaccess if you are using linux server)
above are the things which comes under front end performance improvement
The Font-Awesome docs do not mention anywhere that other files need to be downloaded and included within a project so why are the icons missing?
I know that the font files should be within the relative path so Font-Awesome can see them, I understand that, but with reference to other techniques like combining and minifying css files and JavaScripts, why is it that there will more HTTP requests to get the fonts?
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (fontawesome-webfont.woff, line 0)
You can see that they do state that you need to copy the entire directory onto your webserver.
http://fortawesome.github.io/Font-Awesome/get-started/
EASY: Default CSS
Use this method to get the default Font Awesome CSS.
Copy the entire font-awesome directory into your project.
So just including the CSS file in your header isn't going to do much, because as others have pointed out.. it's a font. Think of it like Wingdings, so that's a font file.
Then the CSS basically sets the classes as background images, using the content but written using the font.
Minifying can cause some disruption to the paths of your CSS files. Basically, you need to make sure things are being referenced correctly. But firstly, ensure that the font files are on your webserver, and the CSS file of font-awesome is pointing to the correct path.
The entire point of Font Awesome is that it provides icons in form of a font file. Usually that font file is in the correct spot in the right directory next to the CSS files. The CSS files are referencing those font files (because they have to, somehow).
If you're picking that folder structure apart and are serving the CSS file from a different location then you'll also need to take care that the relative references to the font files don't break.
Follow the steps on their website.
Download here.
I have an app which needs to work in several languages, and several different color schemes and I would rather not load all the CSS every time since a large amount of it is not necessary or relavant (rtl css for example) but meteor automaticaly loads all CSS files he can find.
is there a way to selectively load CSS files?
Thanks.
If you place a CSS file within the reach of Meteor compiler, it's merged into the main app and in the current release there's nothing you can do about this.
You can however put the file in /public directory. Meteor won't touch it there, and you will be able to load it at will by adding <link/> tag to your page head.
Please have a look at https://stackoverflow.com/a/26694517/1523072 which seems a quite elegant way to do this and also explains why you shouldn't do it.
One of my apps currently loads 2.6MB compressed Javascript and 300KB compressed CSS, which seems like a lot. However, after the first visit all the resources are cached by my browser, which means the only thing that is transferred between browser and server after that is pure data.