サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
衆院選
csswizardry.com
WebKit have recently announced their intent to implement the blocking=render attribute for <script> and <style> elements, bringing them in line with support already available in Blink and generally positive sentiment in Firefox. The blocking=render attribute allows developers to explicitly mark a resource as render blocking, but… why on earth would you want to do that?! The short answer is: genera
I began writing this article in early July 2023 but began to feel a little underwhelmed by it and so left it unfinished. However, after recent and renewed discussions around the relevance and usefulness of build steps, I decided to dust it off and get it finished. Let’s go! When serving and storing files on the web, there are a number of different things we need to take into consideration in order
10 January, 2023 Why Not document.write()? Written by Harry Roberts on CSS Wizardry. Table of Contents What Makes Scripts Slow? The Preload Scanner document.write() Hides Files From the Preload Scanner What About Async Snippets? document.write() Executes Synchronously Is It All Bad? Early document.write() Late document.write() It Gets Worse… Avoid document.write() If you’ve ever run a Lighthouse t
28 March, 2022 Optimising Largest Contentful Paint Written by Harry Roberts on CSS Wizardry. Table of Contents Solve Everything Beforehand Optimise Your LCP Candidate Avoid Image-Based LCPs Use the Best Candidate Demos <img> Elements <picture> and <source /> <image> in <svg> <video> Elements’ poster Attribute background-image: url(); Getting Around background-image Issues Summary Don’t Shoot Yours
Your <head> is the single biggest render-blocking part of your page—ensuring it is well-formed is critical. ct.css is a diagnostic CSS snippet that exposes potential performance issues in your page’s <head> tags. View demo View source View conference talk (full context) Drag and drop the following link to your bookmarks bar (or click for simple demo): ct.css. @csswizardry
3 November, 2020 Site-Speed Topography Written by Harry Roberts on CSS Wizardry. Table of Contents Identify Page Types Gathering Data Visualising the Data Building the Map Final Word N.B. On 6 June, 2023, I published an updated version of this article. I would encourage you to read Site-Speed Topography Remapped after this. A couple of years ago, my first few days on a new web performance project
19 May, 2020 Speed Up Google Fonts Written by Harry Roberts on CSS Wizardry. Table of Contents Testing Default/Legacy font-display: swap; Async CSS preload preconnect Bonus: font-display: optional; Comparisons and Visualisations Findings Google Fonts Async Snippet Ten-Second Version: If you really can’t be bothered going to all of the effort outlined in this post, there is a super rough-and-ready,
8 August, 2019 Time to First Byte: What It Is and How to Improve It Written by Harry Roberts on CSS Wizardry. Table of Contents What is TTFB? Demystifying TTFB I’m working on a client project at the moment and, as they’re an ecommerce site, there are a lot of facets of performance I’m keen to look into for them: load times are a good start, start render is key for customers who want to see informa
31 May, 2019 Self-Host Your Static Assets Written by Harry Roberts on CSS Wizardry. Table of Contents What Am I Talking About? Risk: Slowdowns and Outages code.jquery.com Outage Risk: Service Shutdowns Risk: Security Vulnerabilities Mitigation: Subresource Integrity Penalty: Network Negotiation Mitigation: preconnect Penalty: Loss of Prioritisation Penalty: Caching Myth: Cross-Domain Caching Myth:
4 March, 2019 Cache-Control for Civilians Written by Harry Roberts on CSS Wizardry. Table of Contents Cache-Control public and private max-age s-maxage no-store no-cache must-revalidate proxy-revalidate immutable stale-while-revalidate stale-if-error no-transform Cache Busting No Cache Busting – style.css Query String – style.css?v=1.2.14 Fingerprint – style.ae3f66.css Implementation Detail Clear-
9 November, 2018 CSS and Network Performance Written by Harry Roberts on CSS Wizardry. Table of Contents What’s the Big Problem? Employ Critical CSS Split Your Media Types Avoid @import in CSS Files Beware @import in HTML Firefox and IE/Edge: Place @import before JS and CSS in HTML Blink and WebKit: Wrap @import URLs in Quotes in HTML Don’t Place <link rel="stylesheet" /> Before Async Snippets Pla
27 October, 2018 The Three Types of Performance Testing Written by Harry Roberts on CSS Wizardry. Table of Contents Proactive Reactive Passive What This Means for Developers What This Means for the Business A lot of companies—even if they are aware that performance is key to their business—are often unsure of how, when, or where performance testing sits within their development lifecycle. To make
11 June, 2018 Image Inconsistencies: How and When Browsers Download Images Written by Harry Roberts on CSS Wizardry. Table of Contents Background background-image What I Would Expect What Actually Happens Chrome (v67.0.3396.79) Safari (v11.1 (13605.1.33.1.4)) Firefox (v60.0.1) Opera (v53.0.2907.68) Edge (v17.17134) Summary Verdict <img /> What I Would Expect What Actually Happens Chrome Safari Fir
17 January, 2018 Finding Dead CSS Written by Harry Roberts on CSS Wizardry. During a performance workshop I was running this week, I was reminded of a technique for finding dead CSS on a live site. Note that I’m purposely not using the phrase ‘unused CSS’, but ‘dead CSS’—the specific scenario I’m describing looks a little like this: Imagine you have a large, long-running project that contains hund
23 May, 2017 Little Things I Like to Do with Git Written by Harry Roberts on CSS Wizardry. Table of Contents Leaderboards Praise People Hide Whitespace Noise Show Changed Words Instead of Whole Lines See Which Branches You Recently Worked On See What Everyone’s Been Getting Up To Remind Yourself What You’ve Been Up To Today’s Work Generate a Changelog Check Which Changes You’re About to Pull Revie
10 May, 2017 Writing Tidy Code Written by Harry Roberts on CSS Wizardry. Table of Contents What Is Tidy Code? Whitespace Whitespace Can Be Semantic Comments Invisibles Automation EditorConfig Git Templates Closing My friend Tom recently gave an excellent talk titled Writing Readable Code. It’s only 15 minutes long, and is packed full of great little tips and pearls of wisdom. I’d highly recommend
12 February, 2017 Base64 Encoding & Performance, Part 1: What’s Up with Base64? Written by Harry Roberts on CSS Wizardry. Table of Contents Let’s Look at Some Code Gzip Saves… …sometimes So Why Is Base64 So Bad? We Need to Talk About Images And We Need to Talk About Fonts And We Need to Talk About Caching Data Talks This is the first in a two-part post. Read Part 2. Prominent performance advice of
8 February, 2017 Code Smells in CSS Revisited Written by Harry Roberts on CSS Wizardry. Table of Contents @extend String Concatenation for Classes Background Shorthand Key Selector Appearing More Than Once A Class Appearing in Another Component’s File BEM Mixes CSS @import Way back in 2012, I wrote a post about potential CSS anti-patterns called Code Smells in CSS. Looking back on that piece, I st
17 January, 2017 Ack for CSS Developers Written by Harry Roberts on CSS Wizardry. Table of Contents Installing and Configuring .ackrc A Note on Regex Find Decimal Pixel Values Find IDs Background Shorthand Find Unitted Zeroes Ack is a powerful and very user-friendly alternative to grep. Designed for programmers, it’s purpose-built to run searches over source code. By default it will ignore your .g
12 December, 2016 CSS Shorthand Syntax Considered an Anti-Pattern Written by Harry Roberts on CSS Wizardry. There’s a very small but surprisingly significant (and even more surprisingly frequent) issue I spot a lot in other peoples’ code, either when working directly with it, refactoring it, or auditing it: the use of shorthand syntax in CSS. Typically we would view shorthand syntax as a benefit:
28 November, 2016 Nesting Your BEM? Written by Harry Roberts on CSS Wizardry. Table of Contents Nesting in CSS Specificity Chain the First Class Simplifying with Sass Practical Upshot Downsides Use Cases To Use or Not to Use? Let me please start this post by saying that this is not a recommendation or new ‘best practice’. This is me thinking out loud. I’m a huge fan and proponent of BEM, and have
23 October, 2016 Improving Perceived Performance with Multiple Background Images Written by Harry Roberts on CSS Wizardry. Table of Contents CSS Gradients and Multiple Backgrounds Making the Approximation Practicality Update 2016-11-11 I’m on a train right now, which means the wifi is awful. A lot of sites are refusing to load at all, and those that do have lots of images missing, leaving big blan
10 October, 2016 Pragmatic, Practical, and Progressive Theming with Custom Properties Written by Harry Roberts on CSS Wizardry. Table of Contents Demo What Do We Talk About When We Talk About Theming? Custom Properties Inline style Blocks Fallbacks @supports All Together Tidying It Up Final Word In my work, I come up against the task of theming UIs quite frequently. So much so, in fact, that last
1 June, 2016 Improving Your CSS with Parker Written by Harry Roberts on CSS Wizardry. Table of Contents Total Rules, Selectors, Identifiers, Declarations Selectors Per Rule Identifiers Per Selector Specificity Per Selector Total ID Selectors Total Unique Colors Total Important Keywords Practical Usage The Worst Offender Anomalous Data Parker is an absolutely fantastic, beautifully simple static an
21 February, 2016 Managing Typography on Large Apps Written by Harry Roberts on CSS Wizardry. Table of Contents Proposal I’ve written before about managing typographical styles across larger projects, but an issue that I still see clients continually coming up against is that of specifically managing their headings across larger and more complex apps. The problem stems from the styling of the defa
5 August, 2015 BEMIT: Taking the BEM Naming Convention a Step Further Written by Harry Roberts on CSS Wizardry. Table of Contents Namespaces Responsive Suffixes Healthchecks Final Word Anybody who’s followed me or my work for any length of time will no doubt know that I’m a huge proponent of the BEM naming convention. What I’m about to talk about in this post is not an alternative or different nam
13 June, 2015 Contextual Styling: UI Components, Nesting, and Implementation Detail Written by Harry Roberts on CSS Wizardry. Table of Contents Implementation Detail Nesting The Good The Bad Utility Classes The Good The Bad One Stateful Class The Good The Bad The Best Solution The Takeaway With the recent move toward componentised UIs—that is, instead of building monolithic, page-based websites, w
6 March, 2015 More Transparent UI Code with Namespaces Written by Harry Roberts on CSS Wizardry. Table of Contents The Namespaces Object Namespaces: o- Component Namespaces: c- Utility Namespaces: u- Theme Namespaces: t- Scope Namespaces: s- Stateful Namespaces: is-/has- Hack Namespaces: _ JavaScript Namespaces: js- QA Namespaces: qa- Handy Side Effects Detecting Namespaces Finding (In)valid Class
20 November, 2014 When to use @extend; when to use a mixin Written by Harry Roberts on CSS Wizardry. Table of Contents When to use @extend When to use a mixin tl;dr tl;dr;tl;dr This is a question I get asked a lot by my clients: When should we use a mixin, and when should we use @extend? There’s an old rule of thumb which states that mixins without arguments are bad—that mixins which just duplicat
次のページ
このページを最初にブックマークしてみませんか？
『Site-Speed Optimisation – CSS Wizardry』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
