SlideShare a Scribd company logo

5 Mistakes of Massive CSS

Nicole Sullivan and Stoyan Stefanov discuss their work optimizing CSS at Facebook and Yahoo!, As well as the state of CSS optimizations in the Alexa Top 1000 websites. What a mess! From Velocity Conference and Texas-Javascript.

1 of 92
TOP 5 MISTAKES OF
                            MASSIVE CSS!

                            Nicole Sullivan & Stoyan Stefanov
Thursday, June 24, 2010
FIND US AT...


                           @stubbornella
                          @stoyanstefanov



Thursday, June 24, 2010
WHY OPTIMIZE CSS?


    • It blocks progressive rendering
     
 test: http://www.phpied.com/files/css-loading/table.php
    • It’s verbose (property value pairs cannot be minified like JS)
     
             text-decoration: underline
 != td: u


Thursday, June 24, 2010
TOP 1000 STUDY


    1. Grab top Alexa sites
    2. Start Fiddler
    3. Load each site
    4. Export from Fiddler



Thursday, June 24, 2010
<?php

        $file = file('alexa.txt');

        foreach ($file as $url) {

                  launch($url);

        }

        function launch($url) {

                  try {

                          $ie = new COM("InternetExplorer.Application");

                          $ie->Visible = true;

                          $ie->Navigate2($url);

                          while ($ie->ReadyState != 4) sleep(1);

                          $ie->Quit();

                  } catch (Exception $e) {}

        }

        ?>
Thursday, June 24, 2010
42% DON’T GZIP CSS




Thursday, June 24, 2010

Recommended

Unobtrusive CSS
Unobtrusive CSSUnobtrusive CSS
Unobtrusive CSSJohn Hwang
 
Continuous Integration Testing for Plone Using Hudson
Continuous Integration Testing for Plone Using HudsonContinuous Integration Testing for Plone Using Hudson
Continuous Integration Testing for Plone Using HudsonEric Steele
 
Swedish GLAM:s and Wikipedia
Swedish GLAM:s and WikipediaSwedish GLAM:s and Wikipedia
Swedish GLAM:s and WikipediaKajsa Hartig
 
Progressive Downloads and Rendering
Progressive Downloads and RenderingProgressive Downloads and Rendering
Progressive Downloads and RenderingStoyan Stefanov
 
JavaScript is everywhere
JavaScript is everywhereJavaScript is everywhere
JavaScript is everywhereStoyan Stefanov
 
JavaScript for PHP developers
JavaScript for PHP developersJavaScript for PHP developers
JavaScript for PHP developersStoyan Stefanov
 

More Related Content

Viewers also liked

Building the Media Block in ReactJS
Building the Media Block in ReactJS Building the Media Block in ReactJS
Building the Media Block in ReactJS Nicole Sullivan
 
The World of Social Objects
The World of Social ObjectsThe World of Social Objects
The World of Social ObjectsJESS3
 
Mapping History on Open Street Map
Mapping History on Open Street MapMapping History on Open Street Map
Mapping History on Open Street Mapfrankieroberto
 
Automating your workflow with Gulp.js
Automating your workflow with Gulp.jsAutomating your workflow with Gulp.js
Automating your workflow with Gulp.jsBo-Yi Wu
 
The Real Life Social Network v2
The Real Life Social Network v2The Real Life Social Network v2
The Real Life Social Network v2Paul Adams
 
Spring Web Views
Spring Web ViewsSpring Web Views
Spring Web ViewsEmprovise
 
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScriptWeb Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScriptbrucelawson
 
HTML5 Who what where when why how
HTML5 Who what where when why howHTML5 Who what where when why how
HTML5 Who what where when why howbrucelawson
 
The Home of the Future: CSS Layouts
The Home of the Future: CSS LayoutsThe Home of the Future: CSS Layouts
The Home of the Future: CSS LayoutsPeter Gasston
 
Leveraging HTML 5.0
Leveraging HTML 5.0Leveraging HTML 5.0
Leveraging HTML 5.0brucelawson
 
Open Educational Resources Initiative in Macedonia
Open Educational Resources Initiative in MacedoniaOpen Educational Resources Initiative in Macedonia
Open Educational Resources Initiative in MacedoniaIrina (Shumadieva) Micov
 
