โ Relevant image. Optimised and responsive.
โ Large title, usually the main keyword
โ Breadcrumb - make sure to use Breadcrumb Schema
โ Table of Contents - Longer posts this should be collapsed with a "show table of contents" button
Core Section - We have an introduction section which includes
โ H2 with a variation on the H1
โ Large lead paragraph
โ Bold paragraph that solves the question the page is trying to answer
โ Continuation paragraph to lead into the rest of the sites content
Then we go into the optional sections. These can be used in any order, any number of times throughout the page.
Option 1 - is a basic Image and Content block. This has
โ H2 that is relevant to the content in this section
โ Well spaced content section with short paragraphs
โ Internal linking to other pages on the site if possible
โ Optimised WebP / Avif Image on the right
Option 2 - This is the same as the previous section except we have the image and the content flipped
Option 3 - A Double Image section
This is something I tend to use between block paragraphs of content|
โ Make sure all images are responsive, optimised WebP or Avif images
Option 4 - List section which comes with
โ H2 that is relevant to the content in this section
โ Introduction sentence
โ List items - If possible I format by length. I've seen this a lot on Twitter. Potentially some science to it but IDK ๐คฃ
โ Outro paragraph
Option 5 - A basic content section which has
โ H2 that is relevant to the content in this section
โ Well spaced content section with short paragraphs
โ Internal linking to other pages on the site if possible
Try to not have 2 of these blocks together to avoid a wall of words
Core Section - FAQ Section which contains
โ H2 that is the H1 text + FAQ
โ Intro paragraph
โ Multiple questions answered in short form
โ FAQ Schema - I've already got featured snippets using this
โ Internal linking to other pages on the site if possible
Core Section - Summary section which contains
โ H2 to start the summary
โ A few short paragraphs to round off the page
โ Internal linking to other pages on the site if possible
Using this sectioned layout you should be able to create long, easy to consume pages for your users that keep them on your site.
The core sections all stay, the optional sections you can choose any number of depending on what section fits the content you're trying to write.
Also on a general page level, don't forget Schema markup!
Depending on what you're writing about there is likely markup that can help
Here is some more proof. Below you can see the before and after screenshots of my tests and times in the Chrome Network tab.
Caveat: the Finish time never stops on CSS due to external scripts constantly running. The screenshot was when it stabilised though.
Post 3! The game is up! I didnโt really do this. :D
Iโm going to show you how in DevTools you can measure the potential gains that can be had by removing bloated scripts. This method is great to get buy-in from other teams before going ahead deleting anything from the code.
Reduce response times from the server - CDN's can help here
Reduce render blocking JS and CSS - try to only load the minimum on a per page basis. Minify, inline and defer are your friend. Check usage using code coverage tool in Dev Tools
โ Optimising Largest Contentful Paint - cont.
Imagery - Make sure they are well optimised and compressed. Also keep an eye on those sizes. Look into image CDN's and lazyloading
Preloading - You can use preload the most important elements on your page