I’m really surprised that so far there is no discussion on this topic so far – I was not able to find anyone asking this question, but here we are.
How does one handle the incompatibility of having Anchors placed across your Content Page and on the same time adhering to performance related guidelines by not loading HTML Content below the fold?
In our Angular (SAP Composable Storefront) Application we have the issue that we have pageFolds defined to avoid loading all the html and Media request on the initial Page request. But on the same time the Content Editors (in our Case SAP SmartEdit) want to link certain areas of the page with anchors, which as expected does not work if the Anchor is part of HTML Below the Fold.
But since both things are quite common und relevant features, is there really no way to have both work in the same time?
Are there any best practices to handle anchor links for Content Pages with PageFoldings?
Not directly related to anchors, but you can defer loading of Angular 18+ standalone components with the @defer block. Here is how it works:
@defer (on viewport) {
<your-component />
}
This example delays loading and rendering of the component until it enters the viewport. on offers several options for the condition when the component should be loaded.
1