Website performance

albertoferreira · October 2014

Hi,

I have a single Homepage, with just one page, and Google Pagespeed is giving 49%.

Giving the problems google pointed out, here is my questions:

1 - How to exclude Javascript and CSS files from loading that I don't need?

2 - How to move Javascript files to the end of the document and not on header, as best practices?

3 - How to compress dynamic CSS and JS?

4 - How to prevent that with Retina, Browser Download both versions of the files?

Thank you.

Albert · October 2014

Hey,

as you can see at https://developers.google.com/speed/pagespeed/insights/?url=http://themes.muffingroup.com/betheme/&tab=desktop on our demo we got about 80/100 at this moment (it was 90% few days ago but it looks like google page speed tool changed something). However at first we recommend to install W3 Total Cache because this plugin speed website a lot. Below we`ll try to also answer on your questions:

1. This can be done only in files and if you want to do it, then you should have a look into functions/theme-head.php file.

2. This one is not possible as wordpress does not allow for that.

3. You can transform them to Static CSS. We explained it in documentation http://themes.muffingroup.com/betheme/documentation/#static-css

4. Can you explain what you mean?

erkintazh · January 2015

Hi Guys

i'm new in html ans php as css, when in your doc you say only, "get & copy whole content from both into style-static.css" and when i try to understand my head is cracking (breaking) please can you show video or explain it for stupids! $) see why my head is breaking

https://yadi.sk/i/Gpow9Y63eJCqg

please forgive me that i cant make copy and past of so easy things but i really don't understand it )

Albert · January 2015

@erkintazh Sorry but we do not have any video for that and also we do not have time to record video now because we are too busy. Please look at http://themes.muffingroup.com/betheme/documentation/#static-css where we explained "step by step" how to do it. This really can't be explained easier.

erkintazh · January 2015

OMG, thanks anyway )

erkintazh · January 2015

