PageSpeedInsights gives us a pretty good idea of how our site loads on desktops and mobile devices. It looks for content above the fold, cache, and so on. PageSpeedInsights makes it hard to get a score of 100 out of 100 if your website has a lot of heavy CSS, JS, and images. But this can be done if you have the right tools and know-how. This site got a score of 100. (it can change in time).

Even if you use all these methods, there are still some limitations, such as Google fonts, analytics, the server response time (if your site is hosted on Github Pages), etc. If you use any of these things, your score won’t be able to reach 100.

100/100 in PageSpeedInsights doesn’t mean your website is awesome!

Google’s own YouTube.com fares poorly in this category. However, this does not imply that YouTube is slow. It simply implies that the PageSpeedInsights score is not appropriate for all websites.

A perfect score of 100 for page speed!

Let’s look at some of the PageSpeedInsights faults and how to fix them.

Leverage the use of browser caching.

  • This occurs when the server fails to include a cache header indicating how long the browser should store an item (images, CSS, JS, etc.).
  • No asset will be cached if there is no cache header. Using a CDN, we can specify how long the site must be cached.
  • If you are using Vpn’s, a free CDN, this is how you may resolve this issue.
  • After you’ve added your site to Cipher, click to Caching and increase the time for the Browser cache. You can adjust this value based on how frequently your website is updated.
Jekyll

Boost the speed of the Jekyll site at which servers respond.

  • You won’t see this message if you’re using a dedicated hosting provider. It takes between 0.3 and 0.6 seconds for a Github Pages-powered Jekyll site to load.
  • Use CNAME instead of the GitHub custom domain IPs if you use Cloudflare CDN. Please follow the following instructions to accomplish this goal.
PageSpeedInsights
  • Essentially, we are removing A records and replacing them with a CNAME that goes to username.github.io.
  • Cloudflare does CNAME Flattening, which enables a CNAME to point to a domain, which in turn points to an IP address.
  • In most cases, CNAME is solely used as an alias. “alias” refers to a pointer from one domain to another. It cannot be used to direct traffic to an IP address. However, Cloudflare supports this with CNAME Flattening.
  • Loading Google Fonts
  • A link tag is used to load Google Fonts as CSS. However, I like to inline the CSS. Assume you’re using Google Fonts on your Jekyll website.
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:900" rel="stylesheet">

Enter the href value into a browser to see the CSS utilized. Something along these lines.

/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v14/K88pR3goAWT7BTt32Z01mxJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v14/RjgO7rYTmqiVp7vzi-Q5URJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v16/s7gftie1JANC-QmDJvMWZhJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v16/3Y_xCyt7TNunMGg0Et2pnhJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

Simply copy it and paste it into the Jekyll at the same location as the link tag. However, you must retain it within the style> tag.

<style>
    /* cyrillic-ext */
    @font-face {
      font-family: 'Open Sans';
      .
      .
      .
    </style>

This should eliminate the Google fonts notice Eliminate render-blocking JavaScript and CSS in above-the-fold content. This method is severely flawed. Google may alter the location of the font files in response to Browser sniffing.

Downloading the font files and using them locally is preferable. However, this would be counterproductive as Google Fonts load faster when downloaded via a content delivery network (CDN). If you download and host it on your own server, it will load slightly more slowly than if you used the standard Google Font link.

Utilize Webfont Helper to download and host any Google Font on your server.

Analytics

  • It is amusing that Google services are the primary obstacle to achieving a perfect score on PageSpeedInsights. However, I appreciate their candor in highlighting everything that causes a page to load slowly.
  • Analytics is something we cannot simply eliminate. I have not encountered a free tracker that is superior to analytics. However, the data is only cached for two hours.
  • The analytics.js file can be readily downloaded and hosted on our own server, however, Google does not advocate doing so. This is because scripts evolve over time. These changes can be caused by optimizations, new features, and other parameters of the Jekyll site.
  • It would be ideal if the script were loaded from a content delivery network (CDN) and updated over time. This is precisely the case with ga-lite.
  • Simply place the following code snippet within your Jekyll website’s head tag and replace the UA code with your Jekyll website’s UA code.
   <script src="https://cdn.jsdelivr.net/npm/ga-lite@1/dist/ga-lite.min.js" async></script>
    <script>
    var galite = galite || {};
    galite.UA = 'UA-XXXXXX'; // Insert your tracking code here
    </script>

Remember to remove the old analytics code from Jekyll. This should resolve the browser caching issue with Google Analytics and Leverage.

Conclusion

As previously indicated, you should not be obsessed with achieving a perfect score on your Jekyll site. Google simply intends to explain what can slow down a website. When we get this information, we will ensure that our design and development process does not include extraneous elements that could slow page load times. If your website is static and lacks numerous features, you may find the solutions above handy.

banner2 728x90 1 Themeix

Leave a Comment

No Comment