Testing The Legacy: Making Existing Applications Testable Without Epic Efforts
Testing The Legacy: Making Existing Applications Testable Without Epic EffortsTesting The Legacy: Making Existing Applications Testable Without Epic Efforts
Testing The Legacy: Making Existing Applications Testable Without Epic EffortsAlex Leonov
 
Does agile mean having even less time for testing?!
Does agile mean having even less time for testing?!Does agile mean having even less time for testing?!
Does agile mean having even less time for testing?!Dr. Alexander Schwartz
 
Our Best Practices Are Killing Us
Our Best Practices Are Killing UsOur Best Practices Are Killing Us
Our Best Practices Are Killing UsNicole Sullivan
 
Bruce Lawson: Progressive Web Apps: the future of Apps
Bruce Lawson: Progressive Web Apps: the future of AppsBruce Lawson: Progressive Web Apps: the future of Apps
Bruce Lawson: Progressive Web Apps: the future of Appsbrucelawson
 

Viewers also liked (20)

Building the Media Block in ReactJS
Building the Media Block in ReactJS Building the Media Block in ReactJS
Building the Media Block in ReactJS
 
Frameworks
FrameworksFrameworks
Frameworks
 
The World of Social Objects
The World of Social ObjectsThe World of Social Objects
The World of Social Objects
 
The jQuery Divide
The jQuery DivideThe jQuery Divide
The jQuery Divide
 
Mapping History on Open Street Map
Mapping History on Open Street MapMapping History on Open Street Map
Mapping History on Open Street Map
 
Automating your workflow with Gulp.js
Automating your workflow with Gulp.jsAutomating your workflow with Gulp.js
Automating your workflow with Gulp.js
 
Object Oriented CSS
Object Oriented CSSObject Oriented CSS
Object Oriented CSS
 
The Real Life Social Network v2
The Real Life Social Network v2The Real Life Social Network v2
The Real Life Social Network v2
 
CSS Wish List @JSConf
CSS Wish List @JSConfCSS Wish List @JSConf
CSS Wish List @JSConf
 
Spring Web Views
Spring Web ViewsSpring Web Views
Spring Web Views
 
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScriptWeb Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
 
HTML5 Who what where when why how
HTML5 Who what where when why howHTML5 Who what where when why how
HTML5 Who what where when why how
 
The Home of the Future: CSS Layouts
The Home of the Future: CSS LayoutsThe Home of the Future: CSS Layouts
The Home of the Future: CSS Layouts
 
Leveraging HTML 5.0
Leveraging HTML 5.0Leveraging HTML 5.0
Leveraging HTML 5.0
 
Don't feed the trolls
Don't feed the trollsDon't feed the trolls
Don't feed the trolls
 
Open Educational Resources Initiative in Macedonia
Open Educational Resources Initiative in MacedoniaOpen Educational Resources Initiative in Macedonia
Open Educational Resources Initiative in Macedonia
 
Testing The Legacy: Making Existing Applications Testable Without Epic Efforts
Testing The Legacy: Making Existing Applications Testable Without Epic EffortsTesting The Legacy: Making Existing Applications Testable Without Epic Efforts
Testing The Legacy: Making Existing Applications Testable Without Epic Efforts
 
Does agile mean having even less time for testing?!
Does agile mean having even less time for testing?!Does agile mean having even less time for testing?!
Does agile mean having even less time for testing?!
 
Our Best Practices Are Killing Us
Our Best Practices Are Killing UsOur Best Practices Are Killing Us
Our Best Practices Are Killing Us
 
Bruce Lawson: Progressive Web Apps: the future of Apps
Bruce Lawson: Progressive Web Apps: the future of AppsBruce Lawson: Progressive Web Apps: the future of Apps
Bruce Lawson: Progressive Web Apps: the future of Apps
 

Similar to 5 Mistakes of Massive CSS

Designing a One-Size-Fits-All University Web Template, and other Impossible B...
Designing a One-Size-Fits-All University Web Template, and other Impossible B...Designing a One-Size-Fits-All University Web Template, and other Impossible B...
Designing a One-Size-Fits-All University Web Template, and other Impossible B...thisisdrew
 
From where OpenVBX came from to how we open sourced it
From where OpenVBX came from to how we open sourced itFrom where OpenVBX came from to how we open sourced it
From where OpenVBX came from to how we open sourced itminddog
 
20100627 sobe2
20100627 sobe220100627 sobe2
20100627 sobe2Shu Shimbo
 
Plone Conference 2010 – Where we go from here
Plone Conference 2010 – Where we go from herePlone Conference 2010 – Where we go from here
Plone Conference 2010 – Where we go from hereEric Steele
 
Designing With Type :: FontConf 2010
Designing With Type :: FontConf 2010Designing With Type :: FontConf 2010
Designing With Type :: FontConf 2010Kyle Meyer
 
HTML5/CSS3 @ Baidu
HTML5/CSS3 @ BaiduHTML5/CSS3 @ Baidu
HTML5/CSS3 @ BaiduZi Bin Cheah
 
From AARGH to AAAHH: Web Content Strategy
From AARGH to AAAHH: Web Content StrategyFrom AARGH to AAAHH: Web Content Strategy
From AARGH to AAAHH: Web Content Strategymicajobe
 
FITC 2010 Slides
FITC 2010 SlidesFITC 2010 Slides
FITC 2010 Slidesjkosoy
 

Similar to 5 Mistakes of Massive CSS (9)

Designing a One-Size-Fits-All University Web Template, and other Impossible B...
Designing a One-Size-Fits-All University Web Template, and other Impossible B...Designing a One-Size-Fits-All University Web Template, and other Impossible B...
Designing a One-Size-Fits-All University Web Template, and other Impossible B...
 
44275732 chef
44275732 chef44275732 chef
44275732 chef
 
From where OpenVBX came from to how we open sourced it
From where OpenVBX came from to how we open sourced itFrom where OpenVBX came from to how we open sourced it
From where OpenVBX came from to how we open sourced it
 
20100627 sobe2
20100627 sobe220100627 sobe2
20100627 sobe2
 
Plone Conference 2010 – Where we go from here
Plone Conference 2010 – Where we go from herePlone Conference 2010 – Where we go from here
Plone Conference 2010 – Where we go from here
 
Designing With Type :: FontConf 2010
Designing With Type :: FontConf 2010Designing With Type :: FontConf 2010
Designing With Type :: FontConf 2010
 
HTML5/CSS3 @ Baidu
HTML5/CSS3 @ BaiduHTML5/CSS3 @ Baidu
HTML5/CSS3 @ Baidu
 
From AARGH to AAAHH: Web Content Strategy
From AARGH to AAAHH: Web Content StrategyFrom AARGH to AAAHH: Web Content Strategy
From AARGH to AAAHH: Web Content Strategy
 
FITC 2010 Slides
FITC 2010 SlidesFITC 2010 Slides
FITC 2010 Slides
 

More from Nicole Sullivan

Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve PerformanceCreating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve PerformanceNicole Sullivan
 
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...Nicole Sullivan
 
The Fast And The Fabulous
The Fast And The FabulousThe Fast And The Fabulous
The Fast And The FabulousNicole Sullivan
 
What is Object Oriented CSS?
What is Object Oriented CSS?What is Object Oriented CSS?
What is Object Oriented CSS?Nicole Sullivan
 
Pourquoi la performance?
Pourquoi la performance?Pourquoi la performance?
Pourquoi la performance?Nicole Sullivan
 
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance7 Habits of Exceptional Performance
7 Habits of Exceptional PerformanceNicole Sullivan
 

More from Nicole Sullivan (11)

Why are you here?
Why are you here?Why are you here?
Why are you here?
 
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve PerformanceCreating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve Performance
 
CSS Power Tools
CSS Power ToolsCSS Power Tools
CSS Power Tools
 
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
 
Taming CSS Selectors
Taming CSS SelectorsTaming CSS Selectors
Taming CSS Selectors
 
The Fast And The Fabulous
The Fast And The FabulousThe Fast And The Fabulous
The Fast And The Fabulous
 
What is Object Oriented CSS?
What is Object Oriented CSS?What is Object Oriented CSS?
What is Object Oriented CSS?
 
Pourquoi la performance?
Pourquoi la performance?Pourquoi la performance?
Pourquoi la performance?
 
