Website Speed ​​Problems: PageSpeed ​​Insights

Website Speed ​​Problems: PageSpeed ​​Insights pixelwork

Website Speed ​​Problems: PageSpeed ​​Insights

Website Speed ​​Problems

Website Speed ​​Problems

Page speed is an important search engine ranking factor you are looking to address, and the search tool Google Insights PageSpeed is a great way to determine how to further optimize your site and avoid errors. website speed errors.

PageSpeed ​​Insights analyzes the page at the URL you specify and provides a score (maximum of 100) along with a list of “fixes” for the issues that are slowing down page speed.

But if you're not a developer or tech-savvy, these suggestions may seem a little overwhelming. This is why I'm simplifying each of the PageSpeed ​​Insights speed fixes.

Website Speed ​​Problems PageSpeed ​​Insights Pt 1

Prioritize visible content

  • The visible content is the part of the page that can be seen without having to scroll or scroll.
  • Insights not only measures the amount of time it takes for the entire page to load, but it also measures the amount of time it takes for above-the-fold content to load.
  • The longer it takes a user to view the content, the more likely they are to leave the page.
  • One way to address this issue is by restructuring the HTML so that the main content is loaded first.
  • Typically your contents/resources will be loaded in the order they are displayed in the HTML code. Therefore, make sure your main content appears before widgets, sidebars, etc.

Remove Render-JavaScript and Above-the-Fold CSS

  • This “error” is telling you that the resources in JavaScript and on your page are forced to load before the rest of the content loads.
  • PageSpeed ​​Insights provides a list of all the CSS and JavaScript files on your page that are blocking content from loading.
  • Google recommends deferring, asynchronous loading, or inlining files. You can find examples of each of these following methods:
    Make JavaScript asynchronous/defer
    inline javascript
    inline css
  • Moving the scripts to the footer is a great option, according to the first step in this article:

Delivers the Cache

  • When a browser loads a web page it has to download all the files in order to display the page.
  • Browser caching helps by storing some of these files in the user's browser.
  • The user's first visit to your site will take a little longer to load, but when they visit the site again or go to a different page, it will load faster because the cached resources are saved and they won't have to load again. , resulting in a decrease in loading time.
  • To enable browser caching, you must add some code to your .htaccess file on your server that specifies what to store and for how long.
  • Google recommends a minimum cache time of one week and preferably up to one year for static assets.

Optimize images

  • This means that the file size of some or all of the images on your page can be reduced further to improve page speed.
  • PageSpeed ​​Insights provides optimized files for both lossy and lossless compressed images.

Lossless compression means that your image can be reconstructed exactly from the compressed file. In other words, the image will appear unchanged.

With lossy compression, image quality will appear reduced.

Enable compression

  • In this case, PageSpeed ​​Insights tells you to enable gzip compression on your web server, which allows the web server to serve smaller files that load faster.
  • Enabling gzip compression differs between servers but usually involves adding some code to the .htaccess file.
  • Find the code or steps to enable compression on your server here.
  • You can use this gzip compression test tool to make sure everything has been implemented correctly.

Minimize Resources: JavaScript, CSS and HTML

  • Minifying involves reducing the size of your JavaScript, CSS or HTML by removing parts of the file that are not necessary for the page to load such as code comments, whitespace and formatting.
  • These are some of the tools that can help you minimize resources:
    HTML Minifier
    Refresh-SF
    CSS Compressor

Avoid redirects on landing pages

  • Redirecting causes visitors to one page to automatically go to another version of the page or another page entirely.
  • Simply put, redirecting makes your pages load slower just as a direct flight is faster than one with stops.
  • Redirects have become a big problem for mobile sites, as many sites must redirect to the mobile version of the landing pages (Example abc.com > m.abc.com).
    The best solution to this problem is to create a responsive landing page that automatically adjusts to all devices instead of a separate mobile page that will require a different URL.
  • Other common causes of redirects are updating to use “www” or not using it and restructuring the site (Example abc.com/resources/blog > com/blog).

In these cases, be sure to update all internal links on the page to the new final URL.

Reduce server response time

  • Server response time is the amount of time it takes for the server to respond to a browser's request for a page to load.
  • Google recommends reducing server response time to less than 200 ms.
  • High traffic, resource usage, and many other factors can contribute to a slow server response.
  • By implementing all the practices mentioned above, you will put less pressure on your server, which improves server response time.
  • Upgrading to hosting that can better support your traffic volume can also provide a significant improvement.

You can find the best web hosting for you if you learn about the different types that exist.

We hope you now have a better idea of ​​what it takes to improve page speed. In the second part of the “PageSpeed ​​Insight” series, I'm going to go over how to interpret mobile user experience fixes.