Preflight opportunities
AEM Sites Optimizer Preflight analyzes your page’s technical and performance data and anticipates and detects opportunities before it is published. It uses generative AI to suggest optimizations.
Opportunities
Learn about the canonical opportunity and how to use it to improve SEO and prevent duplicate content issues.
Learn about the broken internal links opportunity and how to use it to identify and fix broken or problematic links on your website.
Learn about the metatags opportunity and how to use it to optimize your page's metadata for better SEO performance.
Learn about the H1 count opportunity and how to use it to ensure proper heading structure and SEO optimization.
Learn about the accessibility opportunity and how to use it to ensure your website is accessible to all users.
How to set up
Universal Editor Setup
- Go to the Extension Manager from the URL: https://experience.adobe.com/#/@org/aem/extension-manager/universal-editor
- Select the AEM Sites Optimizer Preflight Extension and request to Enable
- The AEM Team will enable the extension for your organization
- Once that is done, open a page in Universal Editor, such as: https://author-p12345-e123456.adobeaemcloud.com/ui#/@org/aem/universal-editor/canvas/author-p12345-e123456.adobeaemcloud.com/content/site/subscription.html
- The Preflight extension will be visible in the side rail
- Clicking on the Preflight Extension from the side rail will start the Preflight Audit for the current page
Document-Based Preview Setup
Step 1: Enable Sidekick with Preflight Button
Add the following configuration to /tools/sidekick/config.json in your GitHub repository:
{
"plugins": [
{
"id": "preflight",
"titleI18n": {
"en": "Preflight"
},
"environments": ["preview"],
"event": "preflight"
}
]
}
Step 2: Create the Sidekick Integration Script
Create /tools/sidekick/aem-sites-optimizer-preflight.js with the following content:
(function () {
let isAEMSitesOptimizerPreflightAppLoaded = false;
function loadAEMSitesOptimizerPreflightApp() {
const script = document.createElement('script');
script.src = 'https://experience.adobe.com/solutions/OneAdobe-aem-sites-optimizer-preflight-mfe/static-assets/resources/sidekick/client.js?source=plugin';
script.onload = function () {
isAEMSitesOptimizerPreflightAppLoaded = true;
};
script.onerror = function () {
console.error('Error loading AEMSitesOptimizerPreflightApp.');
};
document.head.appendChild(script);
}
function handlePluginButtonClick() {
if (!isAEMSitesOptimizerPreflightAppLoaded) {
loadAEMSitesOptimizerPreflightApp();
}
}
// Sidekick V1 extension support
const sidekick = document.querySelector('helix-sidekick');
if (sidekick) {
sidekick.addEventListener('custom:preflight', handlePluginButtonClick);
} else {
document.addEventListener('sidekick-ready', () => {
document.querySelector('helix-sidekick')
.addEventListener('custom:preflight', handlePluginButtonClick);
}, { once: true });
}
// Sidekick V2 extension support
const sidekickV2 = document.querySelector('aem-sidekick');
if (sidekickV2) {
sidekickV2.addEventListener('custom:preflight', handlePluginButtonClick);
} else {
document.addEventListener('sidekick-ready', () => {
document.querySelector('aem-sidekick')
.addEventListener('custom:preflight', handlePluginButtonClick);
}, { once: true });
}
}());
Step 3: Update Scripts File
Add the following import statement to the loadLazy() function in /scripts/scripts.js for preview URLs, as shown below:
if (window.location.href.includes('.aem.page')) {
import('../tools/sidekick/aem-sites-optimizer-preflight.js');
}
Now the Preflight button should be visible in Sidekick.
Step 4: Running the Audit
Open the preview URL (*.aem.page) of the audited page. Click on the Preflight button from Sidekick.
AEM Cloud Service Setup
You can use the bookmarklet option to test Preflight on AEM Cloud Service Page Editors and Sandbox Environments.
Press Ctrl+Shift+B (Windows) or Cmd+Shift+B (Mac) to show your Bookmarks Bar. Right-click the bookmarks bar and select “New Page” or “Add Bookmark”. In the adress field copy the code below.
Copy this code and create a new bookmark:
javascript:(function(){const script=document.createElement('script');script.src='https://experience.adobe.com/solutions/OneAdobe-aem-sites-optimizer-preflight-mfe/static-assets/resources/sidekick/client.js?source=bookmarklet&target-source=aem-cloud-service';document.head.appendChild(script);})();
Once the Bookmarklet is added, open the preview URL (*.aem.page) of the audited page. Click on the Preflight bookmark to start the Preflight Audit.
Best Practices
When using Preflight please be aware of the following:
- Run Preflight audits on all staging/preview pages before publishing.
- Address high-impact issues first (broken links, missing H1 tags, insecure links).
- Enable authentication for protected staging environments.
- Review and implement meta tag suggestions for better SEO performance.