Introduction

Aimy Speed Optimization is a Joomla! plugin that optimizes your content for page speed in a couple of ways:

It allows you to minify & embed CSS in your pages and queues JavaScript asynchronously so both do no longer block your pages’ rendering. Theses JavaScript and CSS resources can be automatically preloaded as well. Additionally the HTML code can be minified.

The way images are loaded can be optimized: You can choose to either just add missing image dimensions or load images deferred or lazy.

Besides that, browser caching and compression can be activated and configured automatically (using Apache’s .htaccess file).

These features help to speed up your Joomla! website with a faster rendering in your visitor’s browsers.

With Google™ Page Speed Insights you can check your website’s speed from various perspectives. We believe this is not a coincident, but a chance to tune your website for your visitors and gain some SEO benefits as well.

Requirements

Aimy Speed Optimization requires:

1. Joomla! 3.2 or above
2. PHP 5.4.0 or above
3. DOM PHP extension (usually enabled)
4. Mbstring PHP extension (usually enabled)
5. a Joomla! template that uses HTML 5

Installation

The installation of the extension follows the common Joomla! procedures.

In case you are not familiar with these procedures, proceed as follows:

1. Download the extension’s ZIP archive
2. Log into your Joomla! backend as “Super User”
3. From the menu, choose “Extensions” → “Manage” → “Install“
4. Click on the “Or browse for file” button and select the ZIP archive

The extension’s archive will be uploaded and installed afterwards.

For further information, please have a look at the Joomla! documentation Installing an Extension.

NOTE: All plugins are disabled by Joomla! when installed for the first time. To enable Aimy Speed Optimization, proceed and configure the plugin.

Configuration

After a fresh installation, click on the “Configure plugin now” button on the installation report page.

At any time, you can configure the plugin using Joomla!’s Plugin Manager by choosing “Extensions” → “Plugin Manager” from the menu. Locate the plugin and click on its name in the “Plugin Name” column of the plugin listing.

Enabling the Plugin

In order to use the plugin’s functionality, you have to enable it first.

To do so, change the plugin’s status from “Disabled” to “Enabled” and apply your changes by clicking on either the “Save” or “Save & Close” button in the toolbar.

The default configuration of Aimy Speed Optimization leaves any decision how to optimize page speed on your Joomla! website up to you, that is, the default configuration does not enable any of the available optimizations.

Options: Plugin

Aimy Speed Optimization’s functionality can be suited to your needs using the following configuration options, which are grouped in the tabs “Plugin”, “Images” and “Expert Settings”:

Eliminate Render-Blocking?

This option allows to optimize both CSS and JavaScript elements so that they will no longer block the rendering of your page.

CSS is minified and directly embedded into the HTML code. JavaScript files and all inline code is loaded and executed asynchronously in a queue, that is one after another, keeping their sequence intact.

NOTE: Dynamically generated and offsite CSS is handled in a way similar to JavaScript: it is queued and loaded after the initial rendering of your website has finished. This approach usually works as expected for non-ciritical CSS like fonts and prevents your website from blocking. However, if the CSS is essential for rendering your website (for example Bootstrap from a CDN) there is no way to prevent blocking. In this case, the solution would be to store the CSS code on your webspace so it can be embedded.

Use Automatic Preloading?

If enabled, specific preload link elements will be added to a page. These elements allow a visitor’s browser to preload all queued CSS and JavaScript elements in the background so that these elements may be already loaded when they are required.

Minify HTML?

If enabled, your HTML code will be minified before being delivered to your visitor’s browser.

Enabling this setting is recommended only if the “Expert Settings” option of “Enable Compression” cannot be used.

Skip Optimization on some Pages?

If you like to exclude single pages of your website from the optimization, you can list them here. This may be useful if an extension used on a specific page of your website is not compatible with Aimy Speed Optimization.

Patterns are supposed to be entered one on each line – currently only the wildcard character (“*“) is supported as a non-literal character.

Patterns are matched against the combination of path and query string of the current URL.

Example: given the URL “https://test.org/gallery.html?page=12“, patterns are matched against “/gallery.html?page=12“.

If one of the entered pattern matches, no on-page optimization (as defined in the “Plugin” and “Images” tabs) will be done on that page. To exclude the page given in the above example, you could for example enter the following pattern: “/gallery.html*“.

Options: Images

Aimy Speed Optimization gives you a couple of options to optimize image loading on your website (<img> elements and <source> elements in <picture> containers). Both popular techniques of deferred loading and lazy loading are supported. You can either choose to manually select which images should be optimized or automatically select all uploaded images.

Furthermore (small) images can be embedded in the HTML-code directly.

Action

Which action should be applied to your images?

None

Keep images as they are.

Add Dimensions

Automatically add missing image dimensions (“width” and “height” attributes).

This option handles onsite images only.

Deferred Loading

Replace all selected images with a transparent placeholder. To speed up rendering, missing image dimensions of the original image are added.

Once the page has been initially loaded by the browser, all image placeholders will be replaced with the original images.

Note: This options works for onsite and offsite images. But if the image is loaded from an external website, dimensions cannot be set automatically. In this case, we recommend to add width and height manually.