A large number of external style sheets and big CSS files can slow down your page load time. The site speed not only is important to user experience, but also determines web search rankings. As noted by Google, slow page load speed can affect SEO. This plugin allows you to load style sheets asynchronously, so that browsers do not block the rendering of a web page untill style sheets are loaded. To load CSS asynchronously you need to specify the style sheet URLs in the plugin settings. Allthough the styles are loaded with JavaScript, they are also available for the users that have JavaScript disabled.

Installation and usage

  1. Purchase and install the plugin via Joomla Extension Manager.
  2. Open the plugin settings page.
  3. Select the mode of operation.
  4. Enter the URLs of style sheets that you want to load asynchronously or to exclude from asynchronous loading.

How it works

You can see below links to 2 identical duplicates of this website main page: the plugin is enabled on the first page and disabled on the second page. You may go to these pages or open them in Google Page Speed Insights audit service to see the speed test results. Look at the information in the section of the script and style sheet optimization. For the page duplicate with the plugin enabled you will see that CSS files are not blocking the page rendering. The second example shows that the page rendering is blocked by external CSS.

Page duplicate with the plugin enabled:

Page duplicate with the plugin disabled:

Plugin settings and recommendations for using

The style sheets that represent the “skeleton” of your website (e.g. the position of basic elements, margins, the styling of general sections) should be loaded immediately to avoid the FOUC effect (flash of unstyled content). This effect occurs because the page is rendered faster then the style sheets are applied to the document when they are loaded asynchronously. For this reason, you should separate fundamental styles from the other ones and put them into a separate CSS file that should be loaded in the ordinary way (or even better, you may inline the critical portions of those resources directly in the HTML). The loading of the other style sheets should be postponed and performed asynchronously to increase page load speed.
Style sheets URLs

The form for entering style sheet URLs that must be separated by one or a few new lines. You can enter a full URL (the same as a URL in your HTML) for exact match, or you can enter a part of URL for matching a pattern. The quotation marks must be omitted. Example:

  • http://example.com/css/general.css — in the case of an absolute link
  • css/general.css — in the case of a relative link

For matching a pattern, enter a substring. For example, if you enter a substring style.css, this will match a file style.css and a file mystyle.css. If you enter a directory name, e.g. /css/, this will match all the style sheets in this directory.

You can also enter an outer URL, e.g. a substring http://fonts.googleapis.com will match all Google web fonts, while a substring fonts.googleapis.com/css?family=Open+Sans will match only a specific family (Open Sans in this case).

Include/Exclude CSS
If include is selected, only the specified style sheets will be loaded asynchronously. If exclude is set, all the style sheets except for the specified ones will be involved.
Global exclusions

With this option you can exclude specific components, component views, layouts or articles from asynchronous CSS loading. If the entered values match global Joomla! variables, all external stylesheets will be loaded in an ordinary way. The parameters must be separated by an ampersand character (&), the parameter names and values are separated by an equal sign (=). The parameter groups are separated by commas. It is possible to use masks, such as (x|y|z). Examples:

Modal window exclusion: tmpl=component
Front-end editor exclusion: view=form
Exclusion of menu items: Itemid=(13|25|77)
Entire exclusion of a component: option=com_users

Exclusion of component views and layouts: option=com_content&view=category, option=com_content&view=category&layout=blog
Exclusion of articles: option=com_content&view=article&id=(10|101|3)

Debug
Use this setting to check PHP script execution time. You can display the result in the browser console, or at the top of a page if JavaScript is disabled. Do not forget to close your website in the latter case, while debugging.