For Stacks users using Rapidweaver or Stacks App

How to build a 100% PageSpeed page the easy way.

Part 1 - Images

Get your images sorted out to be as small as possible, first. Checkout our posts on Image Optimisation.

Part 2 - Everything else

  • Use the most lightweight framework you can find. For Stacks users, this means the lightening fast micro SOURCE framework - This is the single most important thing here to getting a 100% result. If you are reading this and think there is a better alternative, then by all means proceed with that alternative framework.
  • Do not load more than 2 large local fonts, and make sure to load your fonts as woff2 files. 10Kb-25Kb each is just about OK.
  • You should also subset your fonts and download as woff2 format. E.g. the OpenSans 400 font can be subsetted and converted to a woff2 file with a size of only 11k. (Subsetting removes all of the characters such as other languages, that you probably don't use).
  • Don’t use FontAwesome or any other icons. Instead, use stacks that use SVG symbols and if you need to, align with Flexbox. Many stacks load FontAwesome icons just to use 1 or 2 icons. The best stacks draw the icons or use super light SVGs. POSTER2 cleverly loads a tiny subsetted set of FA symbols instead of all the other 8000 icons that it doesn't use.
  • Do NOT use any NON SOURCE stacks unless the developer makes a big thing about efficiency and size. Generally, stacks such as Splider, Faq, Animate, from ShakingTheHabitual & any BWD stacks fall into this category (there are others too). If in doubt, ask the developer. Almost everthing you need is availabe in Source and will already be loaded to your site on the first Home page load.
  • If NOT using SOURCE, then don't add any other stacks unless you absolutely have to. You are already loading up a complete web building set of stacks with all of the associated code. That has already added up to what PageSpeed will be flagging up. Only use a full framework if you pan to use the majority of the stacks without any additional non framework stacks.
  • Don’t load anything else you don’t need, e.g. - don’t add the Source Smooth Scroll, which even though is already tiny, don’t add it unless want to use it. Only add what you need in Source. Other older frameworks add everything in the expectation that you may use some of it.
  • IMPORTANT - Size your images in a graphic app or a resizing app in Google’s free SQUOOSH APP to the maximum size that the images will be displayed.
  • Resize your images, and optimise your images (in one operation) with the free SQUOOSH APP. Don't resize an image, save it and then optimse it in another app and then save it again because each save process will reduce the image quality.
  • Use an App that resizes and optimises in 1 process to avoid an additional SAVE which will degrade your image. Do this individually for each image for best results as a signifiicant extra amount can be saved by adjusting the optimisation in SQUOOSH for each image.
  • Important define the size of your images using the Source Image stack - Custom Attributes box and enter width="xxx" height="yyy" where xxx and yyy are adjusted for your images.
  • Add a loading ="lazy" onto the above Attribute, to lazy load the image for any images that do not appear in the first fold, i.e. on the first content viewed on a page before you scroll down.
  • Select swap for loading fonts. E.g. In the Source Custom Fonts setting Font Display, change the default auto setting to swap.
  • Make sure you have Compression enabled on your server using your server cPanel.
  • Generally build with the lightest stacks you can. E.g. in SOURCE consider using the super light Coder stack wherever you can which can be used to replace almost every other Source stack. Note than an entire site can be built using just Coder stacks, so consider using it where it makes sense.

Still can't get 100% PageSpeed or a sub half second load time?

If you have followed everything above, then you probably have too many images - which PageSpeed will flag up. You have to obey the laws of physics and sometimes too much will alway mean your page is slower that you would like.

If you are way off a sub 0.5s load, then you have an image problem and should probably rethink your page and maybe consider doing things differently such as using plain colours instead of images, as used in the Blog 7 demo and Blog 8 demo. Blogs in particular, can grow a bit too big, but that is Ok because there has to be a lot of content in a blog, so continue to make the page load as fast as you can - See Image Optimisation.

There is plenty more to do, but all of the above will make your web pages faster and you will become a better web builder. The process of applying the ideas above, retesting PageSpeed and then seeing the improvements will illustrate how much each point will contribute to a faster loading site.

All of this stuff will become second nature on your next build.