link"Preload" documentation

The add-on is designed to meet the requirements of the Google search engine in the matter of preloading the files of used fonts and images when loading store pages, due to which the site receives additional points in assessing the download speed according to Google PageSpeed Insights, which becomes very important with fine optimization of the site loading speed.

The add-on is included in the SpeedUP package for CS-Cart projects (supplied free of charge as part of the package).

What problems does the "AB: Preload" add-on solve?

• Provides technical implementation of preloading font files (direct requirement of the Google PageSpeed Insights audit service);
• Ensures that image files are prioritized when loading pages (improves FCP/LCP metrics, the importance of which has been repeatedly emphasized in Google's announcements of a change in search ranking algorithms in 2021);
• Provides automatic preloading for product lists, main image of a product, main image of a blog.

Add-on is compatible with the following Themes:

• YoupiTheme (compatible with correspond CS-Cart version);
• UniTheme2 (compatible with correspond CS-Cart version);
• Responsive.

General technical support conditions are available at this link (be sure to review these conditions, all solutions from the AlexBranding development team come with limited technical support).

In order to use our technical support, you need to:

1. Log in with your order owner account on https://cs-cart.alexbranding.com;
2. Go to the page My Account → Orders;
3. Find the corresponding order with the problem add-on in the orders list and pass to its details;
4. Find the “Support” link next to the corresponding add-on name (near you can find Documentation link also) and click on it;
5. Fill in the data with the problem, provide access to your CS-Cart installation (path to the administration panel, admin mail, admin password + FTP access) and create a ticket (after you will create the ticket, you will receive an e-mail and a special code to track the ticket in the future);
6. Wait for the specialist answer in accordance with the regulations of the technical support service and the priority of your ticket.

If you didn't receive an answer within the deadlines, according to the chosen ticket priority, send e-mail info@alexbranding.com with the ticket number, for which you did not receive an answer in time, and the team manager will solve the problem in compliance with regulations.

You can test the addon work with admin access using our demo server Demos for CS-Cart solutions from Alexbranding by choosing it in Addons list or just follow the link.

We recommend to note general restrictions:

1. All solutions from AlexBranding developers team require pre-installation of the AB: Addons Manager service addon. It is delivered free of charge and is responsible for such services: installation, upgrades, license verifications. Excluding this service addon usage is not possible;
2. Addon files may have a closed (encoded) part, in which only a license check is located;
3. The addon will work only on those domains, that are specified in the user's license. If you try to use the solution on CS-Cart installations, whose domains are not included in the license, the addon will be automatically turned off;
4. Local installation is not possible, so that the addon works on the additional domain (subdomain), enter this domain (subdomain) in the Domain field, when ordering (or write to info@alexbranding.com) - adding technical domains for the developing or for testing is always free.

After your order has been processed by our manager, it will be transferred to Completed state, you will receive an email to your mailbox with ordered add-ons license numbers (usually it takes from 15 minutes to 8 hours depending on the day time and week day).

Then follow the steps below, which differs depending on your version of the CS-Cart platform:

You can also install the add-on with a standard installation for CS-Cart. To do this, download the appropriate archive with an add-on version compatible with your version of the CS-Cart platform.
Go to the website cs-cart.alexbranding.com, log in under the account of the order holder and go to the page My Profile → Orders → Relevant Order, go to details and you will see a list of available archives for the ordered add-on. Download the version (archive) you need and make the installation (standard for CS-Cart installation: Add-ons → Downloaded add-ons and in the gearwheel menu select Manual installation).

For access to the add-on settings you should go to the page Administration panel → Add-ons → Manage add-ons and at the add-on name in the gearwheel menu select appropriate menu item.

To manage preload links go to the page Administration panel → Add-ons → Manage add-ons and at the add-on name AB: Preload in the gearwheel menu select Links preload.

Press button Add new link and fill the form in popup.

1. URL — link to the resource. Could be set both absolute link https://domain.com/fonts/font.woff and relative link /fonts/font.woff. In second case, current domain and protocol would be used.
2. Format — file format.
3. Use timestamp — for local fonts, that were added by styles, the timestamp is added to the link https://domain.com/fonts/font.woff?1580119222. In this case, link without ?1580119222 should be added in the URL field (https://domain.com/fonts/font.woff) and check this checkbox.
4. Status — allows temporary exclude link from preload, without deleting this link.

Open any storefront page and refresh it with opened Network tab in Developer tools.

Find links

Add links to files, which you want to preload.

Example of preload links

Preload result

As we can see, while other fonts (3) waiting the styles file (2) to be downloaded, preloaded fonts (1) are already downloaded and don't delay page rendering.

On the page AB: UniTheme2 → Theme settings → "Add-ons” tab add-on AB: Preload adds its own settings of image preload. Add-on disables Lazy Load for several first images and adds tags <link rel="preload"> for them. Use it to increase performance of PageSpeed Insights.

On the page Design → Layouts Preload add-on adds its settings in banners block with templates AB: Advanced banner (Carousel) and AB: Advanced banner:

• Preload the first banner ‒ when the setting is checked, main image of the first banner in the block will be preloaded automatically.
• Expert preload settings ‒ part of the first screen that an image takes. You can set the setting for each device individually.

On the page AB: YoupiTheme → Theme settings → "Add-ons” tab add-on AB: Preload adds its own settings of image preload. Add-on disables Lazy Load for several first images and adds tags <link rel="preload"> for them. Use it to increase performance of PageSpeed Insights.

On the page Design → Layouts Preload add-on adds its settings in banners block with templates AB: Advanced banner (Carousel) and AB: Advanced banner:

• Preload the first banner ‒ when the setting is checked, main image of the first banner in the block will be preloaded automatically.
• Expert preload settings ‒ part of the first screen that an image takes. You can set the setting for each device individually.

Add-on adds analyzer in admin toolbar that is located on the storefront. This analyzer helps to see percentage of images on the first screen.

To start work with analyzer follow steps specified below:

1. Authorize as administrator on the storefront.
2. Open admin toolbar on the storefront.
3. Click analyzer icon on the upper right corner.

After steps mentioned above there will be colorful indicator with digital values and tooltip for each image.

Colorful indicator specifies:

• Green color ‒ images that are already preloaded;
• Red color ‒ images that are not preloaded and it should be preloaded;
• Blue color ‒ images that are not preloaded.

Digital indicator specifies:

• White number that is located on the left means a value that is specified for this image on preload settings;
• Yellow number that is located on the right means a coverage that the image takes according to area size of all images in the first screen.

Hover mouse pointer in icon of percent on the top right corner of each image on the screen to see tooltip.
Tooltip specifies:

• State of image preload;
• Actual part from all images in the window;
• Actual state of the setting.

Watch a video with examples how to use analyzer: