Enfold Showcase

Been a bit quiet on the social posts lately! Lots of work for existing customers but we have a couple of new launches this month:

Holding page designed for a company selling CBD oils and topical creams (all legal in the UK as a food supplement if you were wondering). The company is based in the UK and provides some of the highest quality Pure CBD oil on the market.

The holding page was set up specifically as a funnel for the companies main website (which I have not been able to persuade over to Enfold yet!). The layout has menus turned off.

https://www.hemppureoils.co.uk

Page speed is important for a landing page. The Hemp Pure Oils site scores 98/100 on mobiles on a good test run. However this varies depending on how well the server responds etc. LCP sits at 2.3 seconds on a good run but rises to 3.6 seconds on a bad run.

Some critical CSS is loaded in WP Head to improve the FCP and aid the LCP but more is required for a bigger impact.

The site uses free optimisation tools and does not use a CDN at this point in time showing just how good Enfold is as a platform for websites compared to others like DIVI and Elementor which all require more work to get a 90+ score in page speed insights.

I hope this proves useful for anyone else looking to build a fast and easy to edit landing page.

@kommo
Thanks. Quite a bit went in to this one from an optimisation perspective for looks and speed.

The above the fold section is an ALB color section with background image. I have set a minimum height depending on the image requirements for each screen size (Either 350px or 600px). I then applied a custom class and custom ID to each to set the height depending on the screen size. This removes issued with CLS in Google Web Vitals because the sizes are explicitly stated early.
If you view source in Google Chrome you can see the code added as critical CSS into the header. I used wp_head to add code directly into the header from functions.php.

Most of the mods come from a performance perspective:
The logo and srcset images are pre-loaded so the logo is available as early as possible.
Self hosting fonts and Adding font preload manually from functions.php just like the other critical CSS. This prevents Font Swap (Flicker) from occuring as the fonts are available right away.

To improve LCP and FCP scores you can either pre-load the background color section image in the same way as the fonts so it is available right away or add critical css in the way that I have – serving a different image size per screen size.

I use critical CSS on Burden Basket because of the minimum height applied to the ALB colour section.

To ensure the images look right on all screen sizes I have used media queries to load a different banner image per screen size on every page.

I have enfold setup to have mobile break points at 989px instead of 767px. I do this in the Enfold control panel and every column element on every page .

As the page scales down (if you resize the browser window) I have used media queries to change the menu font size and padding so that it works on screens all the way down to 989px. You can adjust the mobile breakpoint if required to lets say 1024px (for ipads) with some custom CSS. If you search the forum you’ll find this one.

Although most sites read Left to Right from a mobile design perspective – Put the first image on the left – This will mean users see picture content first in the same way people are familliar with on social media. Its good UX design to do it this way but looks a little unusual on desktops. You could always set two images and hide the first one on desktops if you prefer them the other way around on different platforms.

I hope this helps.

Webseite for the Austrian Heavy Metal Band Darkfall, http://www.darkfall.at

Another project to share with you.

https://www.mavericksecurityltd.co.uk/

Maverick Security Ltd
Maverick Security is a new startup Manned guarding (security guard) provider based in Derbyshire UK. They specialise in providing reliable security guards for business premises and events throughout the UK.
We were tasked with creating a simple recognisable logo that can be embroided and printed on clothing easily. The colour scheme was then transfered into Enfold for consistency.

The site has some bespoke performance settings including font preload and serving a different background image depending on the screen size. The site currently scores between 95/100 and 97/100 depending on the test run.

Performance stack:
Bespoke functions.php settings
WP-Optimize – Caching and HTML minification
EWWW WebP Conversion
Short Pixel thumbnail regenerator
Enfold Performance settings on

Logo and Website designed by Think Jarvis Design and Marketing based in Swadlincote UK.

I have updated this post to include newer performance figures – The cause and fix of the LCP score being high are here:

https://kriesi.at/support/topic/lcp-issue-and-font-file-sizes/

EDIT:
We had some issues getting Google to crawl the whole site (unrelated to rest of post). I have added links below to try and encourage Google to Index the entire site. I hope support do not mind! :) I will remove if it is successful.

Maverick Security – Manned Guarding Services
Gatehouse Duty – Security Guards
Festival Stewards and Event Security Staff
Door Supervisors for Pubs and Nightclubs

• This reply was modified 3 years ago by thinkjarvis. Reason: Would really help the client temporarily

@Mischa
Some really nice speed scores from these mate!
Will have a look through them all properly I like some the features you have used on frischepartner.