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.
Related
I'm having trouble finding an answer to why it's better to enqueue Google fonts in the functions.php file vs adding #import url('https://fonts.googleapis.com/css?family=Raleway:400,500,600,800,900'); directly to the style sheet.
I read on one site that if you use the style sheet method the CSS file loads twice? That's bogus, right? Why is the functions method superior?
Enqueuing the style sheet in your functions.php is better just in case there might be another plugin that wants to use the same font. If it's properly enqueued using the wp_register_style() and wp_enqueue_style() functions then WP will only include the link once, no matter how many plugins want it. However, #import it yourself (or add the link manually to your header.php) and WP can't know about those, so it will get loaded more than once.
Of course, if you know exactly what resources your theme and plugins are using, and know that nothing else will want to load the same font, it doesn't really matter if you link to or import it manually!
WordPress has a large and strong developer community. Thousands of people all around the world design themes and plugins for WordPress. To ensure that everything works properly and that one plugin or theme doesn’t break another, WordPress has an enqueue script function. This particular function provides a systematic way of loading Javascript along with styles.
With the help of the wp_enqueue_script() function, you can easily inform WordPress the best time to load a script long with dependencies if any. Such a feature allows everybody to utilize the built-in Javascript libraries that come in a bundled form. It also helps in reducing the load time of page along with avoiding easy conflicts with themes and plug-ins.
Enqueuing scripts in WordPress also ensures that duplicates with the same handle are not loaded twice.
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.
I run a personal wordpress website running the avada theme and I ran the google page speed insights tool on it and it said that I had an issue "Eliminate render-blocking JavaScript and CSS in above-the-fold content".
Im not sure how to go about correcting this, I dont know how to code wordpress themes so cant change the code. Ive tried using several plugin's to fix this and the the close one that came to nearly fixing it was "autoptimize". If anyone has any suggestions it would be greatly appreciated.
Take a look at wp_enqueue_script(). It allows you to specify where to echo the script, specifically the last argument $in_footer. If the script is echoed in footer after HTML is rendered, it will address your issue. Typically javascripts are called from functions.php file in your theme directory (wp-content/themes/your-theme-name/functions.php). Look for something like this:
wp_enqueue_script('isotope', get_bloginfo('template_url').'/js/jquery.isotope.min.js', array('jquery'), '1.3.110525', true);
it tells wordpress to enqueue the script with a dependency on jQuery and echo it in the footer. If you view the source of your web page, you can see which scripts are echoed in the header and which are in the footer. Some plugins will echo the scripts in the header regardless, so you can't do much without modifying the actual plugin. In addition some javascripts may require to be loaded at the top before DOM is loaded. Hope it helps.
Source
Looks like there is a wordpress plugin called Above The Fold Optimization that will do a lot of the work for you. I believe it also enables compression. Once you install the plugin
So, i'm building a website using magento, i tried to install a theme but there are some files that dont seem to be loading, including some css, i'm gonna list the website and the demo of the theme so you guys can tell me if you see something where you can help:
The website
The Demo
As you can see, there is a lot going wrong... the name of the divs isnt even the same, i have followed the readme tutorial and done this multiple times, the theme was installed using magento connect.
I've done the whole System>Configuration>Design and pointed to the new theme...
If you could give me some clue about what's wrong, i'd be very thankful, any further details needed, just ask.
Package from Magento Connect includes only design and skin files without WebAndPeople Custommenu extension.
Which names of divs do you see as not similar? I installed this theme for test and it is similar to yours with div names. Don't look on the devdemoz.com's demo because it is modified theme and is not original that included in package! You can compare their style.css and your with diff or notepad++ to find differences (about 20% of original skin).
Footer. You made mistake in HTML code and placed tag <h3> outside of <ul>. Just move them one line down like in /readme.html file.
If you wish to use modified mobileshoppe demo from devdemoz.com you can simply grab their style.css and images and put in your folder.
i want to make some changes into my wordpress css file. i downloaded the style.css and other css file via ftp and made all the changes into the codes i wanted to. I uploaded the files and replace it with the other files. I waited for some time to take it affect but nothing happened, i left it and open my site the other day but the things were still same, no changes. I was using the WP Minify cache plugin. I even deleted it and re upload the css files again but still no changes. I tried out so many things but no success.
I than changed the name of the theme main directory via ftp, it help me a bit and made me happy for awhile, all the changes appeared. I again needed some changes in css files but unfortunately again suffering the same process. Please help :(
P.S. No theme is taking the effects of modifications in the css files codes. i tried different themes, but same results. Even if i delete the style.css nothing happened, but when i delete the entire directory of that theme then blank white page appear on my website.
It doesn't sound like you activated the new theme from your administration panel.
http://codex.wordpress.org/Themes#Selecting_the_Active_Theme
When using any cache plugins you should delete its cache when you do any changes to the website. Have you already done that?
Are there any other css files being loaded after style.css that may alter what you are trying to change?
It's generally not a good idea to edit the themes style.css directly b/c when you upgrade that theme you will lose all of your customizations.
Doesn't your theme have some place for custom CSS? Some themes have it in Appearance >> Theme Options, or something of that nature. What theme is it? Do you have a framework, or child themes? More info needed ... but every theme has a spot for custom css; as was mentioned, it's not best practice to make your modifications in the actual main theme stylesheet, due to updates, etc. ... and anything in the custom css section overrides the default theme stylesheet.