30+ Page Speed Strategies To Improve Your Website SEO: A Step-By-Step Guide
How to Improve Page Speed on Your Website to Improve Your SEO
Have you ever come across a website that takes FOREVER to load? It isn't fun, and if it takes too long you usually end up just leaving. Page speed affects your website's conversion rates and your business reputation. A slow website will literally leave a simple negative thought association between your business and your customer. There is no reason not to solve this quickly and easily in order to avoid losing out on more potential traffic and brand loyalty.
How to Check Your Website Page Speed
The best way to check your page speed for free on your website is to use Google's free Page Speed Insight tool. This will give you a breakdown of both your mobile and desktop page speed scores. You can also use a brand new free tool by Google specifically designed for optimizing mobile page speed scores. It is called Test My Site on their digital marketing educational blog. This tool is incredible for giving you personal page speed recommendations for your site. I personally find the tips for improving page speed much easier to dissect on this tool than the first developer tool offered by Google. Additional testing tools like Google PageSpeed Insights, GTmetrix, or WebPageTest can also be used to regularly test your website's performance. These tools provide recommendations specific to your site. In this article we are going to go over how to improve your mobile page speed for your website because this is one of the most common ‘lowest scores’ people get on these performance testing sites and a poor mobile page speed is know to drastically affect your SEO technical score.
Obviously the ultimate goal here is to reach a 100% page speed score; however, be warned it is near impossible to do so (at least without a considerable amount of effort). The closer you can get to a 100% score though, the closer you are to Google giving you a higher domain score (which is used on their back-end as one of the influential factors into your site being ranked higher).
How can you tell what your minimum Page Speed score should be? A good indicator is to do a quick Google search for the main search term that would lead to your business. What are the Page Speed score of the top 10 organic search results? How does that compare to yours? Stop. Do this exercise. Google your main business search term (for example: Vancouver SEO agency) and check the Page Speed score for the top 10 organic search results. How does yours compare?
Is Page Speed Really That Important?
In a 2020 Google report on mobile page speed showed that faster sites encourage people to stay longer and purchase more. When page speed increased by only 0.1 seconds, conversion rates increased substantially (for example they went up by 8.4% for retail and 10.1% for travel industries).
In the same 2020 Google SEO report, it was shown that increasing page speed also will significantly improve bounce rates on your site (A bounce rate is the percent of people who leave your site immediately after showing up on it). If you are curious about more stats on why page speed is important (perhaps to convince the necessary people in your company why it is an important improvement worth investing in - you can download the page speed full report here.
For the rest of this article, I will breakdown some of the most important fixes you can make (that might come up in your reports from the Google tests).
Improving the mobile page speed of your website is crucial for providing a better user experience and potentially improving your website's search engine rankings. Here are some tips to help you optimize your mobile website for faster loading times. We’ve separated these problems/fixes into four categories so that you can focus on solving the ones that you have expertise in and outsource the fixes in the areas you may not have any expertise in.
The Most Common Design Mobile Page Speed Fixes
Use a Mobile-First Web Design Approach:
Start by designing your website with mobile devices in mind. Ensure that the layout, images, and content are responsive and adapt well to smaller screens. Your website should automatically resize itself and its layout when it switches between a mobile and desktop version of the site. When your website is getting developed it should be using responsive coding practices like sizes of elements or blocks in % or ‘vh’ proportions of browser height. There may even be mobile versions of images, font sizes, etc. There shouldn’t be a ton of hover elements that would be rendered useless on a mobile phone.
Choosing Mobile-Friendly Plugins and Themes
If you're using a content management system like WordPress, ensure that your chosen plugins and themes are optimized for mobile performance. We like to spend a lot of time ensuring that the plugins we select are compatible with our theme (Divi), most recent version of WordPress and have a lot of good reviews and community supporters/help documentation.
Ensuring Your Text Remains Visible During Webfont Load
Often this error message will come up when you run Page Speed tests through Google and are using custom fonts. Custom typography is so important to branding and web design, but it can slow a website down. The reason this happens is because unless you are using a very basic default web font, the browser needs to essentially 'upload' your custom font every time someone is loading your website. Fixing this will require installing a code script that uses a CSS feature called 'font-display.' To learn more about the font-display CSS feature you can read up on it here.
Most themes, website builders, etc. do not use this CSS feature by default, nor do they tend to make it easy for people. This is definitely a task that would be suited for your developer. If you want us to help you with this on your site then feel free to reach out.
If you have had a site designed and built by us specifically, then there is a high chance that you have a web-font ecosystem of Adobe Typekit fonts integrated with a custom Divi child theme on the WordPress platform and your hosting provider is Flywheel. If that is the case, then we can help install a custom script (after a manual site back-up of course) as a courtesy if you are running into problems. If the problem is more complicated than that, or you are using a different web-font ecosystem then we can set up a time to discuss and quote you a solution, or you can try to DIY your Adobe Typekit set-up using the following instructions:
How To Optimize Your Adobe Typekit Custom Fonts
Limit the use of custom fonts and consider using system fonts to minimize font loading times. If you must use custom fonts, load them asynchronously. A lot of us use custom fonts and will often pull those fonts from a tool like Adobe Typekit (we do this too!) One technique you can use to help increase page speed is to add a piece of code that allows the site to load a different basic web font first (very fast), while it is searching and adding for the custom font. At a technical level, most Adobe Typekit fonts load with a piece of code font-display="block” that blocks this from happening, but if you add font-display="swap" to the font CSS it will allow your browser to load a default web font first and then immediately swap it out for the custom font when it is ready instead of the page just not loading until the custom font file is ready.
If you have a WordPress site using Adobe Typekit fonts via the free WordPress plugin ‘Typekit Fonts for WordPress’ then you can just replace or add that new CSS rule for each font usage in the plugin settings itself. If you are using a Squarespace site then you will need to edit
Consider Designing AMP (Accelerated Mobile Pages) For Blog Posts
Implement Google's Accelerated Mobile Pages (AMP) for your content. AMP pages are highly optimized for mobile and can load quickly in search results. Big tech companies like Google, LinkedIn, Reddit and Twitter support Google AMP, and AMPs are viewable on all apps, browsers and web viewers. Google caches all sites that use the AMP framework, which can help improve Google ranking. The AMP format is a minimalist Google search results optimized page, and we would suggest considering this an option for your blog posts that don’t have a ton of speciality content blocks and customization.
If you are using a Squarespace site you can automatically toggle on AMP for your blog posts by opening the Blog preferences panel, scrolling down to Accelerated Mobile Page, and checking ‘Use AMP.’
If you have a WordPress site you can use the WordPress AMP plugin to convert your mobile pages into AMP versions. The Google AMP plugin for WordPress auto-creates AMP versions of all of your posts. Then, search engines and AMP-supported apps and services know where to look for the page’s AMP version thanks to “amphtml” in the source code. If it’s not possible to render an AMP version of a page, the plugin ensures that the non-AMP version loads. You can download the WordPress AMP plugin here.
The Most Common Coding Mobile Page Speed Fixes
Reducing Javascript Execution Time
How to Reduce Javascript Execution Time in WordPress
Remove any unnecessary plugins that you do not need
Consider a caching plugin such as WP Super Cache, W3 Total Cache or WP Fastest Cache.
It should be noted that sometimes your hosting provider already does some kind of caching for you behind the scenes. For example, I prefer to use Flywheel hosting for mine and my client's WordPress sites and they already provide caching services for your site. The difference between your host caching and a plug-in is that a host provider does something called non-persistent caching (which means you can update the site as much as you want and the visitors will see the newest version automatically). A plug-in does something called persistent caching which means whenever you update anything on your site (even if it is small, or a new blog post) you will need to manually clear your cache in order for visitors to see the new changes because the default is that they see the previous version. Make sure to be aware of this difference and ultimately choose the route best suited for your business lifestyle. If you are using Flywheel and want to see even more performance increases, then you can only use WP Rocket ($49 USD) to cache; however, investing in this plugin will solve almost every other performance issue listed in this article as well.Compress your images! Compress your images!!! See the section below in this article for the full guide on how to do this.
Keep your website database free of clutter by removing old post revisions, draft posts, posts in trash and spammy comments. This can be done manually or by using a plugin like WP-Optimize
Set up lazy loading for your images. This can be done for free via a plugins such as WP-Smush. This loads content as the user scrolls down the page, reducing initial load times.
Make sure you are using a quality hosting provider, they do make a difference in site speed because they are the ones delivering your site. As mentioned before, we prefer Flywheel hosting for WordPress sites and find their service, speed, and price-point to be ideal for any-sized business. We go over all the hosting considerations in the section on it below.
Enable GZIP compressions using a plugin like WP Rocket which will actually solve most of these javascript issues as well and costs around $59 USD/year for 1 website.
How to Reduce Javascript Execution Time in Squarespace
We should start off by saying that Squarespace will not be as easily optimized for page speed as WordPress sites, merely because of the development/plugin limits. When you choose Squarespace as your website builder you are ultimately choosing ease of use and design over performance a lot of the times. That being said, here are a list of things you can do to decrease the javascript execution time for your Squarespace site (again, lower your expectations here).
Eliminate Render-Blocking JavaScript and CSS:
Make sure critical CSS is inlined and non-essential scripts are loaded asynchronously. This ensures that the page can render and display content quickly.
When resources are blocking the first paint of your page consider delivering critical JS/CSS inline and deferring all non-critical JS/styles. The first step towards reducing the impact of render-blocking resources is to identify what's critical and what's not. Use the Coverage tab in Chrome DevTools to identify non-critical CSS and JS. When you load or run a page, the tab tells you how much code was used, versus how much was loaded:
There are a number of WordPress plugins that can help you inline critical assets or defer less important resources. Beware that optimizations provided by these plugins may break features of your theme or plugins, so you will likely need to make code changes.
Minimize Third-Party Scripts:
Limit the number of third-party scripts and tools on your website. Each one can add to page load times and may not be essential.
Consider reducing, or switching, the number of WordPress plugins loading unused JavaScript in your page. To identify plugins that are adding extraneous JS, try running code coverage in Chrome DevTools. You can identify the theme/plugin responsible from the URL of the script. Look out for plugins that have many scripts in the list which have a lot of red in code coverage. A plugin should only enqueue a script if it is actually used on the page.
When I ran this on Boop Digital’s site I was able to see that the following plugins were taking up a lot of coverage:
Facebook Connect Signal (This is Facebook’s conversion tracking pixel, which is annoying but I won’t delete it because if I want to run social ads might be necessary).
One Signal (I realized I don’t really use this, so we are considering deleting it)
Google Tag Manager (which is necessary, and am going to keep)
My Divi WordPress Theme (which I love, and am going to keep)
Reduce Redirects
Minimize the use of redirects on your website. Each redirect adds additional time to the page load process.
The Most Common Hosting Provider Mobile Page Speed Fixes
Use a High-Quality Hosting Provider and a CDN
Right off the bat, your website speed, performance, and security will improve when you use a high-quality hosting provider. For our clients, we always suggest using Flywheel Hosting because it is a managed WordPress host and has superior customer service and features for the price point. We cannot stress how important it is to invest in this. We can also assure you that we receive no money from them and that is not a referral affiliate link. We just think they are the best for startups using WordPress.
In addition to a high-quality hosting provider, I would suggest using a CDN as well. If you are using Flywheel hosting, you can actually access a free CDN service for your domain by going into your settings, and under 'advanced' you can switch on using the CDN. If you are not using Flywheel hosting, you will need to research and pay for an additional CDN service. (See why we are suggesting Flywheel ;) )
Leverage Browser Caching
Enable browser caching to store static files on a user's device temporarily. This reduces the need to re-download assets each time a visitor returns to your site.
Minimize HTTP Requests
Reduce the number of HTTP requests by combining CSS and JavaScript files, and use sprites for icons. Fewer requests mean faster loading times.
Minimize Server Response Time
Optimize your server to respond quickly to requests. Use efficient server-side scripting and consider using a hosting provider with good performance.
Minify Your HTML
If you are seeing a suggestion from Google Page Speed tools to minify your HTML then this can easily be fixed on WordPress sites via a plugin called Autoptimize.
Defer Unused CSS in WordPress
When Google tells you to defer unused CSS it usually wants you to take a look at (your possibly long) list of WordPress plugins and make sure that preferably only one is loading your website's CSS stylesheets. To identify plugins that are adding extraneous CSS, try running code coverage in Chrome DevTools. When it comes to improving page speed, I would focus on optimizing images, caching, minifying, and basically all of the above listed techniques before I attempt this solution. Try all of the other fixes first and see if you really need to do this step.
Schedule and Plan for Maintaining a WordPress Site
Keep your website's CMS, themes, and plugins up to date. Developers often release updates to improve performance and security. In general you should follow this timeline for maintaining your WordPress sites: Maintaining a WordPress site is crucial to ensure its optimal performance and security. Here is a suggested schedule and plan for maintaining a WordPress site:
Daily Tasks
Check for and respond to any comments on the site (not necessary for you)
Regularly back up the site and its database (set this to auto)
Weekly Tasks
Update WordPress core, themes, and plugins (we can set most of these to auto AS LONG AS you have daily backups too, which you do)
Scan the site for malware and security vulnerabilities (have a security plugin or hosting company do this)
Create a new blog content piece that is optimized for SEO, or optimize an existing piece of content
Monthly Tasks
Download a local file version of your most recent ‘complete’ backup to have
Monitor site traffic and analytics to ensure the site is performing well. Make adjustments as needed
Check and update contact information and other important site information
Check for broken links and fix them: Search ‘404’ in Google Analytics and set up a redirect. (Lo will do this with monthly marketing metrics)
Quarterly Tasks
Conduct a comprehensive security audit and make any necessary changes
Review and update website policies and terms of use
Review and optimize site speed and performance
Clean up and optimize the database by removing unused data
Check that your WordPress core is up to date, your theme is up to date, and all plugins are up-to-date
Yearly Tasks
Ensure your domain plan is renewing
Ensure your hosting plan is renewing. Evaluate if your current hosting plan is good enough for the traffic to your site at this time.
Ensure you are up to date with privacy policies, legal requirements on treating data etc.
Do an annual review of your web performance over the year
Conduct user testing to ensure the site is user-friendly and easy to navigate
Every 5 years
Consider this the age of a website to consider getting a new one developed, slight branding updates, etc. ALWAYS take into consideration SEO impact.
By following this schedule and plan, you can ensure your WordPress site is secure, optimized, and performing at its best.
The Most Common Image/Video Treatment Page Speed Fixes
Optimizing & Compressing Your Images & Videos For Faster Page Speed
One of the biggest technical issues for websites is page speed. Page speed can be hard to improve, but one of the easiest ways to improve it quickly is to make sure that every image and video is properly optimized for your website to be the smallest file size/highest quality for where it will be used on your site. Super huge, un-optimized photos and videos uploaded onto your site is the biggest reason sites get poor page speed scores. Especially with how visual modern website design is (thank goodness!) and with how visual our culture is now with the rise of social media, digital photography, video content and infographics. With video content being indexed and super important to rankings for your website too, the potential for your website to lag is huge! This will be single-handedly one of the top problem areas for most people. Luckily, compressing and optimizing your images is something you can do without the help of a developer!
There are a few things to keep in mind regardless of whatever image optimization solution you use:
Think about file format: Typically JPEGs (good for photos) are heavier files than PNGs (good for simple design) and there are faster formats that are newer such as JPEG 2000, JPEG XR, and WebP that Google Page Speed insights will suggest; however, it should be noted that these file formats are not always universally accepted (Squarespace for example will not let you upload files in this format).
How to Convert Your Images to WebP Format: WebP is a newer image format that provides superior lossless and lossy compression for images on the web. Use WebP to create smaller, richer images that can help your website pages load faster. WebP lossless images are 26% smaller in size compared to PNGs. Consider a plugin for converting images into next-gen formats IF you have WordPress: https://wordpress.org/plugins/search/convert+webp/. If you have a Squarespace site you will not be able to upload next-gen WebP image formats and will need to focus your efforts on compressing your JPEG and png files before they are uploaded.
Think about maximum image size: Think about the maximum size your image needs to really be. For example, if you are using an image as a banner then 1024 pixels length might be necessary, but if you are using it as a thumbnail image can the image being uploaded be exported and uploaded at a smaller size such as 400 pixels in length? To get an idea of what the average pixel dimensions are for any given photo on the internet try using this free Google Chrome extension that gives you a ruler (in pixels) to use on webpages. Below we write some of the most common image size recommendations for various web design needs.
Resize your images before uploading to your website: We strongly recommend resizing the image to a resolution that is similar to where the image is being used. Most stock images and custom photography files are HUGE -- exceeding 4000px wide. These large, high-res photos are beautiful but it is largely unnecessary to keep them this size when using them on a webpage. For example, if you’re going to have a square image in your blog post, crop and save your image as 1080 x 1080px instead of 4000 x 4000px.
Compress the images to a smaller file size: Once you have resized your image, you need to take additional compression measures to ensure that the image file size is not too big. As page load speed is a vital part of the Google algorithm, you’ll want to make sure that your largest image file size is no greater than 20 MB. Your resolution for screens does not need to be higher than 72 DPI. This is best handled by a software of your choosing. Here are a few of the common choices:
Use an online browser tool such as TinyPNG, Optimizilla, or the free version of Kraken to reduce the file size of your JPGS and PNGS.For most images, you should aim to compress your image under 100 KB, or under 200 KB for full-width images.
Use the compression/export tool in Photoshop
Use an image optimization plugin via WordPress such as WP-SmushIt, Optimus plugin or ShortPixel. (I would suggest only doing this for pre-existing images and if you are feeling very lazy)
Our personal preferred process is manually optimizing my images before uploading to my website and then also treating it with an image optimization plugin afterwards to ensure I am getting the maximum compression possible.
Standard Image & Video Sizes To Compress Your Images For Your Website:
1:1 Square. Most commonly sized 1080 x 1080px, square images are great for in-text images, sidebar ads, and Instagram. Usually this is too big for website images.
Website Banner Hero/Featured Images:
16:9 Panoramic on Desktop: This is your common website Hero image ratio for standard widescreen sizes. It’s often sized 1920 x 1080px and is used in presentations, widescreen TVs, and landscape images.
Mobile Hero Images: Some good ratios and sizes to use for mobile header images are:
Vertical Images 4:5 ratio, 1080 x 1350px
Square Images 1:1 ratio, 1080 x 1080px
Rectangle Images 1.59:1 ratio, 1080 x 680px
4:3 Rectangle. Slightly taller than the 3:2, the 4:3 rectangle was the most common ratio for screen sizes before widescreen monitors became popular. This ratio is typically used in 640 x 480px images for smaller screen sizes or placements, or could be up to 2048 x 1536px for full-screen takeovers.
1.59:1 Landscape Ratio. Typically used and supported throughout different social media platforms, landscape ratios are also popular for ‘featured images’ for blog posts and other content. Recommended minimum of 1080 px in width.
Favicon files: should be .ico or .png and should be a 1:1 ratio (square) with a minimum size of 16x16 px up to 32x32 px.
Logos in Navigation Bars:
Horizontal Logos: ratio of 3:2 or 250 x 100px
Square Logos: ratio of 1:1 or 160 x 160px
Video Background Website Banner:
If your video is intended to be full screen on the home page we recommend that it be a 16:9 ratio.
Aim for your background video to be between 5 - 20 seconds
Keep the video file size to 6MB or less
Keep the audio off. Videos that play audio automatically are ranked as one of the most annoying experiences a website can offer. Plus, adding audio will increase your file size so we suggest you just remove it if it’s not needed or have it muted by default when the page loads.
Don’t let the video compete with the content on the page. Make sure there’s enough contrast between the text and image color that you can easily read the text. You can use color overlays to help provide contrast for an image that has both light and dark areas.
Consider lazy loading videos below the fold of your website to allow the main content on the page to load more quickly.
How To Embed Videos For Faster Page Speed On Your Website:
Your videos should also be optimized for screens. Consider using a video hosting / streaming option when adding videos to your site rather than directly uploading them. Embedding a YouTube or Vimeo upload is a good option or there are dedicated website video services that offer a whole suite of perks you can look into. Whatever route you choose, having an embedded video will take less time to download when someone visits your site. Just like your iPhone running slowly when storage runs out, you want to avoid making your site load GBs upon GBs of video content every time someone tries to visit. Would you wait around forever while a site is loading or would you just leave? You would probably just leave, and depending on how familiar you with the business you might never come back again. Uploading videos to your site can slow down the page load times which is why embedding them is preferred. Virtually every video hosting site allows creators access to an “embed video” link. It’s just a matter of what platform you are pulling the video from. Some of the benefits of embedding videos versus uploading them directly to your website are:
Embedded videos are a good way to avoid file size and storage limits from your host provider.
Embedded videos grant you room for higher streaming quality.
Embedded videos also allow for faster page loading times.
Embedding videos also allows views from your site to count towards views on a platform like YouTube or Vimeo, increasing your SEO value.
Always try to optimize videos before uploading them:
Compress & optimize video file sizes.
Use gifs for shorter, looping video files.
Use images instead of video headers on mobile.
Don’t auto-play video on mobile.
Lazy load below-the-fold and in-content videos.
Some Additional Page Speed Optimization Considerations…
What Is The Easiest Way to Improve Page Speed Performance? (My Preferred Workflow for WordPress Sites)
Here is a simple breakdown of my Page Speed performance optimization workflow for a WordPress site (based on the ecosystem we design for our clients):
Analyze your Page Speed score and issues using Google Page Speed Insights and Google's Test My Site report
Use only high-quality managed WordPress hosting such as Flywheel
Compress and optimize images using Photoshop first before uploading, then a plugin tool such as WP Smush
Consider using professional performance software for your website such as WP Rocket to handle the following key performance issues: lazy loading images, caching your site, CDN delivery, minifying HTML, reducing unnecessary Javascript, and optimizing Google fonts. This costs you $49 USD but will save you the headache of constantly adjusting code, dealing with errors, and managing multiple free performance plugins to do different jobs which can sometimes ironically slow your website down even further.
Continue to monitor Page Speed on a monthly/quarterly basis to catch any problems as they come along
How Can you Improve Page Speed in Squarespace (& How Can you Not?)
When you hear arguments about ‘what makes a website platform better for SEO than another one’ it usually comes down to the flexibility that platform gives you to customize certain aspects of your site. By this, we do not mean design choices like colours or fonts. We mean more technical choices like tactics to improve your page speed, freedom over your hosting plans and options, availability of plugins to improve aspects of your site, etc. Here are some limitations that Squarespace currently has in improving your page speed for SEO:
You can’t upload next-gen image formats such as WebP to Squarespace sites.
You also do not have access to the same type of image compression, lazy loading, or caching plugins you can get for WordPress. So compressing your images using an online tool before uploading to your site is incredibly important. Squarespace currently only allows JPG, PNG, and GIF image files. It is recommended to use images between 1500 and 2500 pixels wide and under 500 KB. Use tools such as TinyPNG, Optimizilla, or the free version of Kraken to reduce the file size of your JPG and PNGS and hit these targets suggested by Squarespace.
A Love Note to Those Obsessed With Page Speed, From a UX Designer and Digital Marketer
Please keep in mind that although the ultimate dream is scoring 100% on all of your Page Speed tests, this is only one aspect of Search Engine Optimization. Sometimes we will come to a crossroads with a client where the UX design of a site will not allow for a certain performance change, and that is okay. A good online customer journey is just as an important consideration for optimizing a website. Take each suggested solution with a critical eye, and consider what is ultimately best for your audience. They are what matters. And often the answer to that is a fast and easy-to-use website! It is always good practice to continuously monitor your website's performance and make adjustments as needed. Page speed optimization is an ongoing process. By implementing these strategies, you can significantly improve the mobile page speed of your website, ensuring a better user experience and potentially higher search engine rankings.