Design Fast Websites
Design Fast WebsitesDesign Fast Websites
Design Fast Websites
 
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance7 Habits of Exceptional Performance
7 Habits of Exceptional Performance
 
After YSlow "A"
After YSlow "A"After YSlow "A"
After YSlow "A"
 

Recently uploaded

TrustArc Webinar - TrustArc's Latest AI Innovations
TrustArc Webinar - TrustArc's Latest AI InnovationsTrustArc Webinar - TrustArc's Latest AI Innovations
TrustArc Webinar - TrustArc's Latest AI InnovationsTrustArc
 
ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...
ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...
ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...SearchNorwich
 
Mastering Play Store App Listing and Optimization
Mastering Play Store App Listing and OptimizationMastering Play Store App Listing and Optimization
Mastering Play Store App Listing and OptimizationAppsthentic Technology
 
CloudStack Tooling Ecosystem – Kiran Chavala, ShapeBlue
CloudStack Tooling Ecosystem – Kiran Chavala, ShapeBlueCloudStack Tooling Ecosystem – Kiran Chavala, ShapeBlue
CloudStack Tooling Ecosystem – Kiran Chavala, ShapeBlueShapeBlue
 
eXtended Reality(XR) Basic introductions
eXtended Reality(XR) Basic introductionseXtended Reality(XR) Basic introductions
eXtended Reality(XR) Basic introductionsElanthirayan Madhavan
 
Python For Kids - Sách Lập trình cho trẻ em
Python For Kids - Sách Lập trình cho trẻ emPython For Kids - Sách Lập trình cho trẻ em
Python For Kids - Sách Lập trình cho trẻ emNho Vĩnh
 
GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...
GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...
GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...James Anderson
 
AI improves software testing to be more fault tolerant, focused and efficient
AI improves software testing to be more fault tolerant, focused and efficientAI improves software testing to be more fault tolerant, focused and efficient
AI improves software testing to be more fault tolerant, focused and efficientKari Kakkonen
 
What’s New in CloudStack 4.19, Abhishek Kumar, Release Manager Apache CloudSt...
What’s New in CloudStack 4.19, Abhishek Kumar, Release Manager Apache CloudSt...What’s New in CloudStack 4.19, Abhishek Kumar, Release Manager Apache CloudSt...
What’s New in CloudStack 4.19, Abhishek Kumar, Release Manager Apache CloudSt...ShapeBlue
 
Establishing data sharing standards to promote global industry development
Establishing data sharing standards to promote global industry developmentEstablishing data sharing standards to promote global industry development
Establishing data sharing standards to promote global industry developmentThorsten Huelsmann
 
Centralized TLS Certificates Management Using Vault PKI + Cert-Manager
Centralized TLS Certificates Management Using Vault PKI + Cert-ManagerCentralized TLS Certificates Management Using Vault PKI + Cert-Manager
Centralized TLS Certificates Management Using Vault PKI + Cert-ManagerSaiLinnThu2
 
MuleSoft Online Meetup Group - B2B Crash Course: PM Insider Lecture
MuleSoft Online Meetup Group - B2B Crash Course: PM Insider LectureMuleSoft Online Meetup Group - B2B Crash Course: PM Insider Lecture
MuleSoft Online Meetup Group - B2B Crash Course: PM Insider LectureManik S Magar
 
Low Latency at Extreme Scale: Proven Practices & Pitfalls
Low Latency at Extreme Scale: Proven Practices & PitfallsLow Latency at Extreme Scale: Proven Practices & Pitfalls
Low Latency at Extreme Scale: Proven Practices & PitfallsScyllaDB
 
CloudStack 101: The Best Way to Build Your Private Cloud – Rohit Yadav, VP Ap...
CloudStack 101: The Best Way to Build Your Private Cloud – Rohit Yadav, VP Ap...CloudStack 101: The Best Way to Build Your Private Cloud – Rohit Yadav, VP Ap...
CloudStack 101: The Best Way to Build Your Private Cloud – Rohit Yadav, VP Ap...ShapeBlue
 
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024BookNet Canada
 
