はてなブックマーク  


トップへ戻る
  






総合  




●人気
●新着
  

● IT

● 最新ガジェット  

● 自然科学  

● 経済・金融  

● おもしろ  

● マンガ  

● ゲーム  

● はてなブログ︵総合︶  






一般  




●人気
●新着
  

● 社会ニュース  

● 地域  

● 国際  

● 天気  

● グルメ  

● 映画・音楽  

● スポーツ  

● はてな匿名ダイアリー  






世の中  




●人気
●新着
  

● 新型コロナウイルス  

● 働き方  

● 生き方  

● 地域  

● 医療・ヘルス  

● 教育  

● はてな匿名ダイアリー  






政治と経済  




●人気
●新着
  

● 政治  

● 経済・金融  

● 企業  

● 仕事・就職  

● マーケット  

● 国際  

● はてなブログ︵政治と経済︶  






暮らし  




●人気
●新着
  

● カルチャー・ライフスタイル  

● ファッション  

● 運動・エクササイズ  

● 結婚・子育て  

● 住まい  

● グルメ  

● お金  

● はてなブログ︵暮らし︶  

● 掃除・整理整頓  

● 雑貨  

● 買ってよかったもの  

● 旅行  

● アウトドア  

● 趣味  






学び  




●人気
●新着
  

● 人文科学  

● 社会科学  

● 自然科学  

● 語学  

● ビジネス・経営学  

● デザイン  

● 法律  

● 本・書評  

● 将棋・囲碁  

● はてなブログ︵学び︶  






テクノロジー  




●人気
●新着
  

● IT

● セキュリティ技術  

● はてなブログ︵テクノロジー︶  

● AI・機械学習  

● プログラミング  

● エンジニア  






おもしろ  




●人気
●新着
  

● まとめ  

● ネタ  

● おもしろ  

● これはすごい  

● かわいい  

● 雑学  

● 癒やし  






エンタメ  




●人気
●新着
  

● スポーツ  

● 映画  

● 音楽  

● アイドル  

● 芸能  

● お笑い  

● サッカー  

● 話題の動画  






アニメとゲーム  




●人気
●新着
  

● マンガ  

● Webマンガ  

● ゲーム  

● 任天堂  

● PlayStation  

● アニメ  

● バーチャルYouTuber  

● オタクカルチャー  





● おすすめ  
買ってよかったもの
  


﹃Site-Speed Optimisation – CSS Wizardry﹄



● 人気  
● 新着  
● すべて  











The Three Cs: 🤝 Concatenate, 🗜️ Compress, 🗳️ Cache – CSS Wizardry  

4users  
csswizardry.com  


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


● テクノロジー  
●2023/10/23 14:58
  

●
●
  
















Why Not document.write()? – CSS Wizardry  

10users  
csswizardry.com  


If you’ve ever run a Lighthouse test before, there’s a high chance you’ve seen the audit Avoid document.write(): For users on slow connections, external scripts dynamically injected via `document.write()` can delay page load by tens of seconds. You may have also seen that there’s very little explanation as to why document.write() is so harmful. Well, the short answer is: From a purely performance-


● テクノロジー  
●2023/01/21 09:34
  

●
●
●
●
●
●
  










Optimising Largest Contentful Paint – CSS Wizardry  

3users  
csswizardry.com  


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


● テクノロジー  
●2022/03/29 10:38
  

●
●
  










🧠 ct.css – Let’s take a look inside your <head>  

35users  
csswizardry.com  


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



● テクノロジー  
●2021/09/23 09:20
  

●
●
●
●
●
●
●
  










Site-Speed Topography – CSS Wizardry  

3users  
csswizardry.com  


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


● テクノロジー  
●2020/11/18 16:19
  

●
  










Speed Up Google Fonts – CSS Wizardry  

28users  
csswizardry.com  


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,


● テクノロジー  
●2020/05/21 06:17
  

●
●
●
●
●
●
  










Time to First Byte: What It Is and Why It Matters – CSS Wizardry – Web Performance Optimisation  

4users  
csswizardry.com  


8 August, 2019 Time to First Byte: What It Is and Why It Matters 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 informatio


● テクノロジー  
●2019/10/24 07:36
  

●
●
●
  










Self-Host Your Static Assets – CSS Wizardry  

3users  
csswizardry.com  


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:


● テクノロジー  
●2019/06/03 12:57
  












Cache-Control for Civilians – CSS Wizardry  

22users  
csswizardry.com  


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 Need Some Help? Cache Busting No Cache Busting – style.css Query String – style.css?v=1.2.14 Fingerprint – style.ae3f66.css Implementati



● テクノロジー  
●2019/03/10 16:54
  

●
●
●
●
●
●
  










CSS and Network Performance – CSS Wizardry  

15users  
csswizardry.com  


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



● テクノロジー  
●2018/11/11 09:02
  

●
●
●
●
  










