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.
Related
I am working on a wordpress site, I have to check render-blocking with google page speed.
Optimize CSS Delivery of the following:
/wp-content/plugins/sitepress-multilingual-cms/css/language-selector.css?v=3.4.1
/wp-content/themes/premium-theme/style.css
/wp-content/themes/premium-theme-child/style.css
http://fonts.googleapis.com/…300%2C400%2C600%2C700%2C900&subset=latin
I actually use "BWP Minify" to combine some others css, but here are the remains, it might be because the plugin couldn't detect those.
I have to combine all css in 1 file or as least as possible.But I don't understand, The css files are located in different plugins, themes folders. how can we combine it? I found a lot of tutorial to inline and copy them in 1 file but I can not do that in wordpress.
I also try to defer css to help solve it but no success with this git hub!
I use the last code in my child- functions.php
if anyone has experience, please help me.
I am optimizing my site and I am following GTmetrix's suggestion to inline a small amount of css. Only I can't find where it is calling for this. I can see it when I view the source but when I check my different index.php files I can't seem to find where to make that edit. Any thoughts? Thanks. My site is www.destinychurchjacksonville.com and the css in question is:
http://www.destinychurchjacksonville.com/media/com_acymailing/css/module_default.css
Like I said, I can see where it calls for the file when viewing the source but my site is built in Joomla which is php.
I've had really good results with JCH Optimize. It's a moderately complex extension so plan on spending time reading the docs and testing the options.
It will combine multiple CSS and JS files and you have some options to inline the CSS.
If you can get most of the extension options working you'll be impressed with your grading improvements. For me, the big gains were from combining the multiple CSS and JS files.
Good luck!
The css file you are referring to is called from within other ccs files in the same folder located at /yourjoomlarootfolder/media/com_acymailing/css using:
#import url("module_default.css");
which seems to be called from mod_acymailing.php located at /yourjoomlarootfolder/modules/mod_acymailing depending on the acymailing skin/theme you are using
or at least that's what i found in a fast search i did on one of my sites using acymailing.
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.
I recently setup django-grappelli on my first django app. While I like the way it looks I want to customize the colors, and other CSS.
From my research, it looks like I will have to use Compass but I've never used Compass before and want to double check that this is the best method before I embark on that path!
Is Django-grapelli even the right choice for some one that wants to customize the color theme?
Things I tried
Modify the CSS in the Grappelli stylesheets but they are formatted in a way that makes it tedious.
Extend the style sheet but I am not sure where to do this for the admin.
Create a custom.css but could not figure out where to put the path
Thanks for your advice!
It seems to me like Compass is just a tool to write CSS. I've never used it, but at the moment I don't see how it could make modding the admin interface any easier than doing it manually!
Whenever I make changes to the admin (I've made changes to Grappelli, like you're trying to do), I always use what you've listed as number 2. I've never had any troubles! I can try to help you out, if you'd like to try again.
What I do first is go to my Python install directory and copy the Grappelli source from Lib/site-packages. I put this code in my project directory as a project-level app. So, if you're using Django 1.4, you'll have a folder that has your project folder as well as manage.py in it. Put the code there.
Then, using your favorite web developer tools (I prefer Chrome's), figure out which stylesheet you need to modify and which css file it's in. I do this by right-clicking the element and selecting Inspect Element. This brings up the dev tools, and at the right it tells you the css file its referenced from as well as which line its on. If you open up that css file in your favorite text editor and make changes to it, it should work!
Let me know if you're having any trouble with this. I can try to help you out further.
(and, P.S., I wasn't trying to be pedantic with a basic overview of the use of Chrome's developer tools. I was just trying to be helpful by not assuming anything. I hope you don't take it as an insult.)
I am trying to use LESS CSS to write my CSS. I have imported the style.less and less.js file in that order.
Now i wanna extract the CSS that LESS generates.. is there any way i can do that ? i dont want to use the script to generate it dynamically in production. just for development.
You can extract the CSS using the Firebug extension in Firefox. The compiled CSS appears under the menu choice "inline" in the CSS tab.
http://incident57.com/less/ if you're fortunate enough to use OS X, and there's a ruby gem too http://rubygems.org/gems/less although this has been superseded by the node.js implementation installed through npm. Check http://lesscss.org/ for more information.
There's also http://www.dotlesscss.org/ for windows, but not sure how useful it is.
And in 2013 we have:
http://less2css.org/
Seems to work just fine for me. Just copy/paste.
Chances are you'll want to minify your CSS after this, so:
http://cssminifier.com/
For others who'd stumble here, in modern browser you can see it in the LocalStorage. I use Chrome and it's in the dev toolbar under Resources.
In my case we also want to save the css file automatically (we have a tool that generates a template), we can do it easily with javascript.
This returns the generated CSS, just replace it with the right path, as you see it under the Resources tab:
localStorage.getItem('http://domain.com/css/main.less');
Then we send that through Ajax to save it in a css file. When switching to production we remove the less and replace it by the generated css file.