Website Build Practices
For Developers
⚠️INSTRUCTIONS BEFORE USING
Now comes the technical tasks of the website development process that make a website stable,
visually appealing, and user-friendly. Once the project is complete make sure to run through this
checklist before hand-off back to the team.
NB: Before starting the build process, review the original
design brief to familiarize yourself with the content and
functionality requirements set in the initial onboarding
meeting. Ideally, watch the meeting recording for full
context. Please also keep the silo page content at the back of
your head → SEE where we need reviews, galleries, and
CTA’S.
👉🏻 PLEASE: PRESERVE SEO ON ANY REBUILD
👉🏻 NB: Biggest Change → META TAGS & DESCRIPTIONS are available in the
client brief & the silo sheet. Please add this during the build (developers).
1. Images
Although we do compress once uploaded, the best practice is to use the right size on
upload:
● Should be no larger than 300kb when being uploaded (use Photoshop Save for
Web or a similar tool) and no more than 72dpi
● Keep image quality good by using the required size for the element being used.
(e.g. if it is only ever going to be served at 500px by 500px - the max size to
upload is 1000px (for retina displays)
● Image types should be PNG or JPG (webp conversion). No SVG.
● Convert to webp for enabled browsers
● LCP must be pre-loaded
● LCP must NOT be lazy-loaded
● All other images can be lazy-loaded
● Make sure image names are not generic and rather use keywords where
possible (no stuffing, but relevant - e.g. instead of the generic banner image - use
brand name and broad location?)
○ E.g.
https://roofingtechnologiesunlimitedtx.com/wp-content/uploads/2023
/12/banner-image.png
○
2. Fonts
● Custom fonts to be uploaded locally rather than connecting to CDNs and adding
3rd party
● Pre-load / pre-connect / pre-fetch
● If not using emojis disable any scripts
○ CSS font-display property must be set to swap (to avoid delay in
rendering, which might cause FOUT but will give better load times)
3. Recaptcha
● Must be deferred and not blocking
● Check with Pagespeed Insights Treemap
4. Structure
● If redesigning the site - preserve SEO and the URL structure to avoid a 404
● No More ANIMATION
● H1 etc titles must be sequentially ordered
● 3rd party scripts and embeds must be used intentionally and sparingly
● Videos, animations, features, etc - make sure to use lightweight components, not
loading unnecessary CSS stylesheets or scripts.
● Use async / defer on script loading wherever possible and ensure the order of
priority on scripts avoids render-blocking JS / CSS preventing the LCP from
loading first.
● One tag for Google Tag Manager, all other Google products/ pixels must be
added as tags in Google Tag Manager
● Do not install any third-party code insert plugins. If you need to add custom code
do so in the theme configuration settings (available Elementor & Divi)
● Don’t need any analytics stats on the website backend dashboard - AA is the
place for this.
● Make sure Google reviews are linked to GMB account either when you click on
review badge or on review
5. Preferred Plugins
● Caching - WP Rocket or W3 Total Cache
● Image compression - Shortpixel or SMUSH
*NB this does not negate the need to adhere to other image best practices
● Security - Wordfence or Shield Security
● Google Reviews - Reviews and Rating – Google Reviews – WordPress
plugin | WordPress.org English (UK)
● Ajax Search - Advanced Woo Search
● Forms - Forminator or Gravity Forms
● SEO - RankMath
● Slider - Slick slider (avoid sliders if possible)
● Gallery - Robo Gallery (avoid gallery plugins if possible - use the built-in
options of Divi or Elementor)
● Recaptcha - built into formulator/gravity
6. Pre Launch Cleanup
● Themes - Remove 2021, 2022, and 2023 default themes
● Plugins - deactivate and uninstall page/post duplication plugins (Yoast
duplicate post and Duplicator)
● Only install theme essential plugins required for design and styling. Do not
install all the recommended plugins unless they are listed above.
ADDITIONAL NOTES
