In today's post, we're going to break down the brand new optimizations we've added to OptimizePress that can help you speed up your site, and improve your Google Core Web Vitals scores - all without needing more plugins.

Let's dive into the update...

Faster pages = happier site visitors.

Happier site visitors = more conversions.

More conversions = More revenue for your business bottom line.

The pages you build already perform well when compared to competitors' when it comes to page speed testing...but we're always striving to be even better...

In today's post, we're going to break down the brand new optimizations we've added to OptimizePress that can help you speed up your site, and improve your Google Core Web Vitals scores - all without needing more plugins.

Let's dive into the update...

When Google announced Core Web Vitals months ago, we started work on making OptimizePress produce pages that Google would love to crawl. 

Google has announced that it is now using PageSpeed Insights scores as a ranking factor in future Google search results starting June 2021.

In simple terms, this means page speed will be an even more significant ranking factor for SEO, so you must choose a platform that you trust creates fast pages.

Google's assessment is based on 3 primary criteria:

Our new optimizations mean the pages built with OptimizePress will load even faster than they already did in previous versions.

They will bring you much closer to getting a perfect score on Google's PageSpeed and GTMetrix services with minimal effort on your part (we'll show you proof later in the post).

Now, please remember just improving page speed will not mean you rank on page one of Google. There are many other factors (backlinks, quality content etc.) that are still important to prioritise. 

Speed is just one of the factors included for measuring how a site should rank.

We can optimise on-page speed and create clean code that's written behind the scenes to improve how fast your pages load, but we cannot fix bad hosting or automatically resize your oversized images. 

Using a good host is always going to give you a significant bump in page speed scores. Optimising your images and removing unnecessary plugins will provide you with another boost and as you read on we've added lots of new settings to speed up your site.

It is important to note that there have been some significant changes to the core code of the platform. Even if you don’t turn on all of these new features we have made sure the HTML code on your page is cleaner and faster than ever before.

We've completely reviewed how our front end code works and further optimised this to keep in line with what Google is looking for.

As well as adding a specific optimization options control panel where you can customize your OptimizeBuilder pages (more on that later), we've also made a series of improvements to the core code of OptimizePress.

The first thing we did was optimize how CSS codes work in OptimizePress.

We have now separated the CSS core layout file from the individual page layout CSS, ensuring only codes that are needed for the page you're building are loaded.

This optimization was needed for adding more granular controls to CSS loading on your site, but this also means that even if you do not have any of our optimization options activated, you'll still benefit from faster loading pages and reduced code bloat.

One of the issues we had in earlier versions of OptimizePress was that we were loading icons as a web font file.  This meant that the entire icons file was loaded even when you only wanted to show one icon on your page. 

This icon font file would drag down page speed slightly, leading to an opportunity for optimization.  You can see how in previous OptimizePress versions the 204kb icon font file was loaded and increased page load time:

We've now completely removed this delay by switching to use individual SVG icons for all icons in the platform.  This means only the icons used on a specific page are loaded, dramatically reducing the load on the page when using icons.

SVG format still means icons are fully scalable in vector format, and this image format is widely supported by all modern web browsers.

Probably the most powerful and exciting part of this new optimizations release is the new control panel you'll find accessible from your OptimizePress sidebar.

This gives you access to a wide range of powerful new options you can use to optimize how scripts and files are loaded to your pages, how images are handled, and other powerful site optimizations.

