Hi there,
I’ve seen that at every page request there are in the page header the following calls generated by wp_head():
<link rel='stylesheet' id='contact-form-7-css' href='http://43b.60a.myftpupload.com/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=4.3.1' type='text/css' media='all' />
<link rel='stylesheet' id='cookielawinfo-style-css' href='http://43b.60a.myftpupload.com/wp-content/plugins/cookie-law-info/css/cli-style.css?ver=1.5.3' type='text/css' media='all' />
<link rel='stylesheet' id='wpus-bar-css' href='http://43b.60a.myftpupload.com/wp-content/plugins/wp-ultimate-search/css/square.css?ver=4.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='google_font_open_sans-css' href='http://fonts.googleapis.com/css?family=Open+Sans%3A300%2C400%2C600%2C700&ver=4.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='google_font_roboto_cond-css' href='http://fonts.googleapis.com/css?family=Roboto+Condensed%3A300italic%2C400italic%2C700italic%2C400%2C300%2C700&ver=4.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='evcal_google_fonts-css' href='//fonts.googleapis.com/css?family=Oswald%3A400%2C300%7COpen+Sans%3A400%2C300&ver=4.4.2' type='text/css' media='screen' />
<link rel='stylesheet' id='evcal_cal_default-css' href='http://43b.60a.myftpupload.com/wp-content/plugins/eventON/assets/css/eventon_styles.css?ver=2.3.17' type='text/css' media='all' />
<link rel='stylesheet' id='evo_font_icons-css' href='http://43b.60a.myftpupload.com/wp-content/plugins/eventON/assets/fonts/font-awesome.css?ver=4.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='wordpress-popular-posts-css' href='http://43b.60a.myftpupload.com/wp-content/plugins/wordpress-popular-posts/style/wpp.css?ver=3.3.3' type='text/css' media='all' />
<link rel='stylesheet' id='evo_wv_styles-css' href='http://43b.60a.myftpupload.com/wp-content/plugins/eventon-weekly-view/assets/wv_styles.css?ver=4.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='js_composer_front-css' href='http://43b.60a.myftpupload.com/wp-content/plugins/js_composer/assets/css/js_composer.min.css?ver=4.8.1' type='text/css' media='all' />
<link rel='stylesheet' id='td-theme-css' href='http://43b.60a.myftpupload.com/wp-content/themes/Newsmag/style.css?ver=2.3.5' type='text/css' media='all' />
<script type='text/javascript' src='http://43b.60a.myftpupload.com/wp-includes/js/jquery/jquery.js?ver=1.11.3'></script>
<script type='text/javascript' src='http://43b.60a.myftpupload.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://43b.60a.myftpupload.com/wp-content/plugins/cookie-law-info/js/cookielawinfo.js?ver=1.5.3'></script>
<script type='text/javascript' src='http://43b.60a.myftpupload.com/wp-includes/js/underscore.min.js?ver=1.6.0'></script>
<script type='text/javascript' src='http://43b.60a.myftpupload.com/wp-includes/js/backbone.min.js?ver=1.1.2'></script>
<script type='text/javascript' src='http://43b.60a.myftpupload.com/wp-includes/js/jquery/ui/core.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='http://43b.60a.myftpupload.com/wp-includes/js/jquery/ui/widget.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='http://43b.60a.myftpupload.com/wp-includes/js/jquery/ui/position.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='http://43b.60a.myftpupload.com/wp-includes/js/jquery/ui/menu.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='http://43b.60a.myftpupload.com/wp-includes/js/jquery/ui/autocomplete.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='http://43b.60a.myftpupload.com/wp-content/plugins/wp-ultimate-search/js/visualsearch.min.js?ver=4.4.2'></script>
This causes a huge overhead at every page request so that, how can I can get these resources locally in order to reduce the TCP/IP connections and to encrease the site performances?
Moreover, some css and js load are not needed for every page so I could conditionally load these resources only where needed: how can I get this behaviour?
Thanks in advance for any appreciated help.
Giuseppe
Each plugin you add may load in its own custom CSS and Javascript calls. Not easy to “merge” all of that without some serious hacking.
For example if you know you’re going to use the same 10 plugins, you could open up the plugins themselves, and remove the loading of the css and js, then merge all of those into single css and js files and load in footer.
Of course, if you knew how to do that you likely would not be asking how to do it here.
Using the Speed Booster you can optimize some of that to load in footer after main page load.
Some plugins you can disable loading custom CSS and have it accept (inherit) the site CSS.
YOu can also hack the Google fonts to load Google’s CSS into your own style.css but that is also a bit advanced.
Anyway – just some feedback on what that all entails.
Hi
Thanks @Chris for your feedback!
@gmaio you can load the css and js conditional by adding a hook in functions.php file like here:
add_action( 'wp_enqueue_scripts', 'dequeue_unwanted_scripts', 2000 );
function dequeue_unwanted_scripts(){
if (is_page(array('page-id1', 'page-id2'))){
wp_dequeue_style( 'file-id' );
}
if (is_single(array('page-id1', 'page-id2'))){
wp_dequeue_style( 'file-id-' );
}
}Note that this is just a basic example. You have to replace the page-id with the numeric id of your page and the file id with the specific id for each specific resource. To get the page id follow this link: http://screencast.com/t/9V7zgx6WK and to get the file id use the indicated file function in our page-speed guide: https://forum.tagdiv.com/how-to-make-the-site-faster/ – http://screencast.com/t/EYWMMocPrN The required conditions for your resources may differ then the ones I’ve indicated in above example and also you have to make sure that by removing some resources the page load won’t be affected.
Please consider that this is a complex task which require advanced coding skills, also many customization and tests. If you can’t do this by yourself my advice is to look for someone which can help you with this or hire a freelancer to do it for you as we can’t offer any type of custom work at the moment.
Thanks!
Hi guys and thank you for your answers.
@Chris: I did not mean to merge the plugins CSS and/or JS but rather to make “local” their calls that are made in every site page header. In other terms, I’d like to copy these resources (CSS and JS) locally to my server filesystem and call them from there to avoid the TCP/IP delay overhead. I have already tried commenting the wp_head() and including them straight forward by their local paths but this approach causes malfunctioning to the page load. There is something of “dinamic behaviour” of wp_head() that prevents this approach to work successfully. But what?
@Andrej: I’ve deeply read the Speed Booster approach and I’ve tried it, firstly getting the blocking resources names by means of Google Speed Insights tips. It reports that the above fold blocking resources are:
http://43b.60a.myftpupload.com/…-includes/js/jquery/jquery.js?ver=1.11.3
http://43b.60a.myftpupload.com/…s/jquery/jquery-migrate.min.js?ver=1.2.1
http://43b.60a.myftpupload.com/…e-law-info/js/cookielawinfo.js?ver=1.5.3
http://43b.60a.myftpupload.com/…-includes/js/underscore.min.js?ver=1.6.0
http://43b.60a.myftpupload.com/…wp-includes/js/backbone.min.js?ver=1.1.2
http://43b.60a.myftpupload.com/…udes/js/jquery/ui/core.min.js?ver=1.11.4
http://43b.60a.myftpupload.com/…es/js/jquery/ui/widget.min.js?ver=1.11.4
http://43b.60a.myftpupload.com/…/js/jquery/ui/position.min.js?ver=1.11.4
http://43b.60a.myftpupload.com/…udes/js/jquery/ui/menu.min.js?ver=1.11.4
http://43b.60a.myftpupload.com/…jquery/ui/autocomplete.min.js?ver=1.11.4
http://43b.60a.myftpupload.com/…-search/js/visualsearch.min.js?ver=4.4.2
http://43b.60a.myftpupload.com/…ultimate-search/js/main-pro.js?ver=4.4.2
http://43b.60a.myftpupload.com/…form-7/includes/css/styles.css?ver=4.3.1
http://43b.60a.myftpupload.com/…kie-law-info/css/cli-style.css?ver=1.5.3
http://43b.60a.myftpupload.com/…ultimate-search/css/square.css?ver=4.4.2
http://fonts.googleapis.com/…n+Sans%3A300%2C400%2C600%2C700&ver=4.4.2
http://fonts.googleapis.com/…%2C700italic%2C400%2C300%2C700&ver=4.4.2
http://fonts.googleapis.com/…%2C300%7COpen+Sans%3A400%2C300&ver=4.4.2
http://43b.60a.myftpupload.com/…assets/css/eventon_styles.css?ver=2.3.17
http://43b.60a.myftpupload.com/…/assets/fonts/font-awesome.css?ver=4.4.2
http://43b.60a.myftpupload.com/…ss-popular-posts/style/wpp.css?ver=3.3.3
http://43b.60a.myftpupload.com/…ekly-view/assets/wv_styles.css?ver=4.4.2
http://43b.60a.myftpupload.com/…assets/css/js_composer.min.css?ver=4.8.1
http://43b.60a.myftpupload.com/…ntent/themes/Newsmag/style.css?ver=2.3.5
http://43b.60a.myftpupload.com/…cific-rss-feed-menu/wp_cat_rss_style.css
But the code snippet at the ends of functions.php says on my theme dashboard that the registered script are:
gd_system_gritter | http://43b.60a.myftpupload.com/wp-content/mu-plugins/gd-system-plugin/js/jquery.gritter.min.js
common | /wp-admin/js/common.min.js
vc_accordion_script | http://43b.60a.myftpupload.com/wp-content/plugins/js_composer/assets/lib/vc_accordion/vc-accordion.js
admin-bar | /wp-includes/js/admin-bar.min.js
evo_wp_admin | http://43b.60a.myftpupload.com/wp-content/plugins/eventON/assets/js/admin/wp_admin.js
dashboard | /wp-admin/js/dashboard.min.js
customize-loader | /wp-includes/js/customize-loader.min.js
plugin-install | /wp-admin/js/plugin-install.min.js
media-upload | /wp-admin/js/media-upload.min.js
thickbox | /wp-includes/js/thickbox/thickbox.js
utils | /wp-includes/js/utils.min.js
svg-painter | /wp-admin/js/svg-painter.js
wp-auth-check | /wp-includes/js/wp-auth-check.min.js
shortcode_generator | http://43b.60a.myftpupload.com/wp-content/plugins/eventON/ajde/assets/shortcode_generator.js
backender_colorpicker | http://43b.60a.myftpupload.com/wp-content/plugins/eventON/ajde/colorpicker/colorpicker.js
ajde_wp_admin | http://43b.60a.myftpupload.com/wp-content/plugins/eventON/ajde/ajde-wp-admin.js
td_wp_admin | http://43b.60a.myftpupload.com/wp-content/themes/Newsmag/includes/wp_booster/wp-admin/js/td_wp_admin.js
td_wp_admin_color_picker | http://43b.60a.myftpupload.com/wp-content/themes/Newsmag/includes/wp_booster/wp-admin/js/td_wp_admin_color_picker.js
td_wp_admin_panel | http://43b.60a.myftpupload.com/wp-content/themes/Newsmag/includes/wp_booster/wp-admin/js/td_wp_admin_panel.js
td_edit_page | http://43b.60a.myftpupload.com/wp-content/themes/Newsmag/includes/wp_booster/wp-admin/js/td_edit_page.js
td_wp_admin_demos | http://43b.60a.myftpupload.com/wp-content/themes/Newsmag/includes/wp_booster/wp-admin/js/td_wp_admin_demos.js
td_page_options | http://43b.60a.myftpupload.com/wp-content/themes/Newsmag/includes/wp_booster/wp-admin/js/td_page_options.js
td_tooltip | http://43b.60a.myftpupload.com/wp-content/themes/Newsmag/includes/wp_booster/wp-admin/js/tooltip.js
akismet.js | http://43b.60a.myftpupload.com/wp-content/plugins/akismet/_inc/akismet.js
as3cf-notice | http://43b.60a.myftpupload.com/wp-content/plugins/amazon-s3-and-cloudfront/assets/js/notice.min.js
registered styles
gd_system_gritter | http://43b.60a.myftpupload.com/wp-content/mu-plugins/gd-system-plugin/css/jquery.gritter.min.css
admin-bar | /wp-includes/css/admin-bar.min.css
evo_font_icons | http://43b.60a.myftpupload.com/wp-content/plugins/eventON/assets/fonts/font-awesome.css
evo_wp_admin | http://43b.60a.myftpupload.com/wp-content/plugins/eventON/assets/css/admin/wp_admin.css
newwp | http://43b.60a.myftpupload.com/wp-content/plugins/eventON/assets/css/admin/wp3.8.css
thickbox | /wp-includes/js/thickbox/thickbox.css
colors | 1
ie | /wp-admin/css/ie.min.css
wp-auth-check | /wp-includes/css/wp-auth-check.min.css
gd_system_admin_css | http://43b.60a.myftpupload.com/wp-content/mu-plugins/gd-system-plugin/css/admin.min.css
ajde_wp_admin | http://43b.60a.myftpupload.com/wp-content/plugins/eventON/ajde/ajde-wp-admin.css
evo_sin_wpadmin | http://43b.60a.myftpupload.com/wp-content/plugins/eventon-single-event/assets/style-wp-admin.css
google-font-ubuntu | http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic&subset=latin,cyrillic-ext,greek-ext,greek,latin-ext,cyrillic
td-wp-admin-td-panel-2 | http://43b.60a.myftpupload.com/wp-content/themes/Newsmag/includes/wp_booster/wp-admin/css/wp-admin.css
wp-color-picker | /wp-admin/css/color-picker.min.css
akismet.css | http://43b.60a.myftpupload.com/wp-content/plugins/akismet/_inc/akismet.css
au_backend_settings | http://43b.60a.myftpupload.com/wp-content/plugins/eventon-action-user/assets/au_styles_settings.css
aws-global-styles | http://43b.60a.myftpupload.com/wp-content/plugins/amazon-web-services/assets/css/global.css
As you can see, no one of the registered CSS and JS listed by functions.php curresponds to those found by Google Speed Insights! So that I don’t have any ID of CSS and/or JS to use to move their loading in the footer by means of td-speed-booster.php hacking.
What is wrong with that or what could be done instead?
Thanks in advance,
Giuseppe
One trick you can do is to move all the css/js to footer and then use the critical css ghenerator to put all “above the fold” code inline in the head area — I do this on our main business site for example.
See my optimization post in the best of forums section for more info on the critical css generator.
There is also a WP plugin I use on some sites which moves all js to footer automatically out of the head using wp enqueue, might be alternative to the speed booster plugin.
Hi @gmaio
If you have reported resources which don’t appear when you use the register scripts/styles id function then you should change the priority, some plugins may load after it and that’s why it doesn’t return all js – http://screencast.com/t/7fhfjttAT8
http://codex.wordpress.org/Function_Reference/add_action
If you don’t have experience on wp condign or basic html/css/js/php knowledge please consider hiring a freelancer to configure this for you or because we recommended this just for advanced wp users. Sorry!
Thanks for the message!
