Sorry, gang, for an awkward page. It's currently a quick dumping place for what we feel may be useful tips.
Last reviewed: October 27, 2023
Permissible Activities
To maintain security and stability of the UBCMS, we have established the following guidelines for customization and development.
Site authors (developers) can do the following.
Add unfiltered HTML, CSS or JavaScript to individual pages using our HTML Snippet, or to every page in a site by adding the HTML snippet to the site's header or footer.
Customize the look and feel of an entire site with a custom CSS stylesheet and custom JavaScript. That can be added in an HTML Snippet in your site's header or footer, or instead to the main.css and main.js within the /etc/designs area for your site within CRXDE.
Embed custom external content in individual pages by adding JavaScript or an <iframe> to an HTML Snippet. This works well for forms, videos and maps.
Integrate with custom back-end applications by embedding the front-end application framework into individual pages and calling the backend APIs through JavaScript in an HTML Snippet. (See a JamStack example - usual login required.)
Use an API to automate publishing external content into UBCMS pages (see a RestAPI example - usual login required). This is a way for an external script (e.g. PHP) to manage UBCMS pages instead of using Author tools. Typically this external script would run once to create pages that would then be edited in the normal way in Author going forward (such as a migration), or it would run continuously and be the only way certain pages are maintained (perhaps from an external database).
Access pieces of UBCMS content via REST API, such as to download your UBCMS header and footer to an external server to extend your UBCMS look and feel to other sites. (Watch the Developer Master Class.)
Use the UBCMS Training Server as a sandbox separate from your real site. This is a fully functional AEM environment equivalent to the main Author server, but content developed there cannot be transfered back to the Author server. (Request a sandbox on the Training Server.)
On your own university server or a third party server.
Please keep in mind:
Any customizations must be supported by your team.
We run code deployments on a weekly schedule and suggest you test regularly to address any code in your site that is affected.
Akamai content delivery network
The Akamai content delivery network (CDN) delivers our Web pages through high-speed 'edge' servers physically located around the globe, instead of through the 'origin' servers directly (our UBCMS servers). The CDN helps accelerate, filter, and secure web traffic.
This trick is good for debugging page problems in live sites and Author.
Simply add "?nocustom=1" to the end of the URL in the browser location bar to turn off any custom code that is not normally part of the UBCMS which may be interfering with page behavior.
Shared Content Reference components directly including CSS or JS files
“customize” nodes
This trick is good for debugging and fixing page problems in the Author environment.
It reduces the page to a skeleton view, so it is easy to find all the components including any that are hidden.
Components can be modified normally, or temporarily turned off, before the page is then re-displayed.
Switch to Preview Mode then add "?rescuemode=1" to the end of the URL in the browser location bar. e.g. https://ubcms-author.buffalo.edu/content/your-domain/your-site.html?rescuemode=1
This does not disable all CSS but renders most components in a data-only way which can block the effects of misbehaving components that might mess up the whole page. It can also reveal empty or invisible components that cannot otherwise be edited or deleted.
This trick allows you to preview a page in Author as if it were published live.
Temporarily disable most of the author environment on a page, including the Edit Console toolbar.
Switch to Preview Mode then add "?wcmmode=disabled" to your page’s URL in the browser location bar.; e.g. https://ubcms-author.buffalo.edu/content/www/cmshelp.html?wcmmode=disabled
The link to CRXDE is off the Start page. Look on the left for the Tools hammer icon. Click that to reveal 'General'. Click that to reveal the link to CRXDE (developers only).
The link to the Tag Admin Console is off the Start page. Look on the left for the Tools hammer icon. Click that to reveal 'General'. Click that to reveal the link to Tags (admins only).
location of User and Group Manager admin tools off the Start page
The links to the User Admin and Group Manager Tools are off the Start page. Look on the left for the Tools hammer icon. Click that to reveal Security. Click that to reveal the link to both user tools (admins only).
Emulator / Mobile Device Simulator
Display your page as it would appear in mobile phones and other size devices.
Use this tool to publish (activate) multiple pages in a preset path of the UBCMS. You can limit the process to only modified or only activated pages, and can ignore deactivated pages.
Use this trick to compare two different pages side by side in one window. It's similar to the Diff tool, but for any pages you specify, and without markup.
first page load is more important than it used to be; e.g. clicking a search result, ad, email campaign link
browser cache is no help here
How We Measure...
Core Web Vitals (LCP, FID, CLS) - https://web.dev/vitals
green (90-100) is unrealistic for mobile but commonf or desktop
yellow (50-89) most pages will be in this range on mobile
red (0-49) our pages shouldn't scor ethis low without a large external script or iframe but Google expects the average to be 50 so half of pages in general will be in this range including our many of our peers
“Lab” Measurements - force a measurement
Google PageSpeed Insights - https://pagespeed.web.dev
Lighthouse - in Chrome DevTools and elsewhere - https://developers.google.com/web/tools/lighthouse
Web Vitals Chrome extension - https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma
“Field” Measurements - log what real users actually experience
Chrome User Experience Report - https://developers.google.com/web/tools/chrome-user-experience-report
Google Search Console Core Web Vitals Report - https://support.google.com/webmasters/answer/9205520
What Matters...
Mobile devices
mobile processor speeds are slow
mobile network conditions are slow and unreliable
Fonts
Javascript, especially at the top of the page
Third-party embeds (scripts, iframes)
Duplicate or unnecessary analytics tags
What Doesn't Matter (as much)...
desktops/laptops typically fast and well-connected
images (somewhat, but we optimize for you)
off the screen / below the fold - does not contribute to LCP
video - does not contribute to LCP
background images - does not contribute to LCP
What You Can Do...
consider the impact of everything you put on each page (cost/benefit)
think even harder about what you put on every page (header, footer)
watch for scripts, iframes, tags in GTM
move slow things lower down the page / below the fold
turn heavier analytics off when not needed (e.g. heat tracking)