Geospatial Synergy: Amplifying Efficiency with FME & Esri
Geospatial Synergy: Amplifying Efficiency with FME & EsriGeospatial Synergy: Amplifying Efficiency with FME & Esri
Geospatial Synergy: Amplifying Efficiency with FME & EsriSafe Software
 
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)François
 
PrismCRM-RealEstate-SalesCRM_byCode5Company
PrismCRM-RealEstate-SalesCRM_byCode5CompanyPrismCRM-RealEstate-SalesCRM_byCode5Company
PrismCRM-RealEstate-SalesCRM_byCode5CompanyMustafa Kuğu
 
Q4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdfQ4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdfTejal81
 

Recently uploaded (20)

TrustArc Webinar - TrustArc's Latest AI Innovations
TrustArc Webinar - TrustArc's Latest AI InnovationsTrustArc Webinar - TrustArc's Latest AI Innovations
TrustArc Webinar - TrustArc's Latest AI Innovations
 
ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...
ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...
ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...
 
Mastering Play Store App Listing and Optimization
Mastering Play Store App Listing and OptimizationMastering Play Store App Listing and Optimization
Mastering Play Store App Listing and Optimization
 
CloudStack Tooling Ecosystem – Kiran Chavala, ShapeBlue
CloudStack Tooling Ecosystem – Kiran Chavala, ShapeBlueCloudStack Tooling Ecosystem – Kiran Chavala, ShapeBlue
CloudStack Tooling Ecosystem – Kiran Chavala, ShapeBlue
 
eXtended Reality(XR) Basic introductions
eXtended Reality(XR) Basic introductionseXtended Reality(XR) Basic introductions
eXtended Reality(XR) Basic introductions
 
Python For Kids - Sách Lập trình cho trẻ em
Python For Kids - Sách Lập trình cho trẻ emPython For Kids - Sách Lập trình cho trẻ em
Python For Kids - Sách Lập trình cho trẻ em
 
GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...
GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...
GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...
 
AI improves software testing to be more fault tolerant, focused and efficient
AI improves software testing to be more fault tolerant, focused and efficientAI improves software testing to be more fault tolerant, focused and efficient
AI improves software testing to be more fault tolerant, focused and efficient
 
What’s New in CloudStack 4.19, Abhishek Kumar, Release Manager Apache CloudSt...
What’s New in CloudStack 4.19, Abhishek Kumar, Release Manager Apache CloudSt...What’s New in CloudStack 4.19, Abhishek Kumar, Release Manager Apache CloudSt...
What’s New in CloudStack 4.19, Abhishek Kumar, Release Manager Apache CloudSt...
 
Establishing data sharing standards to promote global industry development
Establishing data sharing standards to promote global industry developmentEstablishing data sharing standards to promote global industry development
Establishing data sharing standards to promote global industry development
 
Centralized TLS Certificates Management Using Vault PKI + Cert-Manager
Centralized TLS Certificates Management Using Vault PKI + Cert-ManagerCentralized TLS Certificates Management Using Vault PKI + Cert-Manager
Centralized TLS Certificates Management Using Vault PKI + Cert-Manager
 
Sue Loth: Job Search Strategies using personal connections
Sue Loth: Job Search Strategies using personal connectionsSue Loth: Job Search Strategies using personal connections
Sue Loth: Job Search Strategies using personal connections
 
MuleSoft Online Meetup Group - B2B Crash Course: PM Insider Lecture
MuleSoft Online Meetup Group - B2B Crash Course: PM Insider LectureMuleSoft Online Meetup Group - B2B Crash Course: PM Insider Lecture
MuleSoft Online Meetup Group - B2B Crash Course: PM Insider Lecture
 
Low Latency at Extreme Scale: Proven Practices & Pitfalls
Low Latency at Extreme Scale: Proven Practices & PitfallsLow Latency at Extreme Scale: Proven Practices & Pitfalls
Low Latency at Extreme Scale: Proven Practices & Pitfalls
 
CloudStack 101: The Best Way to Build Your Private Cloud – Rohit Yadav, VP Ap...
CloudStack 101: The Best Way to Build Your Private Cloud – Rohit Yadav, VP Ap...CloudStack 101: The Best Way to Build Your Private Cloud – Rohit Yadav, VP Ap...
CloudStack 101: The Best Way to Build Your Private Cloud – Rohit Yadav, VP Ap...
 
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024
 
