The page speed of a website is an important determinant that can make or break your website.
Any user browsing through your website and finding themselves waiting on a page for a few more seconds, are likely to drop off.
Around 47% of the users expect a page to load in not more than 2 seconds. A faster page speed makes for a better user experience, can increase your page views, conversions and reduce your bounce rate.
Luckily there is a remedy to increase your page load speed, which requires you to identify issues or issues causing slow load times.
It can get a little difficult to pinpoint what’s wrong, which is where you can use several tools like Google’s PageSpeed Insights to help. Google PageSpeed considers several factors for an overall score load time score. Let’s look at those metrics.
- First Contentful Paint (FCP) : FCP marks the moment when your browser first displays any content on the page, such as text, images (including background images), non-white canvas elements, or scalable vector graphics (SVG).
- Largest Contentful Paint (LCP) : LCP is a key Google experience metric that tracks how long it takes for the largest visible element on a page to fully load. Google considers LCP a critical factor in page rankings.
- Cumulative Layout Shift (CLS) : CLS is another Google ranking metric that measures the unexpected movement of page elements during loading. This unwanted shifting, which may occur due to images, ads, videos, contact forms, or fonts, indicates poor coding practices.
- First Input Delay (FID) : FID gauges the time it takes for a website to respond when a user first interacts with it. For instance, if a user clicks on a video, FID measures the delay before the video begins playing.
Now that we have these out of the way, lets get into understanding 11 ways to improve your page speed-
-
Choose a Reliable Hosting Provider
Your web hosting service is crucial for making your site accessible on the internet, but not all hosting services are equal. A low-cost plan on a shared server won’t perform as well as dedicated hardware. Hosting prices can vary widely, so it’s essential to research and choose a package that can adequately support your site’s traffic without overspending. -
Enable GZIP Compression
GZIP is a server-level compression technique that reduces the size of common assets like images, stylesheets, and scripts, thereby decreasing loading times. -
Compress & Lazy Load Images
High-quality images can significantly slow down your site’s loading speed. Even if you compress an image in Photoshop, use a tool like TinyPNG or Smush for further compression. Also, implement lazy loading for images below the fold, meaning they’ll only load when the user scrolls down to them. This reduces the number of elements that need to load initially, greatly improving page speed. Plugins are available for lazy loading, but you can also add native support with a lazy load library in your theme. -
Resize Iframes
Reducing the size of iframes can help decrease the space they occupy on your page and the amount of data that needs to be loaded, contributing to faster load times. This involves adjusting the HTML attributes that control the iframe’s dimensions. You can also use CSS for more responsive resizing across different screen sizes. After making changes, test your page to ensure content visibility and layout are unaffected. -
Use Font “Swap” for Custom Fonts
To avoid the “flash of invisible text” (FOIT) while custom fonts load, you can display a system font initially and then swap it for the desired font once it’s ready. For Google Fonts, add &display=swap to the URL. If using @font-face in your stylesheet, add font-display: swap;. You can also preload fonts in the header to speed up loading. -
Combine and Minify CSS & JS
Minification removes unnecessary data from your CSS and JS files. While some themes automatically combine and minify stylesheets and scripts, you can further optimize by using plugins like WP-Optimize to combine files from various plugins, reducing the number of requests at page load. -
Check for Theme Bloat (Unused Code)
If your site uses multiple layouts, it can be challenging to load only the necessary scripts and styles. Improve performance by identifying and removing unused JavaScript and CSS. Trim down active plugins to only those essential, avoiding plugins for tasks that can be handled natively within your theme. -
Evaluate Your Page Length
If you receive a warning for excessive DOM size, consider whether your page has too much content. Excessive size can result from a long page or deep elements like nested galleries, sliders, or accordions. If your page requires multiple sections, keep them simple. For intense interactive elements, consider placing them on a dedicated page. Reducing DOM size is easier during the design phase than after coding. -
Maintain Your Redirects
Outdated resource URLs that follow redirects to new locations slow down page loading. The most common redirect is from HTTP to HTTPS. Some plugins and hosting providers offer options to force HTTPS before page load, bypassing these redirects and improving speed. -
Review Your Tracking Scripts
Even with everything else optimized, adding tracking scripts (like analytics, tag managers, or conversion pixels) can drastically reduce your page speed score. Third-party scripts often fail PageSpeed Insights metrics, causing unnecessary redirects, unminified resources, and immediate loading. Regularly review and remove tracking elements from expired campaigns, and remove A/B test scripts once the test is complete. -
Implement Caching
After optimizing everything within your control, find a suitable caching solution. Caching allows your website to store pre-built files, reducing the need to load all assets anew with each visit. Some hosting providers, like WP Engine and SiteGround, offer server-level caching as part of their plans. Other options, like Cloudflare, are available if your host doesn’t provide caching. However, be cautious with WordPress caching plugins, as they might lower your PageSpeed Insights score by taking longer to compile the site for new visitors. While returning visitors will benefit from improved speed, the PageSpeed Insights bot only tests the initial load
