CSS Async Loader plugin for Joomla!

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:

• Open in a new tab
• Open in Page Speed Insights

Page duplicate with the plugin disabled:

• Open in a new tab
• Open in Page Speed Insights

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.