Geospatial Synergy: Amplifying Efficiency with FME & Esri
Geospatial Synergy: Amplifying Efficiency with FME & EsriGeospatial Synergy: Amplifying Efficiency with FME & Esri
Geospatial Synergy: Amplifying Efficiency with FME & Esri
 
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)
 
PrismCRM-RealEstate-SalesCRM_byCode5Company
PrismCRM-RealEstate-SalesCRM_byCode5CompanyPrismCRM-RealEstate-SalesCRM_byCode5Company
PrismCRM-RealEstate-SalesCRM_byCode5Company
 
Q4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdfQ4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdf
 

5 Mistakes of Massive CSS

  • 1. TOP 5 MISTAKES OF MASSIVE CSS! Nicole Sullivan & Stoyan Stefanov Thursday, June 24, 2010
  • 2. FIND US AT... @stubbornella @stoyanstefanov Thursday, June 24, 2010
  • 3. WHY OPTIMIZE CSS? • It blocks progressive rendering test: http://www.phpied.com/files/css-loading/table.php • It’s verbose (property value pairs cannot be minified like JS) text-decoration: underline != td: u Thursday, June 24, 2010
  • 4. TOP 1000 STUDY 1. Grab top Alexa sites 2. Start Fiddler 3. Load each site 4. Export from Fiddler Thursday, June 24, 2010
  • 5. <?php $file = file('alexa.txt'); foreach ($file as $url) { launch($url); } function launch($url) { try { $ie = new COM("InternetExplorer.Application"); $ie->Visible = true; $ie->Navigate2($url); while ($ie->ReadyState != 4) sleep(1); $ie->Quit(); } catch (Exception $e) {} } ?> Thursday, June 24, 2010
  • 6. 42% DON’T GZIP CSS Thursday, June 24, 2010
  • 7. 44% HAVE MORE THAN 2 CSS FILES 56% 44% Thursday, June 24, 2010
  • 8. 56% SERVE CSS WITH COOKIES Thursday, June 24, 2010
  • 9. 62% DON’T MINIFY would get more than 10% savings from YUI compressor Thursday, June 24, 2010
  • 10. 21% HAVE >100K OF CSS 21% 11% 11% 44% 24% Thursday, June 24, 2010
  • 11. HASTE TRACE-BASED PACKAGING homepage homepage Date CSS files CSS weight files weight Nov 2008 487 1.7MB 24 69KB May 2009 706 1.9MB 15 64KB http://velocityconference.blip.tv/file/2293221/ David Wei & Changhao Jiang Thursday, June 24, 2010
  • 12. KUDZU Was introduced to the United States between 1935 and 1950 by the Soil Conservation Service to prevent soil erosion. Thursday, June 24, 2010
  • 14. “OBJECT ORIENTED CSS SOUNDS GREAT, BUT WE HAVE A GIANT MESS!” how do we get from here to there? Thursday, June 24, 2010
  • 15. FACEBOOK DECIDED TO GO ON A DIET The CSS was one piece of the puzzle Thursday, June 24, 2010
  • 16. Jason Sobel - Perf Manager Fu MANY PIECES Nan Gao Kyle Delong - PHP David Wei & Changhao Jiang BigPipe Marcel Laverdet - Tom Occhino - JS XHP Makinde Shaun McIntyre - Adeagbo - JS Automated Spriting Thursday, June 24, 2010
  • 17. THEY REDUCED THEIR RESPONSE TIME BY HALF in only six months Thursday, June 24, 2010
  • 18. WHAT IS OBJECT ORIENTED CSS? A philosophy? A framework? A tool? Thursday, June 24, 2010
  • 19. MORE LIKE AN EVOLUTION OF THE LANGUAGE it makes CSS more powerful Thursday, June 24, 2010
  • 20. HOW IS IT DIFFERENT? ul{...} ul li{...} ul li a{...} Thursday, June 24, 2010
  • 21. HOW IS IT DIFFERENT? ul{...} ul li{...} ul li a{...} Until now, we focused all our effort here Thursday, June 24, 2010
  • 22. HOW IS IT DIFFERENT? ul{...} ul li{...} ul li a{...} But, the architecture lives here Thursday, June 24, 2010
  • 23. MUCH LESS CODE easier to work with newbies Thursday, June 24, 2010
  • 24. GRIDS • 574 bytes • 14 lines of code • Percentage widths adapt to different page sizes • Includes halfs, thirds, fourths, and fifths • No gutters • Infinite nesting and stacking Thursday, June 24, 2010
  • 25. GRANULARITY FAIL + STALE RULES + UNPREDICTABILITY + DUPLICATION + SPECIFICITY WARS = MASSIVE CSS Thursday, June 24, 2010
  • 26. 5 Text GRANULARITY FAIL the CSS objects shouldn’t match the PHP objects Thursday, June 24, 2010
  • 32. WE WANT TO DO THE SAME THING WITH CSS Thursday, June 24, 2010
  • 33. CREATE THE BUILDING BLOCKS Thursday, June 24, 2010
  • 34. MOST SITES GET THE GRANULARITY WRONG and their architecture is set up to fail Thursday, June 24, 2010
  • 35. HOW? FIRST, A VISUAL INVENTORY Thursday, June 24, 2010
  • 36. TAKE A PHP OBJECT Thursday, June 24, 2010
  • 37. BREAK IT DOWN Thursday, June 24, 2010
  • 40. HEADINGS Heading - 16px bold #3B5998 Heading - 16px normal #333333 Heading - 15px bold #3B5998 • 12px headings eliminated Heading - 15px normal #333333 Heading - 14px bold #3B5998 • Blue only for links Heading - 14px normal #333333 Heading - 13px bold #3B5998 • Bold for all titles Heading - 13px normal #333333 • Chad Little went through Heading - 11px bold #3B5998 the entire site eliminating Heading - 11px normal #333333 duplicates. Thursday, June 24, 2010
  • 41. IT’S ALL ABOUT PATTERN MATCHING but you have to take a step back Thursday, June 24, 2010
  • 42. PHP OBJECTS != CSS OBJECTS you will be tempted, beware! Thursday, June 24, 2010
  • 43. 4 Text STALE RULES CSS gets crufty Thursday, June 24, 2010
  • 44. STALE IS TWO THINGS ❖ Truly stale - rules that are no longer used on the site ❖ Rules used on subsequent PV or activated on user action Thursday, June 24, 2010
  • 45. WHAT KIND DO YOU HAVE? Thursday, June 24, 2010
  • 46. WHAT KIND DO YOU HAVE? ❖ Try dust-me selectors Thursday, June 24, 2010
  • 47. WHAT KIND DO YOU HAVE? ❖ Try dust-me selectors ❖ Track them over time - ‣ changes are more important than an absolute number Thursday, June 24, 2010
  • 48. 3 Text UNPREDICTABILITY Make each object predictable and location independent Thursday, June 24, 2010
  • 51. A Heading should not become a Heading in another part of the page. Thursday, June 24, 2010
  • 52. AVOID EXAMPLE #weatherModule h3{color:red;} #tabs h3{color:blue} ❖ Global color undefined for h3, so it will be ‣ unstyled in new modules, ‣ developers forced to write more CSS for the same style Thursday, June 24, 2010
  • 53. HOW DO YOU TEST FOR UNPREDICTABLE CODE? #foo h3{...} #bar h3{...} #baz h3{...} grep h[1-6] Thursday, June 24, 2010
  • 54. h1-h6 How many? You need site-wide headings Thursday, June 24, 2010
  • 55. 511 declarations setting styles for h1-h6 56% >10 9% >100 Thursday, June 24, 2010
  • 56. HEADINGS BEFORE 958 declarations h1-h6 Facebook Thursday, June 24, 2010
  • 57. HEADINGS AFTER: 25 Chad Little - Facebook Thursday, June 24, 2010
  • 58. 2 Text SPECIFICITY WARS lobbing specificity grenades over the cube wall Thursday, June 24, 2010
  • 59. SPECIFICITY SCREWS UP THE CASCADE and the cascade kind of rocks, so how do we use the good parts? Thursday, June 24, 2010
  • 61. .mod .hd{...} .ie .mod .hd{...} .weatherMod .hd {...} USE HACKS SPARINGLY And don’t let them change your specificity Thursday, June 24, 2010
  • 62. .mod .hd{...} X .ie .mod .hd{...} .weatherMod .hd {...} USE HACKS SPARINGLY And don’t let them change your specificity .mod .hd{color: red; _zoom:1;} .weatherMod .hd{...} Thursday, June 24, 2010
  • 63. #navigation{...} #header{...} AVOID STYLING IDS IDs impact specificity and can’t be reused IDs are for JS Thursday, June 24, 2010
  • 64. X #navigation{...} #header{...} AVOID STYLING IDS IDs impact specificity and can’t be reused IDs are for JS Thursday, June 24, 2010
  • 65. .nav {color: red !important;} AVOID !IMPORTANT except on leaf nodes Thursday, June 24, 2010
  • 66. .nav {color: red !important;} X AVOID !IMPORTANT except on leaf nodes Thursday, June 24, 2010
  • 67. !IMPORTANT 518 declarations using important 12% have greater than 50 Thursday, June 24, 2010
  • 68. div.error{...} STYLE CLASSES rather than elements Thursday, June 24, 2010
  • 69. X div.error{...} STYLE CLASSES rather than elements .error{ most of the code goes here } Thursday, June 24, 2010
  • 70. X div.error{...} STYLE CLASSES rather than elements .error{ most of the code goes here } div.error{ } p.error{ exceptions only } em.error{ } Thursday, June 24, 2010
  • 71. html body .myModule div .hd{...} .myModule2 .hd {...} GIVE RULES THE SAME STRENGTH Use cascade order to overwrite previous rules Thursday, June 24, 2010
  • 72. X html body .myModule div .hd{...} .myModule2 .hd {...} GIVE RULES THE SAME STRENGTH Use cascade order to overwrite previous rules .myModule .hd{...} .myModule2 .hd{...} Thursday, June 24, 2010
  • 73. 1 Text DUPLICATION CSS kudzu on steroids Thursday, June 24, 2010
  • 74. GREP IS YOUR FRIEND look at the stylesheets globally rather than per page Thursday, June 24, 2010
  • 75. margintoo many? You need reset.css Thursday, June 24, 2010
  • 76. 518 declarations reset margin to zero 64% > 10 14% > 100 Thursday, June 24, 2010
  • 77. float too many? You need grids Thursday, June 24, 2010
  • 78. 733 declarations floated elements 56% > 10 13% > 100 Thursday, June 24, 2010
  • 79. font-size headings may be disguised in class names Thursday, June 24, 2010
  • 80. FONT-SIZE 889 declarations changed the font-size 78% >10 23% >100 Thursday, June 24, 2010
  • 81. HOW DID FACEBOOK REDUCE DUPLICATION? let’s look at an example Thursday, June 24, 2010
  • 83. ALL OF THESE ARE THE SAME OBJECT Thursday, June 24, 2010
  • 84. WHAT DO WE KNOW? ❖ Can be nested ❖ Optional right button ❖ Must clearfix Thursday, June 24, 2010
  • 85. WHAT DON’T WE KNOW? ❖ Image width and decoration vary ❖ Right content is unknown ❖ Width unknown Thursday, June 24, 2010
  • 86. SEPARATE STRUCTURE FROM CHROME Thursday, June 24, 2010
  • 87. A FEW LINES OF HTML... <div class="media attribution"> <a href="http://twitter.com/stubbornella" class="img"> <img src="mini.jpg" alt="Stubbornella" /> </a> <div class="bd">@Stubbornella 14 minutes ago</div> </div> Thursday, June 24, 2010
  • 88. 4 LINES OF CSS... Thursday, June 24, 2010
  • 90. HTML SIZE reduced by 50% by Stefan Parker Thursday, June 24, 2010
  • 91. “Due to these efforts, we cut our average CSS bytes per page by 19% (after gzip) and HTML bytes per page by 44% (before gzip).” Jason Sobel http://www.facebook.com/note.php?note_id=307069903919 Thursday, June 24, 2010
  • 92. LET’S KEEP TALKING... www.stubbornella.org @stubbornella http://phpied.com @stoyanstefanov OOCSS Project: http://github.com/stubbornella/oocss/ Thursday, June 24, 2010