Is there a way to have a Materialize CSS CDN link that requests a css file containing styling for only the components that I need?
Thanks!
There is no way to use the cdn links for only specific parts as they link to the full files.
If you're trying to cut down on load time i'd copy just the part you need to your own file and reference it locally.
Good luck!
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 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
I want to optimize my page speed. I have checked with this link. I have solved js problems. But I didn't find any solution for external css like THIS which I added from others source.
How can I resolve this css problems? Please help me.
You need to use this css after download in your local and also with related fonts like
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.ttf
to optimize your page speed more, minify your styles and put them into one file using build tools like grunt and gulp, but if you are not comfortable working with them just copy and paste or use some online tools like shrinker, it will do both operations for you. Also, consider moving down your style (if it links to a large file) and script tags to the bottom of the html file.
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.
i want to create some css styles for my Django templates. Each view will have a css associated, but there will be zones that are not associated to any views in my template.
How can i load the css files? is there enough having them declared in the Media of my view, and loading them in the header of the html?
Also, is it a correct approach to have styles associated to the divs that are not associated to a certain view?
Thanks!
If you use a word view for a typical django view (a method) it is not good idea to create separate css file for each view (unless you have very specific application).
In general you need to create you css files in such way that:
general styles that can be applied in many templates are not repeated in multiple css files
it is easy for you to manage styles in couple of css files
There is no strict guideline to create css file per view or css file per template in Django as far as I know.
Basically pointing to some css file in head, which contains styles appropriate to a template is enough here. Of course you need to make sure that you provide correct path to this file.
You can make one general css with styles that are used by most of your templates and a series of specific css files that are valid only in some specialized templates.
I also advice to take a look at django-compress if you want to go with your site to broader audience - this app makes your static files (like css) smaller and also it helps to concatenate group of css and js files. This has some positive impact on performance without decreasing readability of your code.