Try these quick hacks to make your pages load faster, and watch your engagement and conversion rates improve.
Home > Ontraport for marketing > Pages > Tips for improved page performance
Tips for improved page performance
Course Instructor
- How and why you should resize images
- How and why you should minify third-party scripts
- Why to skip WordPress and build your pages with Ontraport
- The best ways to minimize embedded videos
Comments
[Block//Author//First Name ##cap_first] [Block//Author//Last Name ##cap_first] on [Block//Date Added %F j, Y g:i a%+0d0h0m]
[Block//Comment]
Leave your comment
14-day free trial. No commitment.
Related resources
[Block//Resource Type]
[Block//Resource Description ##ellipsis(166)]
Transcript
In this video, we’ll check out some quick hacks to make sure your pages load quickly. Did you also know that websites that load faster have better engagement and conversion rates? Your leads have options, and they won’t wait around.
So let’s walk through 4 tips for improved page performance. Ready to dive in?
To improve your page performance, we’ll focus first on the framework of your site.
If you’re building a website from scratch, there are bunches of things to think about, such as hosting or using a CDN or caching strategy, but when you build pages with Ontraport, we take care of the behind-the-scenes so you can focus on what you’re actually putting on the page.
But what you put on the page matters too.
Something that comes up a lot for our users is image size, because images that are too big are the number 1 cause of slow loading pages.
So here’s our first quick fix: resize your images.
So what’s the best size for your images? The best image size fits the container you’re putting it in, on an average screen. For Ontraport pages, containers are your columns. The measurement you should focus on is the width of the columns your image lives in.
I’ll show you how to find the perfect size for each of your images and use a standard 1920 x 1080 display resolution.
First, keep in mind that your Ontraport pages — and the images on them — grow and shrink depending on the size of the screen they are viewed on. These pixel numbers don’t have to be exact. But if your image is too small, it’ll look pixelated and low quality on a big screen. If it’s too big, the image just slows down your page-loading time.
Any image that fills up your whole page’s width — like a page or block background — should be at least 1920 px wide. If your image sits in a column that only takes up half a page, you can go with 960 px, and if it takes one-third of your page, 640 px.
To get your image sizes just right, we can resize them in Ontraport using 2 steps. Step one: To figure out the ideal size for your image, use the inspect tool in your browser. I’ll show you how to do this using Chrome.
Start by clicking “Preview” on your page. Next, right-click your mouse and select “Inspect.”
Slide the Inspect window size to the right so it’s as small as possible. Select an element in the page to inspect it.
Then, hover over your image placeholder to check how wide your image is currently. The width is the first number right here.
You can use this width as your image size, or pad it a little bit just to be safe. If it says 400px, maybe make your image 10% bigger, like 440px or 450px wide.
Now that you know the size you want your image, we’ll head back to the Ontraport editor for Step 2, which is resizing your image. Select the image on your page and click Edit from the image settings. Next, click the “Transform” tab, and be sure to check “lock resolution” at the bottom of your screen. Finally, resize your image by putting the width you’re looking for in here. Click Save, and you’re done!
Ok, the next issue that slows your pages down is third-party scripts, so our second tip is to minimize those. Of course, some scripts are required, like your Google Analytics script or maybe a Facebook Pixel. But the more you add, the slower the page. So, only add what’s necessary. If you need to add extra scripts to your pages, you can use a script minifier app to remove the extra unnecessary characters from your code to make it load faster.
For example, you can use a free resource like https://www.minifier.org/ to drop in your JavaScript or CSS. Then, click Minify to remove extra characters and add your cleaned code to your page. It's as simple as that!
Moving on to our third tip: skip WordPress. Building and hosting your pages with Ontraport is always a faster option than publishing your pages with WordPress. If you’re trying to optimize loading speed on WordPress sites, you need to look at all the plugins, worry about your WordPress hosting, use the latest available PHP version, make sure you’ve upgraded your hosting, and the list goes on. Just Google, “Optimize WordPress site” to see the massive list of issues that WordPress users need to take care of to improve their site’s performance.
But if you’re committed to your WordPress site, and your embedded Ontraport Pages are running slowly, consider hosting those pages on a subdomain of your site instead ….. one like pages.yourwordpresssite.com. You can learn how to set that up in our video on Setting Up Your Custom Domain or by contacting our support team.
Our final tip is to minimize embedded videos. These are another source of slow page loads because they get information from a third-party server. Usually, adding a YouTube or Wistia video or two is no problem, but if you’re going to add 10 or 20, things will get slow. Instead, add image thumbnails for each video. You can link them to a pop-up for a separate page where each video lives.
And that’s how you speed up a slow page. Resize your images, minimize scripts, and skip WordPress to have the fastest loading site possible. It’s as easy as that!
So let’s walk through 4 tips for improved page performance. Ready to dive in?
To improve your page performance, we’ll focus first on the framework of your site.
If you’re building a website from scratch, there are bunches of things to think about, such as hosting or using a CDN or caching strategy, but when you build pages with Ontraport, we take care of the behind-the-scenes so you can focus on what you’re actually putting on the page.
But what you put on the page matters too.
Something that comes up a lot for our users is image size, because images that are too big are the number 1 cause of slow loading pages.
So here’s our first quick fix: resize your images.
So what’s the best size for your images? The best image size fits the container you’re putting it in, on an average screen. For Ontraport pages, containers are your columns. The measurement you should focus on is the width of the columns your image lives in.
I’ll show you how to find the perfect size for each of your images and use a standard 1920 x 1080 display resolution.
First, keep in mind that your Ontraport pages — and the images on them — grow and shrink depending on the size of the screen they are viewed on. These pixel numbers don’t have to be exact. But if your image is too small, it’ll look pixelated and low quality on a big screen. If it’s too big, the image just slows down your page-loading time.
Any image that fills up your whole page’s width — like a page or block background — should be at least 1920 px wide. If your image sits in a column that only takes up half a page, you can go with 960 px, and if it takes one-third of your page, 640 px.
To get your image sizes just right, we can resize them in Ontraport using 2 steps. Step one: To figure out the ideal size for your image, use the inspect tool in your browser. I’ll show you how to do this using Chrome.
Start by clicking “Preview” on your page. Next, right-click your mouse and select “Inspect.”
Slide the Inspect window size to the right so it’s as small as possible. Select an element in the page to inspect it.
Then, hover over your image placeholder to check how wide your image is currently. The width is the first number right here.
You can use this width as your image size, or pad it a little bit just to be safe. If it says 400px, maybe make your image 10% bigger, like 440px or 450px wide.
Now that you know the size you want your image, we’ll head back to the Ontraport editor for Step 2, which is resizing your image. Select the image on your page and click Edit from the image settings. Next, click the “Transform” tab, and be sure to check “lock resolution” at the bottom of your screen. Finally, resize your image by putting the width you’re looking for in here. Click Save, and you’re done!
Ok, the next issue that slows your pages down is third-party scripts, so our second tip is to minimize those. Of course, some scripts are required, like your Google Analytics script or maybe a Facebook Pixel. But the more you add, the slower the page. So, only add what’s necessary. If you need to add extra scripts to your pages, you can use a script minifier app to remove the extra unnecessary characters from your code to make it load faster.
For example, you can use a free resource like https://www.minifier.org/ to drop in your JavaScript or CSS. Then, click Minify to remove extra characters and add your cleaned code to your page. It's as simple as that!
Moving on to our third tip: skip WordPress. Building and hosting your pages with Ontraport is always a faster option than publishing your pages with WordPress. If you’re trying to optimize loading speed on WordPress sites, you need to look at all the plugins, worry about your WordPress hosting, use the latest available PHP version, make sure you’ve upgraded your hosting, and the list goes on. Just Google, “Optimize WordPress site” to see the massive list of issues that WordPress users need to take care of to improve their site’s performance.
But if you’re committed to your WordPress site, and your embedded Ontraport Pages are running slowly, consider hosting those pages on a subdomain of your site instead ….. one like pages.yourwordpresssite.com. You can learn how to set that up in our video on Setting Up Your Custom Domain or by contacting our support team.
Our final tip is to minimize embedded videos. These are another source of slow page loads because they get information from a third-party server. Usually, adding a YouTube or Wistia video or two is no problem, but if you’re going to add 10 or 20, things will get slow. Instead, add image thumbnails for each video. You can link them to a pop-up for a separate page where each video lives.
And that’s how you speed up a slow page. Resize your images, minimize scripts, and skip WordPress to have the fastest loading site possible. It’s as easy as that!
Features
© Ontraport 2024
playlist_add_check
PCI DSS, Level 1
security
Privacy Shield Certified