Optimize Website with PageSpeed Insights in Account Manager
Website speed plays an important role in how users experience your site and how well it ranks on search engines. When your web pages load slowly, it can lead to frustratingly high bounce rates, decreased conversions, and lackluster SEO results. To help with this issue, Bluehost has integrated PageSpeed Insights directly into your Account Manager. With this handy tool, you can easily evaluate how your site performs and find ways to enhance its speed for a better overall experience.
In this article, we will discuss how to use the Google PageSpeed Insights feature within your Bluehost Account Manager.
What is Google PageSpeed Insights?
Google PageSpeed Insights (PSI) is a handy tool from Google that helps website owners analyze and improve their website's speed. This tool evaluates how well a website performs on both mobile devices and desktops, giving website owners separate performance scores for each platform. The scores on PageSpeed Insights go from 0 to 100, with higher scores indicating better performance. If you want to learn more about how it works, check out Google's documentation: About PageSpeed Insights.
For more details about the PageSpeed Insights tool and to discover effective strategies for optimizing your website based on the test results, please visit https://web.dev/performance#pagespeed-insights.
Benefits of Using PageSpeed Insights
Utilizing the PageSpeed Insights feature in your Bluehost Account Manager can help boost your website's speed and overall performance, making for a better experience for your visitors.
- Improved SEO impact: Google uses page speed as an important ranking factor, so improving your PageSpeed Insights score can improve your ranking in search results.
- Better user experience: Faster-loading sites enhance the overall user experience and help reduce bounce rates, which are important factors in SEO.
- Mobile Optimization: As there are more users who access the web via mobile devices, optimizing mobile performance is crucial for enhancing your website's search rankings.
Navigating the PageSpeed Insights Panel
Here are the steps to access and use the PageSpeed Insights feature in your Account Manager.
- Log in to your Bluehost Account Manager.
- Click Websites in the left menu.
- If you have only one website, you will be redirected straight to its Overview panel.
- If you have multiple websites, all of them will be listed. Click on Settings to access the website's Overview panel.
-
Click the PERFORMANCE tab.
- Under the Performance tab, you will see the PageSpeed Insights card, along with the Manage Cache and Cloudflare cards.
- Click the RUN TEST button under the Page Speed Insights card.
- On the PageSpeed Insights page, select your device type from the dropdown menu—Mobile or Desktop—and then click the RUN TEST button again to analyze your website's performance and generate a detailed report.
- Your site score will be displayed along with the metrics results.
- Click the VIEW REPORT button to view the full metrics results.
-
A new window will open, showing you a full report of your website directly from Google PageSpeed Insights, where you can explore your site's performance further and review recommendations provided by Google.
Understanding the PageSpeed Performance Report
To begin, here are some terms that will be useful when reviewing the diagnostic report.
- Scripts: A script is a small piece of code that instructs a webpage to perform a specific action.
- CSS: Cascading Style Sheets (CSS) are codes that determine how the webpage looks, including colors, font, and layout.
- HTML: HyperText Markup Language (HTML) structures the content on the webpage, such as the text, images, links, and headings.
- JavaScript: This type of script makes the webpage interactive. It controls actions like opening menus, showing pop-ups, and moving sliders.
- Minify: This means making a file smaller by removing extra spaces and formatting, which helps the webpage load faster.
- Main-Thread: This is the work the browser performs to load and process the webpage.
PageSpeed Performance Report Breakdown
In the Performance Issues section of the report, you will find the following sections:
The image above shows sample PageSpeed diagnostic results.
| a: Mobile vs Desktop - You can toggle between Mobile and Desktop performance by clicking on these tabs. | f: Total Blocking Time - This is the time when the page loads but does not respond to the user input, aiding in diagnosing interactivity issues. |
b: Four Key Areas Rated - These are the primary areas that Google PageSpeed Insights will check:
|
g: Cumulative Layout Shift - This measures how much unexpected layout shifting happens on a page, like when a button moves around. It shows how stable the webpage is for users. A good Cumulative Layout Shift (CLS) score is below 0.1. |
| c: Performance Score - The Performance Score indicates the website's overall grade in specific metrics. You can hover over the score to see a breakdown of how each metric performed. | h: Speed Index - This metric indicates the time it takes for the webpage to look completely loaded. |
| d: First Contentful Paint - This shows how long it takes for the first visual element, like a text or image, to show up on the screen, helping users understand how quickly visitors see something happening on the website. | i: View Treemap - The Treemap displays which files and resources occupy the most space on the page, helping you identify what is slowing it down. |
| e: Last Contentful Paint - This measures how long it takes for the largest, visible part of the webpage, like an image or text, to load. A good "LCP" time is under 2.5 seconds, indicating that users can see the important parts of the webpage quickly. |
Sample interpretation: Using the PageSpeed Performance Report image above as an example, you can see that the website has:
- Slow Last Contentful Paint (LCP) of 5.6s, which means the main content takes too long to load.
- A High Total Blocking Time (TBT) of 220ms indicates that the scripts may be slowing it down.
The LCP and TBT scores contribute more to the lower performance score than the other red/orange metrics.
In the Diagnostics section of the report, you will find the following metrics. (You may need to click on each metric in your report for more details.)
The image above shows sample PageSpeed diagnostic results.
a: Eliminate render-blocking resources - Too many prioritized scripts and styles can slow down what visitors see first on your site. This is tied to the longer Total Blocked Time (TBT) shown above.
Prioritizing improves site speed by ensuring important elements load first, even if the background items load later. While plugins can assist with this, it is advisable to have a professional web developer handle the process. |
i: Properly Size Images - Uploading oversized images that are displayed in similar sizes wastes bandwidth and slows webpage load, so it's best to use appropriately-sized images or WordPress tools for optimization. |
|
b: Last Contentful Paint - This measures how long it takes for the largest, visible part of the webpage, like an image or text, to load. The phases are as follows:
|
j: Ensure text remains visible during webfont load - Using fallback text can enhance loading speed by preventing text from being hidden. If the font-display setting is not configured properly, browsers may conceal text until the web font has finished loading. Developers can improve this process by implementing a fallback font that is displayed initially and then swapped with the final font once it is fully loaded. |
| c: Reduce Initial Server Response Time - This section shows how long the server took to respond.
To speed up your server response time, try using caching, removing unnecessary plugins, picking a faster theme, or switching to Cloud or Dedicated hosting. |
k: Avoid serving legacy JavaScript to modern browsers - Sending old JavaScript to modern browsers adds extra weight and slows loading time. Some themes and plugins add this old code for compatibility, even though most users have modern browsers that don’t require it. By configuring JavaScript tools to deliver only modern code to modern browsers, you can improve loading speed and enhance performance. |
| d: Reduce unused CSS - Too much unused or unnecessary Cascading Style Sheet (CSS) slows the page down. CSS controls the look and layout of a website, but sometimes themes and plugins can load bulky CSS files, not all of which are used. You have to remove or replace plugins, heavy CSS plugins, or use tools to defer or optimize CSS, ensuring that only the needed styles load first. | l: Avoid enormous network payloads - Payload refers to all files, like images, fonts, and scripts, that a webpage sends to the browser. When a webpage loads too much content, it can slow down performance and increase load times, particularly for mobile users. To improve loading speed, optimize image sizes, implement lazy loading for images, and limit the amount of content shown on the initial load. |
| e: Minimize main-thread work - Too many scripts and styles can slow down page loading and responsiveness.
The main thread manages tasks like running scripts, building layouts, and rendering content. If it’s too busy, the page loads slowly and responds poorly, contributing to Total Blocking Time (TBT). This issue is often caused by heavy or unoptimized JavaScript, excessive effects, or complex styles. To improve performance, use fewer or lighter scripts, defer non-essential JavaScript, and simplify the page layout where possible. |
m: Avoid long main-thread tasks - Heavy JavaScript can slow down pages and make them unresponsive. To improve performance, reduce or defer heavy JavaScript, remove unneeded plugins, and lazy-load content when possible. |
| f: Image elements do not have explicit width and height - This section shows that some images lack width and height. If no specified image dimensions are provided, the browser doesn't know how big the image will be while loading, causing layout shifts that eventually affect the CLS score. | n: Minimize third-party usage - Third-party codes are anything loaded from external sources, such as jQuery, galleries, tracking scripts, etc. Extra code from third-party tools can slow down your page. Try to use fewer plugins and load their scripts after the page has mostly loaded. |
| g: Minify CSS - CSS files can sometimes have unnecessary spaces and code. Removing these elements can improve site loading speed. Additionally, themes and plugins may include CSS that isn’t fully optimized. Some plugins, like JetPack Boost, can help minify CSS code. | o: Avoid non-composited animations - Some CSS animations on a page may not be optimized, leading to layout shifts or choppy effects.
Using CSS properties that are meant for animation and are GPU-accelerated can help animations run smoothly. |
| h: Serve static assets with an efficient cache policy - Short cache times lead to unnecessary reloading of static files, slowing down repeat visits, so using a caching plugin or adjusting server settings to set longer cache durations can improve load times. | p: Avoid chaining critical requests - Critical request chains refer to files that must load in a certain order. Slow-loading CSS and JavaScript files, often from plugins and page builders, contribute to the delay. To improve speed, reduce the number of critical files, defer non-essential ones, and optimize loading. |
The Accessibility section of the report shows how easily all users, including those with visual impairments or disabilities, can navigate the site. This is not a full accessibility audit, but it gives a helpful starting point.
The Additional Items to Manually Check section offers tips and suggestions to enhance site usability for everyone.
The images above show sample PageSpeed diagnostic results.
The Best Practices section checks for security and modern coding standards to ensure the site is safe and works well across different browsers. These checks include:
- Protection against cross-site scripting (XSS) attacks
- Using secure connections (HSTS)
- Protecting the site from being embedded in other sites (clickjacking protection)
- Using modern ways to separate content between browsers (COOP)
The image above shows sample PageSpeed diagnostic results.
The last section, SEO, ensures that webpages follow best practices to rank higher in search engines like Google or Bing. Plugins like Yoast can help users improve their SEO easily.
The image above shows sample PageSpeed diagnostic results.
So, what does your Google PageSpeed Insights performance report mean? The performance report is designed to give users a general idea of how to optimize their website's speed and performance. If you receive a poor score in any of the areas we discussed above, you may want to check our tips below.
Tips for Improving Website Speed and Performance
Now that you know how your website is performing, you can address common issues identified by the score and metric results.
- Enable server caching through your Account Manager.
Caching stores data and assets on the server and in the browser to speed up future visits to a website. This way, the server and browser don’t have to search for everything from the beginning each time someone visits the site.
You can manage your site's caching control from your Account Manager's Performance tab.
- Use a CDN (Content Delivery Network) like Cloudflare or SiteLock.
CDN not only helps mask DNS information, but it also encourages faster site speeds by optimizing the delivery of information. Bluehost offers two CDN options: Cloudflare and SiteLock.
You can manage your Cloudflare within your Account Manager's Speed settings.
You can also purchase SiteLock, which has an Advanced Web Application Firewall (WAF)/CDN. This is only available on SiteLock Prevent and Prevent Plus plans. The SiteLock Essentials plan includes a basic CDN.
- Set up Expires Headers and GZip Compression in the .htaccess file.
Enabling Expires Headers and GZip compression helps browsers cache data longer and reduces transferred file sizes. These features are activated by adding specific code to the .htaccess file.
- Delete any unused plugins and keep the remaining ones updated.
One of the best ways to optimize a site is to remove unnecessary plugins. It is also recommended to ensure that your themes and any activated plugins are up-to-date for better performance.
- Optimize images with editing software, such as Photoshop or Gimp, before uploading to WordPress.
Large images mean larger file sizes. Reduce the size of your images before uploading them to WordPress to improve your site's load speed.
You may also try minifying CSS or JavaScript coding, which refers to rewriting the code to reduce the amount of information the server needs to translate. Both practices can be executed with WordPress plugins, but they tend to be more effective when performed manually. For additional assistance with these steps, it may be advisable to consult a web developer.
Summary
PageSpeed Insights is important for improving user experience and SEO. Slow-loading web pages can deter visitors and negatively impact search rankings. Bluehost offers the PageSpeed Insights feature in the Account Manager, which allows you to easily evaluate your website's speed. It gives performance scores for both the mobile and desktop versions, helping to enhance user experience and boost SEO. By understanding PageSpeed Insights scores and detailed reports, you can identify and address performance issues. This article shares tips on using Pagespeed Insights and suggests improvements to increase speed.
If you need further assistance, feel free to contact us via Chat or Phone:
- Chat Support - While on our website, you should see a CHAT bubble in the bottom right-hand corner of the page. Click anywhere on the bubble to begin a chat session.
- Phone Support -
- US: 888-401-4678
- International: +1 801-765-9400
You may also refer to our Knowledge Base articles to help answer common questions and guide you through various setup, configuration, and troubleshooting steps.