Here are the new ways you can optimise your site (you'll find these sections within the new optimizations controls):

We’ll go into each setting in more detail and you'll also find comprehensive help linked from each feature inside your site to help you understand them better.  Our support team are also always on hand if you need further help.

We've done everything we can with our optimizations to improve the speed of your pages built with the OptimizeBuilder, but there are still many factors that we cannot control that can affect your page speed scores.

If you've considered the above factors - it's very possible to achieve high scores and very positive speed tests with OptimizePress and our OptimizeBuilder. 

You may need to tweak some settings for individual pages, and be prepared to adjust your pages and content (particularly on mobile devices) to get an optimal score - but here's example for a page we tested before and after optimization.

The before optimization version was using the previous version of OptimizePress, and the after optimization uses our latest version with select optimization options enabled:

Let's go over each of the individual optimizations controls sections now so you can understand them better and start to implement improvements on your own pages and sites...

We consider "assets" to be any file or script that is loaded to your page.

Our Assets control panel allows you to customize how specific scripts and files are loaded on your OptimizeBuilder pages to get the best results when it comes to page speed testing and Core Web Vitals scores.

This sections goes into each setting in more detail.

This controls whether the styling CSS generated for pages you built is loaded ON the page or in an EXTERNAL CSS file.  

Often Google PageSpeed tests will show that loading this file externally can mean an additional request is sent to your server, which slows down mobile loading and lowers your mobile score.

CSS dependencies are those core CSS styles required as standard on all pages you build with our editor. You can now choose to load these INTERNALLY (the code is loaded ON the page) or load these EXTERNALLY (in a separate CSS file OFF the page).

The advantage of loading externally (the default setting) is that this file can be cached, which means that future pages loaded on your site browsed by your visitors will load faster because this file is cached. 

By cached, we mean the page is saved in the browser memory to recall that file quicker when the visitors return to the site or page.

However, Google seems to prioritise the initial first-time page load above future page experience. 

To score higher with Google PageSpeed, you'll need to move this code internally (this does then mean it CANNOT be cached so will be loaded on every page load on your site).

JS = Javascript files. These files control interactivity on your pages, like animations, button effects, sliders, web form validation etc.  You can now choose to load these normally, or deferred.

When you load the JavasScript deferred, this means the codes do not fire until the end of the page loading - meaning lower render-blocking times and faster pages.

You're likely to see higher PageSpeed scores with these files loaded deferred - but always test your pages as this can sometimes affect interactivity and other elements (OptimizePress elements should be unaffected).

Other JS (JavaScript) files (or external JavaScript) are scripts that are added by other plugins or custom code that you have added to your site.

The Other JS option allows you to also defer the loading of these scripts and benefit from reduced render blocking when your page loads.

This can mean a slight delay with some features loading (if you have many interactive elements on your page) as browsers load the code from top to bottom. 

You also need to test your pages after enabling this option as some scripts can be broken by this option.  You can use the "Excluded JS" option to exclude files you find might be breaking after enabling this option.

This defer JavaScript option is often included with other optimisation plugins, so you may wish to leave this if you have an external plugin like WPRocket optimising your site.

As you will have seen in the core optimizations we have made in the latest update, we changed the way we store and load icons used on your pages from an icon font file, to SVGs.

This gives more flexibility over the individual loading of icons.

As part of this optimization, we've now also included a control to allow you to specify if your SVG icon code should be added in-line on your page, or those icons should be externally referenced. 

This tweak can make a small difference to page loading depending on the number of icons you're using.  

Note: Some CDN’s may cause issues loading the icon SVG file so if your icons are not showing simply switch the SVG icon option to Internal and you should find your icons load fine.

A new Stripe loading setting has been introduced to control if Stripe code loads only on the checkout pages or on all of their pages.

If you turn this on, it reduces JavaScript calls on most pages, which is a speed advantage. 

The downside is that the fraud detection functionality of Stripe changes.

Fraud detection works better if the code is on every page, as Stripe can track your user's behaviour through your funnels and through all your pages.

So fraud detection may be less effective if you turn this off.

You have to find a balance between the speed of your pages loading that JavaScript or having super fast pages with fewer fraud detection functions. 

If you're selling a low priced eBook compared to a high priced course, this is where you have to make the decision yourself. Tighter fraud protection or fast page experience that could increase conversions...

With all great changes to the web, like emojis being heavily used for messaging, WordPress included an emoji Javascript with its default installation thinking we all want to use emojis in our content.

Currently WordPress converts any text smileys into emojis - but most browsers now do this by default so you can turn this off and most of your visitors will still see emojis on your pages. 

oEmbed was added to the core of WordPress in version 4.4.  This is a feature you've most likely used if you've added any content from a social network to your site in the past.

This allows users to embed YouTube videos, tweets and many other resources on their sites simply by pasting a URL, which WordPress automatically converts into an embed and provides a live preview in the visual editor.

This feature is useful for a lot of people, and you may want to keep it enabled. However, what this means is that it also generates an additional HTTP request on your WordPress site now to load the wp-embed.min.js file. And this loads on every single page. While this file is only 1.7 KB, things like these add up over time. The request itself is sometimes a bigger deal than the content download size.

Google fonts are used across many of our OptimizePress templates.  With over 1000+ fonts now included from their library, we wanted to ensure we were loading fonts in the most optimal way possible inside OptimizePress.

We started by implmenting asynchronous loading of fonts.  This means the browser does not wait for other files to be loaded before loading font files - so they load at the same time (so they are not render-blocking) Here's a bit more detail for you on the methodology we followed:

Asynchronously loading Google Fonts is a net good idea, but reducing the priority of the CSS file has actually slowed down the rendering of our custom font.

A combination of asynchronously loading CSS, asynchronously loading font files, opting into FOFT, fast-fetching asynchronous CSS files, and warming up external domains makes for an experience several seconds faster than the baseline.

Read more at CSS Wizardry

As well as asynchronously loading font files, we also tested a number of additional font loading options and wanted to give you control over these for your own sites. 

Preloading font files means that your browser starts loading the source font files as soon as the page loads, so they are ready for rendering on the page when the browser requires them.

This can reduce LCP times and prevent render blocking or flash of unstyled content (FOUC) which can affect user experience on your pages. 

In our testing, we found that in some cases rendering the font stylesheet to the body of the page (rather than the header where it would typically be rendered) could result in a slight improvement in PageSpeed scores. 

We provided this option for you to test and tweak as you need - the result often depends on the length of your page as well as number of fonts used.

The font-display option determines how a font face is displayed based on whether it is ready to use when the browser requires it.

We provide the ability to switch your font display (for Google fonts loaded) between swap and optional. 

If you're interested in learning more, CSS Tricks explains these options in more detail

No more image optimization plugins. Yeeehaaa!

This is another huge update to the platform that allows you to create modern Webp images or load images in next-gen format. 

We have coded this feature from scratch and it's exactly how Google wants to see your website images loading.

This optimisation feature means you can serve existing next generation images or convert existing images to next generation format!

What we are doing here is generating different image source files and letting the browser decide which one to load to give the visitor a quicker experience on your site.

The two new features in detail are:

This adds the code required to serve next-gen image formats if they are available. 

What we do here is scan your server, see if they are available then add some code to serve those with a fallback for browsers that do not support those new formats.

This also gives you full support for our background images within Sections and Rows. 

Some plugins miss background images and we've made sure background images get optimized too, as they are usually the largest image on a landing page.

When the feature is turned on, any new images you upload will be converted to this new faster image format. 

For old existing images, we created a converter that will go back into your image library and convert everything to the next-gen format. 

How cool is that!!

Note it may take a few hours to complete all the conversions depending on how many images you have stored on your site. Therefore, we would recommend you run this in the evening or at a known quiet period when you have low traffic. 

Alternatively, you could run this on a staging site and push over the live changes later.

Our OptimizePress.com site took about 4 hours to optimize all images.

Now you have this image optimization built into OptimizePress you don't need to use any external image squashing or optimisation plugins. 

A new feature in web speed is where we can load progressive images. By this, we mean loading a small thumbnail version of the original image on your page.

You can turn this on for:

As mentioned above, when you turn on the "convert image to next gen" this conversion process also creates a new tiny "progressive" thumbnail image from the original image.

We do this so your pages can load a small temporary image where the real image will go.

This progressive viewport image actually appears blurred when viewed on the desktop because it's a small thumbnail and it uses very minimal server resources to load this tiny thumbnail.

What happens next is that the original image comes to life when the browser detects user activity (mouse movement).

What is happening?

When the page loads, it loads the tiny thumbnail version of each image - Google and your visitors experience a fast loading page.

Visually it doesn't look great on desktop browsers but the moment you move the mouse the actual image appears instantly so it's barely noticeable.

This might not be popular on desktop devices but the magic happens when on mobile and tablet devices. This viewport image makes the page load rapidly on a mobile device and doesn't take away from the design or conversion aspects of the page.

This feature optimizes those large or heavy images on a landing page.

One thing to note is this only works for the first two sections on your page within the page builder. These sections are the first parts of the page to be seen, above the fold so it only makes sense to use Viewport optimization on those areas.

These new features just keep on coming! 

We added the Lazy Loading of images for your landing pages and sales pages (or any page built with the OptimizeBuilder).

If you've tested a longer sales page or landing page before - you might have seen this warning: Defer offscreen images

Lazy Loading of images is where we only load your images when they come into view on the screen, rather than loading all the images at once.

It's like telling the server "only load this image when the visitor wants to see it" —again, reducing the server resources and increasing the speed at which the page loads.

The options are:

So that's another plugin you can delete as it's built right into OptimizePress.  Note that if you need lazy loading on your blog theme, you may still need to maintain a lazy loading plugin for those pages and content.

When you embed video code on your pages, the external scripts for the video can drag down the page speed causing errors like:

Here's an example of what you might see when you use normal video embed code (Vimeo in this example) in the Google PageSpeed Insights tool:

Turning on our Video Facade  feature will stop many of the video javaScripts from loading when they don't need to.

Once a user is ready to view the video and clicks play, the page will load the needed JavaScript.

Here's an example of how the Video Facade feature can improve your PageSpeed scores:

Hey presto! Those big bloaty JavaScripts can Facade off

When we said we wanted to give you complete flexibility when it came to optimizations on your pages, we weren't joking.

As well as your central optimizations control panel that makes global changes to all your OptimizeBuilder pages, we also have added even more specific controls so you can override all of these settings on a per-page basis.

This means if you have a specific page where you'd perhaps like to use different font loading, or you'd perhaps like to turn off next-gen images for a specific page, you can do that with just a few clicks.

By allowing you to customize individual settings on each page, you can easily tweak settings based on your page speed testing results to refine and improve the score of every page on your site.

To find the on-page optimizations options, just go to Settings (at the top of the editor) > and then click on Page Optimizations.

If you want to reset your page to use your global settings, just click the Reset to Defaults button at the bottom of the settings panel.

As part of our optimization technology, the OptimizeBuilder generates a cached version of your page after the first visit.  This speeds up load times, and reduces load on your WordPress database.

If you make changes to your site, such as tweaking your optimization settings, it's always a good idea to clear your cache before re-testing or viewing your page to ensure you see the latest version.

To make this process easier, we've now added a Clear Cache button in the WordPress admin bar.  This makes it easily accessible from anywhere on your WordPress site.

The added bonus is this new Clear Cache link will also work for other caching plugins you have installed, so you only need to click it once and not each time in all different plugin locations.

This is a huge technical update and there's a lot to take in on this post.  We don't want you to feel overwhelmed.

Firstly you need to know that these optimizations are designed to make your pages faster and your code more optimized. You don't need to understand the technical side of how every optimization feature works.  You can test your pages and see what works for you.

Secondly you need to find a balance between fast pages and user experience. This is solely a decision only you can make. 

Sometimes high scoring numbers look great but the actual user experience can be crippled. Only you can make that choice depending on what you sell, your conversion rate and existing SEO ranking.

And lastly a good host should be a top priority. Expect to pay $15-$30 a month upwards for premium WordPress hosting with excellent support.

We love hearing from our community!  Please share your questions and thoughts in the comments below and we'll be on hand to help you out. 

Be sure to share your speed test results too once you've optimized your pages - we'd love to see how these updates work for your sites!

The all-in-one platform for marketers using WordPress.  100% of this page was built with OptimizePress.

Copyright © 2010-2024 OptimizePress® · All Rights Reserved.   Privacy Policy   ·   Legal Information