Starting in July 2018 Google announced that page speed will be a ranking factor for mobile searches. Although speed has been used as a ranking factor for some time now, that signal was focused solely on desktop searches. According to Google it took more than five seconds for visual content above the fold to display on the screen for 70 percent of mobile landing pages and 15 seconds to load completely, making it critical that you know how to improve website speed for a better chance at ranking in the Google Search Results.
With 53 percent of mobile visitors leaving a page that takes longer than three seconds to load and more than half of overall web traffic coming from mobile, it’s important that your website loads as quickly as possible to drive visitors to explore the content on your website.
Luckily for us, Google has a tool called Page Speed Insights (PSI) that measures speed ranking on websites and provides us with areas of opportunity for optimization improvement to deliver a faster load time to our visitors.
The following are the optimization suggestions that Google looks for through PSI:
- Reduce server response time
- Leverage browser caching
- Avoid landing page redirects
- Enable compression
- Optimize Images
- Prioritize visible content
If you’re like me, you might be shocked at how poorly your website is optimized based on these PSI rankings. This post will explore what each of these factors mean and how you can optimize your website to load as quickly as possible to reduce your bounce rate.
- 2 Reduce server response time
- 3 Leverage browser caching
- 4 Avoiding landing page redirects
- 5 Enable Compression
- 6 Optimize Images
- 8 Prioritize visible content
- 9 What Plugins to Use on your WordPress Site
- 10 My Website Results Using These Plugins
- 11 How to Improve Website Speed for Better SEO on WordPress Recap
Before the browser can render a page it has to build a DOM tree by parsing the HTML markup. When the parser encounters a script, it needs to execute it before continuing to parse the HTML, which causes a delay time to the first render of the page.
Reduce server response time
This measurement looks at how long it takes for your site to load the necessary HTML to begin rendering from your server. Google recommends that the Time to First Byte (TTFB) is under 200 ms.
There are many factors that go into improving your server’s response time, whether it’s slow application logic, database queries, slow routing, CPU starvation, frameworks, libraries, etc…
If your site host shares its server with dozens of other websites, this can cause a bottleneck during peak traffic times. If a visitor makes a request, they wait for the server to respond and if it’s too busy handling other requests it won’t perform effectively, which is a prevalent issue in shared hosting.
The easiest way is to correct this is to choose a web host/server that won’t bottleneck your website, as well as utilize a CDN and choose the data center closest to your targeted audience so latency will be at a minimum. Looking into a Cloudway server is also highly beneficial as they’re optimized to deliver dynamic content and have the right software mix to boost site performance.
Leverage browser caching
Fetching resources over the network causes a delay in response times and can require multiple roundtrips between the client and the server. This can also incur expense data costs for the visitor and may block the rendering of page content.
The solution to this factor is specifying a caching policy to help the client determine if it can use a previously fetched response.
Avoiding landing page redirects
Redirects will trigger an additional HTTP request-response cycle and will delay page rendering. The best case scenario for redirects is that your site will only add a single round trip as it converts from HTTP to HTTPS, while the worst case is it has additional roundtrips for DNS lookup, TCP handshake and TLS negotiation, which will heavily impact your response time. To avoid landing page redirects, make sure that your website employs responsive design for viewing on any device rather than delivering specific designs for desktop, mobile and tablet. You should also have a SSL Certificate for your site, as this is another SEO ranking factor in Google.
GZIP Compression is a capability that can be built into web servers and web clients to improve the transfer speed and utilization of the bandwidth on your website. This involves compressing your website code; luckily most modern browsers can handle gzip compression without any serious editing on your end.
This factor is significant in improving your site speed. If your images aren’t optimized for size or load speed, they will cause a serious site slow down. Images should be resized to fit within the size dimensions of your website theme while being less than 200kb.
As an example my homepage data size was 130mb, which is atrocious and caused a 20 second full load time. After optimizing my images the homepage data size is now 2.3mb.
For photos you can upload them as PNG or JPEG file formats. PNG files offer lossless compression, or no significant reduction of quality when compressed, and you can use PNG files instead of JPEGs when uploading detail-focused photos to your website pages.
On the other hand, JPEGS offer lossy compression, which removes visual details of the image but can offer a significantly higher compression ratio compared to PNGs.
Prioritize visible content
What Plugins to Use on your WordPress Site
All of these factors sound difficult to implement if you don’t have serious coding skills, but there are a few plugins that you can use to optimize a majority of your website without performing a lot of work on WordPress.
The first plugin you should download is WP Rocket. While it’s a premium plugin starting at $40 a year for single websites, it offers a wide range of features including:
- Enabling caching for mobile devices
- Activates sitemap-based cache preloading based on your XML sitemap preferences
- Minifying HTML to remove whitespace and comments to reduce size
- Combining Google Font files to reduce the number of HTTP requests
- Minifying CSS files to remove whitespace and comments to reduce file size
- Combines CSS files to reduce HTTP requests
- Optimizes CSS delivery to eliminate render-blocking CSS on your website for faster perceived load time
- Removing query strings from static resources
- Enables Safe Mode for jQuery to support inline jQuery references from themes and plugins by loading jQuery at the top of the document as a render-blocking script
- Enables LazyLoad to improve actual and perceived loading times for images, iframes, videos, emojis and WordPress embeds
- Deletes revisions, auto drafts, trashed posts, spam and trashed comments, temporary transient options, as well as database tables
- CDN integration so all URLs of static files for CSS and JS images are rewritten to your CDN CNAME
This is another plugin you want to use to automatically reduce the size of any images that you upload to your website. It will compress them for you right on upload, offering various settings for JPEG and PNG files. By using EWWW Optimizer my homepage data size was reduced from 150mb to 2.3mb, which is huge when trying to optimize for load speed.
As far as Cloudflare goes, it comes already available on most web hosts such as SiteGround and is great as a CDN service for delivering content to your targeted audience’s location while reducing latency server response time.
Everyone likes to dog on the Jetpack plugin as being bloated, but it offers the services of 20 plugins in one small package that you can disable and enable at your leisure. You can serve images from their global CDN, enable lazy loading for images and use the Jetpack Mobile theme if your website isn’t using responsive design.
Plugins Garbage Collector
If you use and delete plugins often, some plugins still leave behind tables and data that will slow down your site speed. The Plugins Garbage Collector is great for finding and deleting unused or hidden tables that are ingrained in your website database. A word of warning though: make sure you save a backup of your website, as deleting tables is permanent.
UpdraftPlus – Backup/Restore
Going hand in hand with the previous plugin, UpdraftPlus can be used to Backup/Restore your website. It will scan your site and you have the option of receiving a copy of the backup through various delivery options including a Cloud Service, Google Drive or email.
Other Site Speed Considerations
When thinking about your website theme, make sure that it’s responsive. I would also recommend removing any interactive elements to your homepage like rotators and banners that change every few seconds, as well as decluttering your sidebar of any unnecessary widgets.
Before my optimizations I had in my sidebar various social media feed widgets that significantly decreased my homepage load time. From a mobile perspective, sidebars aren’t very useful as they are displayed at the bottom of the screen and almost all users drop off before even reaching that point.
The use of AMP pages can also help with increased mobile speed time. AMP pages require that you manually separate various elements of your page, making them as lightweight as possible to load extremely quickly.
I won’t speak in depth about AMP as I’m not very familiar with them, but they are commonly used by news organizations that allow users to swipe their screen to view “slides” of sorts with the content broken up in that way. On first glance I would assume that using AMP would hurt SEO as your content is split into various elements that might not be crawled by Google, but I don’t know much of the coding behind it so my fear could be unfounded.
Also be sure to sift through your installed plugins and delete any unnecessary ones that you aren’t using or are performing the same tasks so there isn’t any overrun or conflicts.
My Website Results Using These Plugins
I started optimizing my website when I noticed that it was taking an exceptional amount of time for my website to load on mobile and desktop. After running some tests via PSI and Pingdom, I found that my site full load time was 20 seconds long!
After optimizing my images, using all the options offered by WP Rocket and reinstalling Jetpack, my site load time now sits at a cool 2.1 seconds.
My ranking on PSI is at 94% optimization rate for mobile and 90% for desktop. I have one or two lines of code that need to be tweaked, but I’m extremely happy with the significant increase in site performance compared to being at 40% on PSI a few days ago.
If you’re looking to test your actual site load speed, I would recommend checking out Pingdom as it offers a comprehensive look at your website from TTFB and what website elements are taking the longest to load. Like PSI it also offers various areas of opportunity and solutions to correct any optimization issues.
While Pingdom is reliable, I would still focus on using PSI because Google is the one determining your ranking factors for technical on-page SEO.
By using the Google Analytics Benchmark Report, I can compare myself to other competitor websites in my industry. Decreasing the load speed time on my website has proven that I have more time spent on my website alongside a significantly lower bounce rate on both mobile and desktop sessions.
How to Improve Website Speed for Better SEO on WordPress Recap
One other consideration for increasing SEO is by excluding spam referral traffic as counting in your Google Analytics reports (check out my latest post here on how to do this). I hope that you found this post helpful in your journey to optimize your website to load as quickly as possible! Do you have any other suggestions on increasing your site speed? I would love to hear your thoughts in the comments section below! If you haven’t already, be sure to check out my latest tip post on converting your website from HTTP to HTTPS for a boost in SEO.