Try these quick hacks to make your pages load faster, and watch your engagement and conversion rates improve.
Solutions keyboard_arrow_down keyboard_arrow_up
Our Solutions
Ontraport's solutions work together to give you everything you need to run your business in one centralized, easy-to-use platform.
Sales +
CRMarrow_forward
Segment + Organizearrow_forward
Smart Pipelinesarrow_forward
Unified Contact Historyarrow_forward
Task Automationarrow_forward
Lead Scoring + Routingarrow_forward
Mobile Apparrow_forward
Trends arrow_forward
Ontraport Calendar arrow_forward
No-code Web Appsarrow_forward
Custom Objectsarrow_forward
Dynamic CMSarrow_forward
Conditional Contentarrow_forward
Membership Sitesarrow_forward
Paymentsarrow_forward
Order Formsarrow_forward
Offline Transactionsarrow_forward
Complex Offersarrow_forward
Upsells + Order bumpsarrow_forward
Decline Recoveryarrow_forward
Customer Centerarrow_forward
Referral Trackingarrow_forward
Pages + Formsarrow_forward
Drag and Drop Editorarrow_forward
Form Buildersarrow_forward
WordPress Integrationsarrow_forward
Marketing
Automationarrow_forward
Campaign Automationarrow_forward
Email + SMS Messagingarrow_forward
Email Deliverabilityarrow_forward
Tracking + Attributionarrow_forward
Facebook Custom Audiencesarrow_forward
Platformarrow_forward
API arrow_forward
Integrations arrow_forward
Security and Scalabilityarrow_forward
Industries we serve
Select your industry to see how our CRM and marketing software can support your growth
Learn more Resources keyboard_arrow_down keyboard_arrow_up
Pricing Chat Resources
Find free content on the latest marketing strategies, using Ontraport in your business, and finding the right software.
Visit the blog Research and Education
Bootcamp
Coursearrow_forward
Attend a hands-on training course designed to give users a solid foundation of software skills and marketing strategy.
Expert Certification
Coursearrow_forward
A course for business owners and marketing professionals wanting to support our mutual clients. Learn advanced marketing strategies and get exclusive perks.
Ontraport
Blogarrow_forward
Browse a collection of articles on marketing automation, email marketing, CRM, membership sites and more.
Step-by-Step
Templatesarrow_forward
Implement proven marketing processes with our easy-to-follow worksheets and checklists.
In-Depth
Guidesarrow_forward
Download our best-practice guides, complete with data-driven insights and tactics to help you optimize your marketing.
Podcastarrow_forward
Listen in as Ontraport CEO Landon Ray talks with with a star-studded cast of entrepreneurs, marketers and thought leaders.
Marketing
Blueprintsarrow_forward
Learn everything you need to know to develop fundamental marketing strategies with our digital handbooks.
Using Ontraport in Your Business
Software
Comparisonsarrow_forward
See if Ontraport is the right fit for you — compare the top marketing automation and CRM software on the market.
Setup Wizards
Libraryarrow_forward
Our Setup Wizards walk you through the steps to customize and launch a marketing campaign for your business in minutes.
Get the
Factsarrow_forward
View the most frequently asked questions about Ontraport so you can get clarity and feel confident in your buying decision.
Feature Use
Casesarrow_forward
See exactly what you can do with Ontraport, and learn how you can personalize it to perform your specific needs.
Calculate Your
ROIarrow_forward
Get an honest estimate of the return you can expect from an investment in Ontraport's software.
Exploring
Ontraportarrow_forward
Take a guided tour through the five phases of the customer lifecycle in a simulated business powered by Ontraport.
Try our free interactive customer portal demo!
Want to offer the convenient, self-service experiences your customers are looking for? Check out this free demo to see what you can create in Ontraport without code or developers.
Want to offer the convenient, self-service experiences your customers want?
Check out this free customer portal demo to see what you can build in Ontraport without code or developers.
Home > Ontraport for marketing > Pages > Tips for improved page performance
Tips for improved page performance
You'll learn:
- 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
Sam Flegal
Tips for improved page performance
Try these quick hacks to make your pages load faster, and watch your engagement and conversion rates improve.
- 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
Course Instructor
Sam Flegal
Related resources
[Block//Author//First Name] [Block//Author//Last Name] on [Block//Date Added %F j, Y g:i a%+0d0h0m]
[Block//Comment]
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!
settings
Turn your business on with Ontraport.