Performance

Avoiding The Pitfalls Of Automatically Inlined Code #article - “Overusing inline CSS or JS code, as opposed to serving code through static resources, can harm the site’s performance. In this article, we will learn how to load dynamic code through static files instead, avoiding the drawbacks of too much inline code.” #performance #caching #wordpress

BundlePhobia #webapp - "find the cost of adding a npm package to your bundle"

Falco - "an Open Source WebPageTest runner"

GoogleChrome/Lighthouse - "Automated auditing, performance metrics, and best practices for the web."

ImageOptim #software - "ImageOptim makes images load faster. Removes bloated metadata. Saves disk space & bandwidth by compressing images without losing quality."

Links to cross-origin destinations are unsafe #article - "When you open another page using target="_blank", the other page may run on the same process as your page, unless Site Isolation is enabled. If the other page is running a lot of JavaScript, your page's performance may also suffer. See The Performance Benefits of rel=noopener."

The performance benefits of rel=noopener #article - "If you have links to another origin, you should use rel="noopener", especially if they open in a new tab/window."

TracerBench - "Controlled Performance Benchmarking Tool." Built by LinkedIn. Open source. GitHub action.

WebPageTest - "Run a free website speed test from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds. You can run simple tests or perform advanced testing including multi-step transactions, video capture, content blocking and much more. Your results will provide rich diagnostic information including resource loading waterfall charts, Page Speed optimization checks and suggestions for improvements."

Your first performance budget with Lighthouse #article - "Until recently, I also hadn't setup an official performance budget and enforced it. This isn’t to say that I never did performance audits. I frequently use tools like PageSpeed Insights and take the feedback to make improvements. But what I had never done was set a list of metrics that I needed the site to meet, and enforce them using some automated tool."

Fonts

Controlling Font Performance with font-display #article - "Deciding the behavior for a web font as it is loading can be an important performance tuning technique. The new font-display descriptor for @font-face lets developers decide how their web fonts will render (or fallback), depending on how long it takes for them to load."

Google Fonts and font-display #article - "The font-display descriptor in @font-face blocks is really great. It goes a long way, all by itself, for improving the perceived performance of web font loading. Loading web fonts is tricky stuff and having a tool like this that works as well as it does is a big deal for the web. It's such a big deal that Google's own Pagespeed Insights / Lighthouse will ding you for not using it. A cruel irony, as their own Google Fonts (easily the most-used repository of custom fonts on the web) don't offer any way to use font-display."

How to Load Web Fonts in 2019 🎆#video - "After a lot of experimentation I've come across my preferred way of loading web fonts. I have balanced ease of use, i.e. how to implement, with performance."