Faster loading googlefonts

Sometimes when you use googlefonts, the external/CDN could be the bottleneck (especially if you live in a country where the hop to next country is slow, like in Indonesia). This article give a good tips how to load your page faster. Just replace the $CSS on this snippet to your googlefont's CSS:

<!-- Preemptively warm up the fonts’ origin -->
<link rel="preconnect"
      href="https://fonts.gstatic.com"
      crossorigin />

<!-- Initiate a high-priority, asynchronous fetch for the CSS file. Works in
     most modern browsers -->
<link rel="preload"
      as="style"
      href="$CSS&display=swap" />

<!--  Initiate a low-priority, asynchronous fetch that gets applied to the page
      only after it’s arrived. Works in all browsers with JavaScript enabled. -->
<link rel="stylesheet"
      href="$CSS&display=swap"
      media="print" onload="this.media='all'" />

<!-- In the unlikely event that a visitor has intentionally disabled
     JavaScript, fall back to the original method. The good news is that,
     although this is a render-blocking request, it can still make use of the
     preconnect which makes it marginally faster than the default. -->
<noscript>
  <link rel="stylesheet"
        href="$CSS&display=swap" />
</noscript>

How to Test Speed (and anything else) about your website

There are some tools available to test the speed of your website, for example the built in network tool on your browser. In Chrome you can display it by visiting Menu > More Tools > Developer Tools (or Ctrl+Shift+I) then click on the Network tab, refresh the page, it would show something like this:

For external tools, you can use Pingdom Website Tool. This site could also check DNS, Ping and Traceroute to your hosting server. The speed check interface is quite the same as Chrome's DevTool that you've seen above.

To check broken links, there are some alternatives, one that give the fastest result is BrokenLinkCheck.

Alternatively DeadLinkChecker, but somehow their crawler uses too many wrong method on some links.

To check JavaScripts and Domains your website connected to, you can use URLCheck.

Some other tool to check your XML markup, is the infamous W3C Validator, they also have another tools Link Checker and CSS Validation Service.

To check your site agains search engine (especially Google), you can use Google Webmaster Tool.

Some other tool to check speed and give optimization suggestion are Google's PageSpeed Insight.

Alternatively you can use YSlow, that available via browser's extension or bookmarklet.

Last one, WebPageTest also provide waterfall view of the requested links, just like Mozilla's Firefox Developer Tool (press Ctrl+Shift+C to show it on Firefox).

Well.. that's it, some of the tools available to help you check the speed of your site.