The Three Types of Performance Testing – CSS Wizardry – CSS Architecture, Web Performance Optimisation, and more, by Harry Roberts  

3users  
csswizardry.com  


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



● テクノロジー  
●2018/11/08 20:25
  

●
●
●
●
  










Image Inconsistencies: How and When Browsers Download Images – CSS Wizardry  

4users  
csswizardry.com  


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



● テクノロジー  
●2018/06/12 10:42
  

●
●
  










Finding Dead CSS – CSS Wizardry

14users  
csswizardry.com  


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



● テクノロジー  
●2018/01/19 10:34
  

●
●
●
●
  










Little Things I Like to Do with Git – CSS Wizardry  

10users  
csswizardry.com  


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



● テクノロジー  
●2017/05/24 22:31
  

●
●











Writing Tidy Code – CSS Wizardry  

3users  
csswizardry.com  


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



● テクノロジー  
●2017/05/11 10:32
  

●
  










Base64 Encoding & Performance, Part 1: What’s Up with Base64? – CSS Wizardry  

6users  
csswizardry.com  


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



● テクノロジー  
●2017/02/13 10:20
  

●
●
●
  










Code Smells in CSS Revisited – CSS Wizardry  

16users  
csswizardry.com  


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



● テクノロジー  
●2017/02/08 22:08
  

●
●
  










Ack for CSS Developers – CSS Wizardry  

4users  
csswizardry.com  


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



● テクノロジー  
●2017/01/18 08:35
  

●
●
  










CSS Shorthand Syntax Considered an Anti-Pattern – CSS Wizardry

10users  
csswizardry.com  


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:



● テクノロジー  
●2016/12/11 23:42
  

●
  










Nesting Your BEM? – CSS Wizardry  

10users  
csswizardry.com  


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



● テクノロジー  
●2016/11/29 08:25
  

●
●
  










Improving Perceived Performance with Multiple Background Images – CSS Wizardry  

9users  
csswizardry.com  


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



● テクノロジー  
●2016/10/24 11:18
  

●
●
●
●
●
●
  










Pragmatic, Practical, and Progressive Theming with Custom Properties – CSS Wizardry  

3users  
csswizardry.com  


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



● テクノロジー  
●2016/10/19 20:35
  

●
  










Improving Your CSS with Parker – CSS Wizardry  

6users  
csswizardry.com  


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



● テクノロジー  
●2016/06/02 21:17
  

●
●
  










Managing Typography on Large Apps – CSS Wizardry  

3users  
csswizardry.com  


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



● テクノロジー  
●2016/02/29 11:23
  

●
●
  










BEMIT: Taking the BEM Naming Convention a Step Further – CSS Wizardry  

24users  
csswizardry.com  


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



● テクノロジー  
●2015/08/06 12:01
  

●
●
●
●
●
  










Contextual Styling: UI Components, Nesting, and Implementation Detail – CSS Wizardry  

6users  
csswizardry.com  


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



● テクノロジー  
●2015/06/15 08:42
  

●
●











More Transparent UI Code with Namespaces – CSS Wizardry  

15users  
csswizardry.com  


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



● テクノロジー  
●2015/03/07 16:02
  

●
●











When to use @extend; when to use a mixin – CSS Wizardry  

11users  
csswizardry.com  


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



● テクノロジー  
●2014/11/21 11:57
  

●
●
●
●
  










The Specificity Graph – CSS Wizardry  

5users  
csswizardry.com  


29 October, 2014 The Specificity Graph Written by Harry Roberts on CSS Wizardry. Table of Contents A better shape Addendum – 26 November, 2014 As we all (should) probably know by now, specificity is is one of CSS’ most troublesome features, and is an area that soon becomes hard to manage on projects of any reasonable size. Specificity is a trait best avoided, which is why we don’t use IDs in CSS,



● テクノロジー  
●2014/10/31 12:56
  

●
●
  







次のページ  

























このページはまだ
ブックマークされていません


このページを最初にブックマークしてみませんか？
  

﹃Site-Speed Optimisation – CSS Wizardry﹄の新着エントリーを見る  

 

キーボードショートカット一覧


j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
  
 


はてなブックマーク




●総合
●一般
●世の中
●政治と経済
●暮らし
●学び
  

●テクノロジー
●エンタメ
●アニメとゲーム
●おもしろ
  

●アプリ・拡張機能
●開発ブログ
●ヘルプ
●お問い合わせ
●ガイドライン
●利用規約
●プライバシーポリシー
●利用者情報の外部送信について
  

●ガイドライン
●利用規約
●プライバシーポリシー
●利用者情報の外部送信について
  


公式Twitter




●公式アカウント
●ホットエントリー
  


はてなのサービス



●はてなブログ
●はてなブログPro
●人力検索はてな
●はてなブログ タグ
●はてなニュース
●ソレドコ
  





App Storeからダウンロード
Google Playで手に入れよう


Copyright © 2005-2024 Hatena. All Rights Reserved.
  




設定を変更しましたx