CSS/JS files loading optional will speed up your wordpress, improve wordpress performance, and will have a  better user experience. Usually, it seems everyone is using two or more plugins in wordpress, on the other hand, many plugins/themes may have more than one CSS/JS files which will be called in every page. So we should combine some of them which have similar use or can be combined.

Note: Not all the CSS styles or JS files can be loaded optionally. You should make sure from their functions or features.

For more CSS or Javascript files, they may be used in different type of page, then you can make these CSS/JS files loading optional. for example. I am using a code highlighter plugin, this plugin will load several JS files in everypage of wordpress under default settings. So I make it optional in only single page, just do this.

<?php if(is_single()){ ?>
<link href="addtion.css" type="text/css" rel="stylesheet" />
<script class="javascript" src="js/addtion.js"></script>
<?php } ?>

You can do like this for any other CSS/JS files. these ways can be used for all known pages in wordpress, such as:

<?php if (is_home()) { ?>
<link href="optional_A.css" type="text/css" rel="stylesheet" />
<script src="optional_1.js" type="text/javascript"></script>
<?php } ?>
<?php if (is_single()) { ?>
<link href="optional_B.css" type="text/css" rel="stylesheet" />
<script src="optional_1.js" type="text/javascript"></script>
<?php } ?>
<?php if (is_category()) { ?>
<link href="optional_C.css" type="text/css" rel="stylesheet" />
<script src="optional_1.js" type="text/javascript"></script>
<?php } ?>
<?php if (is_search()) { ?>
<link href="optional_A.css" type="text/css" rel="stylesheet" />
<script src="optional_1.js" type="text/javascript"></script>
<?php } ?>
<?php if (is_paged()) { ?>
<link href="optional_D.css" type="text/css" rel="stylesheet" />
<script src="optional_1.js" type="text/javascript"></script>
<?php } ?>

But where should I add these codes? it's easy, at first you should make sure where are the CSS/JS files come from, plugin? or themes? or added by you manually?

  • If it is a plugin, you may need to modify the plugin source code.
  • If it is a theme, just download the theme's package, modify it's loading action and make it optional.
  • If the CSS styles or js files are all added manually. you can modify your adding source code, and make sure they will be loaded optionally.

If you have any problems, please feel free to leave a comment to me.