what i understand that i can't just copy and past, it'll be not right, at least it looks different. (

Albert · January 2015

@erkintazh Yes, this is what you must do exactly. But as we explained, you must copy code from the file which is generated in browser. We do not talk about file on FTP where you have php code.

rienzicomunica · February 2015

Hi,

I've the same problems.

I've test my site with google PageSpeed and the result is very low result that you can see there:

https://developers.google.com/speed/pagespeed/insights/?url=http://rienzicomunica.com/&tab=desktop

Critical problem detected on Desktop website version are:

Images optimization, and this i can make with Gimp and try to fix. The other problem is the Leverage browser caching. In this case i dont know how I can fix!

The same problems are detected for the mobile version of website. in this case there is also the problem of the elimination of JavaScript and CSS that block the display content above-the-fold.

I dont pretend to arrive at scores 100/100 but I would at least get out of the "red zone" and improve the speed of the site. Can you help me and give me advice on how to proceed?

PS. Maybe on the website I have many active plugins (creates a problem in terms of speed?) Between these however use W3 Total Cache.

Albert · February 2015

@rienzicomunica The problem must be somewhere on your side but you must find what exactly is wrong. We use W3 Total Cache plugin only and as you can see http://gtmetrix.com/reports/themes.muffingroup.com/fdEzaFX7 the result is very good. So please use this plugin and configure it. But if website will be slow still, then you must think probably about better hosting.

BrightSky · February 2015

W3 Total Cache.

What settings are you using, as this will help, our site speed is 61/100 red.

Thanks

Albert · February 2015

@BrightSky Settings that we use, you can get from http://forum.muffingroup.com/betheme/discussion/1453/w3-total-cache but each server may be different configured and some of our settings may not work in your case.

rienzicomunica · February 2015

@muffingroup the problem can be that there are many Css files and many scripts.

I must eliminate render-blocking JavaScript and CSS in above-the-fold content. Any suggestions ? How can I fix it?
And do you have suggestions (plug in, etc..) for optimize images?

Let me know

Thanks

F.

rienzicomunica · February 2015

@muffingroup do you have any suggestions how defer parsing JavaScript to reduce blocking of page rendering?
Let me know!

Thanks.

F.

Albert · February 2015

@rienzcomunica Sorry but we do not have any suggestions for that. We got many css & js files because we got lot's of features. However if you don't use some of them and you know which one you want to remove, then you can play with functions/theme-head.php file where most files are included.

rienzicomunica · February 2015

@muffingroup I'm reading some forums on the net where recommend how to make the defer of JS.

I found one (http://premium.wpmudev.org/forums/topic/how-do-i-defer-parsing-of-javascript-to-iprove-performace) that recommend where to place this code in the file functions.php after?> Tags.

<? php

defer_parsing_of_js function ($ url) {

if (FALSE === strpos ($ url, '.js')) return $ url;

if (strpos ($ url, 'jquery.js')) return $ url;

return "$ url 'defer';

}

add_filter ('clean_url', 'defer_parsing_of_js', 11, 1);

?>

I tried to add it in the child theme but I see no changes with http://gtmetrix.com/

Inside the plugin W3total cache, Minify section. (under section Js> JS minify settings

I set this:

Before </ head> Combine only: Default (Blocking);

After <body> Combine only: Default (Blocking);

Before <body> Combine only: Default (Blocking).

Again I do not see changes with http://gtmetrix.com/

Also could you tell me how I can assign the size of the images? already present in the library media?

Thanks a lot.

F.

erkintazh · February 2015

if authors don't have time to explain, may be some one can explain?

also i did but my background dissappeared!!! Help! ^)

erkintazh · February 2015

if it takes less than 3 min pls explain it!

Albert · February 2015

@rienzicomunica, @erkintazh You must understand that we can't do this because in accordance to wordpress API we must use:

wp_enqueue_script( 'jquery-mfn-menu',   THEME_URI. '/js/mfn.menu.js', false, THEME_VERSION, true );

and then only use it as below:

add_action('wp_enqueue_scripts', 'mfn_scripts');

Those are WP API needs and we can't change them. And if you don't like it, then write to wordpress developers that they should change it.

erkintazh · February 2015

Dear friend! Pls don't be angry )

Becouse Betheme is a theme with muffinbuilder and wp-bakery where users can be no experts of css and php You can expect to meet some stupid and silly css and php userds like me.

may be i'm in different path but let me explain:

in documentation there is written

After finished website, please open YOUR style.php and style-colors.php files in your web browser. On our demo the example links are as follow: http://themes.muffingroup.com/betheme/wp-content/themes/betheme/style.php and http://themes.muffingroup.com/betheme/wp-content/themes/betheme/style-colors.php and then get & copy whole content from both into style-static.css file on your FTP server.

get & copy whole content from both into style-static.css

ok what i do, i see

i see in static.css two place where i wnt to input whole code of style.php and style-colors.php

https://yadi.sk/i/BC_4tUbIebbDg

erkintazh · February 2015

i go to style.php than ctrl-a, ctrl-c, to static.css and after /* style.php */ line in static.css i do ctrl-v than do the same with style-colors.php

erkintazh · February 2015

when i do it " get & copy whole content from both into style-static.css file on your FTP server. " after i activate static css in theme panel i lose background of the website.

Don't make it difficult keep it simple pls i'm not talking about API or some bad words.

Queestion is: ctrl-c > ctrl-v not working becouse i do smth wrong... or there is another problem?

Albert · February 2015

@erkintazh You must get content from browser after files are parsed. We do not talk about files on FTP. If you will send us url to your website then we'll be able to give you paths for those files.

rienzicomunica · February 2015

@muffingroup return on the subject after comparing the results of the theme demo and my site on gtmetrix.

I have seen on Gtmetric that the theme demo has problems with Defer parsing of JavaScript, Specify image dimensions, Serve scaled images. The theme demo has a Page Speed Grade (84%) and YSlow Grade B (85%) B. http://gtmetrix.com/reports/themes.muffingroup.com/avtdPwqf

My site instead presents problems: Defer parsing of JavaScript, Optimize images, Specify image dimensions and a small part of: Serve scaled images , Combine images using CSS sprites.Il result attributed to my site, however, is: Page Speed Grade (53%), "E" and YSlow Grade (76%) "C".
http://gtmetrix.com/reports/www.rienzicomunica.com/GPsHUgGY

Both sites have the problem of Defer parsing of JavaScript. Therefore if your result is "B" and my results is "E" and this might not be a priority for the purposes of ranking.

The element that really makes the difference could be optimizing images.

At this point I would ask how I can optimize all the images of the site? And how to attribute to all images size?

I tried with the plugin EWWW Image Optimizer having no result.

I look forward to hearing from you.
Greeting

F.

rienzicomunica · February 2015

@muffingroup I publish an update of my prev post.
I've solve the problem ot Image Optimization by Smushit yahoo's service http://www.smushit.com/ysmush.it/ .

I took all the pictures that gtmetrix advised me to optimize and I optimized the service yahoo. Then I replaced the optimized images via FTP in their folders.

The result is that they are passed by a Page Speed Grade: of (53%) "E" to a Page Speed Grade (87%) "B". I would say a good result.

About the Page Speed Grade: I still can not figure out how to specify image dimensions. You have suggestions?

Above all, I wanted a help to improve YSlow Grade which is still at (76%) "C".

The problems can not be solved are:

1) Add Expires headers (There are 38 static components without a far-future expiration date);

2) Make fewer HTTP requests;

3) Use a Content Delivery Network (CDN);

4) Use cookie-free domains.

You can help me improve?

Let me know.

Thank You.

F.

Albert · February 2015

1,2) This is not possible.
3,4) you must purchase CDN service like MaxCDN

rienzicomunica · February 2015

Hi,

Thanks for infos.

Why 1) & 2) is not possible?

Thanks

F.

Albert · February 2015

Because we got to many necessary stuff that can't be removed.

rienzicomunica · February 2015

muffingroup but I didn't ask you to do something but if you could only give your advice to me to improve the situation (I would do it myself if is possible).
Thanks.

F.

Albert · February 2015

But there is no advice in this case as we tried to play with that in the past without success. And because we have no idea what to do in this case, we are also not able to help you.

rienzicomunica · February 2015

Ok no problem ;-)

Thanks

F.

erkintazh · February 2015

ok, cool, my url is http://kamazeuro.kz

Website performance

Comments