![]() ![]() Under "Throttling" Select "Simulated Slow 4G, 4x CPU slowdown".In the developer tools, navigate to the "Audits" tab.I use Python's rver: python -m rver 8000.Launch an HTTP server in the same directory.Copy the above HTML file to a directory on your machine, and name it index.html. ![]() This audit uses Lighthouse, the same tool that powers PageSpeed Insights. To test how this Google Font impacts page load performance, I used the performance audit in Chromium's DevTools. Because this HTML contains almost nothing, it will give us a good sense of how much the Google Font is impacting our page loads. This webpage doesn't look like much, and that's the idea. That's just what I did for this HTML document: When you find a funky font at Google Fonts and you're ready to use it, the instructions look a little like this:Įasy enough! Add that element to the of your website, and you're ready to use your selected typeface in your CSS font-family rules. Let's start by seeing why Google Fonts slows down page loads, then looking at how we can limit that performance penalty. So, how can a person use Google Fonts without sacrificing too much in page load speed? This post will answer that question, and I hope it will also serve as a blueprint for how to research and improve page load times in general. Google's PageSpeed Insights ranks website page load times out of 100, and 100/100 is always my goal. If you've read my post about building this blog with Pelican, you'll know that I like quick page loads. Instead of a loading all web resources from your own server, adding a Google Font means that your website now depends on font files from Google's servers, too. That nice-looking font comes at a price, however: page load times.Īdding a custom Google Font, instead of using an OS-native font stack like Bootstrap does, inevitably increases page load times. It's easy-to-read and has interesting italics, which makes it a good fit for a Markdown-focused website. The font I chose is IBM Plex Mono, a monospaced font from IBM. (Check out a pre-launch version at Table to Markdown!) I wanted the site to be minimalist but not too boring, so I opted to use a custom font from Google Fonts to add one piece of flair. Recently, I started working on a small web application that converts tables copied from spreadsheets and websites into well-formatted Markdown tables. Thanks to some helpful comments on Reddit, I've updated this post with more information about the Google Fonts stylesheet's features, information about the drawbacks of this method, and alternate ways of loading Google Fonts. Improve Page Speed when Using Google Fonts ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |