[TW] CSS Files Optimization

•

0 gostou•752 visualizações

Bogdan Gaza

Tecnologia

$ whoami

Student at Faculty of Computer Science, Iasi, Romania

RubySOC 2010 student

bogdan.gaza@info.uaic.ro

@hurrycane

TW 2011 @hurrycane
Monday, February 21, 2011

Why optimize css?

TW 2011 @hurrycane
Monday, February 21, 2011

To load pages faster

TW 2011 @hurrycane
Monday, February 21, 2011

The BIGGER the website - the
bigger the ﬁle size

TW 2011 @hurrycane
Monday, February 21, 2011

The BIGGER the website - the
selectors get larger

TW 2011 @hurrycane
Monday, February 21, 2011

http://special-web.wikispaces.com/Presentations

TW 2011 @hurrycane
Monday, February 21, 2011

http://special-web.wikispaces.com/Presentations

Load time

TW 2011 @hurrycane
Monday, February 21, 2011

http://special-web.wikispaces.com/Presentations

Size

TW 2011 @hurrycane
Monday, February 21, 2011

http://www.trilulilu.ro

Load time

Size

TW 2011 @hurrycane
Monday, February 21, 2011

21% of Top 1000 Alexa* have
>100k of CSS

*Alexa = internet trafﬁc stats

TW 2011 @hurrycane
Monday, February 21, 2011

How?

TW 2011 @hurrycane
Monday, February 21, 2011

Reduce ﬁle size
GZIP

Number of css ﬁles

Minify

Reuse code

Smaller selectors

TW 2011 @hurrycane
Monday, February 21, 2011

Reduce ﬁle size
GZIP

Client Server

TW 2011 @hurrycane
Monday, February 21, 2011

Reduce ﬁle size
GZIP

Request
Client Server

TW 2011 @hurrycane
Monday, February 21, 2011

Reduce ﬁle size
GZIP

Request
Client Server
Response

TW 2011 @hurrycane
Monday, February 21, 2011

Reduce ﬁle size
GZIP

Request
Client Server
Response
gzip

TW 2011 @hurrycane
Monday, February 21, 2011

Reduce ﬁle size - gzip
Important bandwidth reduction
example

Amazon EC2
1 TB (uncompressed) = $174
1 TB (compressed) = $43.52

TW 2011 @hurrycane
Monday, February 21, 2011

Reduce ﬁle size - gzip
Important bandwidth reduction
example

Amazon EC2
1 TB (uncompressed) = $174
4:1
compression
1 TB (compressed) = $43.52

TW 2011 @hurrycane
Monday, February 21, 2011

gzip
mod_delate
Demo

TW 2011 @hurrycane
Monday, February 21, 2011

Reduce ﬁle size

Miniﬁcation = remove unnecessary characters from code
without changing functionality

TW 2011 @hurrycane
Monday, February 21, 2011

Reduce ﬁle size

Miniﬁcation is done using different tools.

YUI-Compressor
Minify
Closure Compiler (google)

TW 2011 @hurrycane
Monday, February 21, 2011

Reduce ﬁle size

YUI-Compressor is used for both JavaScript and CSS

Written in Java

Command line tool

yuicompressor ceva.css -o ceva.min.css

TW 2011 @hurrycane
Monday, February 21, 2011

YUI-Compressor
Demo

TW 2011 @hurrycane
Monday, February 21, 2011

Reduce rendering time

TW 2011 @hurrycane
Monday, February 21, 2011

Paradigm shift

ul { ... }
ul li { ... }
ul li a { ... }

Until now, focus was here

TW 2011 @hurrycane
Monday, February 21, 2011

Paradigm shift

ul { ... }
ul li { ... }
ul li a { ... }

Arhitecture lives here

TW 2011 @hurrycane
Monday, February 21, 2011

Object oriented css
Objects rather than pages
Global defaults

Abstract reusable elements

Separate structure and skin

Use multiple classes to simulate OO

TW 2011 @hurrycane
Monday, February 21, 2011

Example of optimisation:
Facebook’s Big pipe

TW 2011 @hurrycane
Monday, February 21, 2011

Example of optimisation:
Facebook’s Big pipe

50%
improvement
gain in loading
speed

TW 2011 @hurrycane
Monday, February 21, 2011

Choose the solution that best ﬁts you!

TW 2011 @hurrycane
Monday, February 21, 2011

QA

TW 2011 @hurrycane
Monday, February 21, 2011

Thanks!

TW 2011 @hurrycane
Monday, February 21, 2011

Mais conteúdo relacionado

Último

What is a good lead in your organisation? Which leads are priority? What happens to leads? When sales and marketing give different answers to these questions, or perhaps aren't sure of the answers at all, frustrations build and opportunities are left on the table. Join us for an illuminating session with Cian McLoughlin, HubSpot Principal Customer Success Manager, as we look at that crucial piece of the customer journey in which leads are transferred from marketing to sales.

04-2024-HHUG-Sales-and-Marketing-Alignment.pptx

HampshireHUG

How to Troubleshoot Apps for the Modern Connected Worker

ThousandEyes

A Call to Action for Generative AI in 2024

Results

BooK Now Call us at +918448380779 to hire a gorgeous and seductive call girl for sex. Take a Delhi Escort Service. The help of our escort agency is mostly meant for men who want sexual Indian Escorts In Delhi NCR. It should be noted that any impersonator will get 100 attention from our Young Girls Escorts in Delhi. They will assume the position of reliable allies. VIP Call Girl With Original Photos Book Tonight +918448380779 Our Cheap Price 1 Hour not available 2 Hours 5000 Full Night 8000 TAG: Call Girls in Delhi, Noida, Gurgaon, Ghaziabad, Connaught Place, Greater Kailash Delhi, Lajpat Nagar Delhi, Mayur Vihar Delhi, Chanakyapuri Delhi, New Friends Colony Delhi, Majnu Ka Tilla, Karol Bagh, Malviya Nagar, Saket, Khan Market, Noida Sector 18, Noida Sector 76, Noida Sector 51, Gurgaon Mg Road, Iffco Chowk Gurgaon, Rajiv Chowk Gurgaon All Delhi Ncr Free Home Deliver

08448380779 Call Girls In Civil Lines Women Seeking Men

Delhi Call girls

A Domino Admins Adventures (Engage 2024)

Gabriella Davis

Axa Assurance Maroc - Insurer Innovation Award 2024

The Digital Insurer

This presentations targets students or working professionals. You may know Google for search, YouTube, Android, Chrome, and Gmail, but did you know Google has many developer tools, platforms & APIs? This comprehensive yet still high-level overview outlines the most impactful tools for where to run your code, store & analyze your data. It will also inspire you as to what's possible. This talk is 50 minutes in length.

Powerful Google developer tools for immediate impact! (2023-24 C)

wesley chun

Created by Mozilla Research in 2012 and now part of Linux Foundation Europe, the Servo project is an experimental rendering engine written in Rust. It combines memory safety and concurrency to create an independent, modular, and embeddable rendering engine that adheres to web standards. Stewardship of Servo moved from Mozilla Research to the Linux Foundation in 2020, where its mission remains unchanged. After some slow years, in 2023 there has been renewed activity on the project, with a roadmap now focused on improving the engine’s CSS 2 conformance, exploring Android support, and making Servo a practical embeddable rendering engine. In this presentation, Rakhi Sharma reviews the status of the project, our recent developments in 2023, our collaboration with Tauri to make Servo an easy-to-use embeddable rendering engine, and our plans for the future to make Servo an alternative web rendering engine for the embedded devices industry. (c) Embedded Open Source Summit 2024 April 16-18, 2024 Seattle, Washington (US) https://events.linuxfoundation.org/embedded-open-source-summit/ https://ossna2024.sched.com/event/1aBNF/a-year-of-servo-reboot-where-are-we-now-rakhi-sharma-igalia

A Year of the Servo Reboot: Where Are We Now?

Igalia

Presentation on how to chat with PDF using ChatGPT code interpreter

naman860154

Slack Application Development 101 Slides

praypatel2

2024: Domino Containers - The Next Step. News from the Domino Container commu...

Martijn de Jong

08448380779 Call Girls In Diplomatic Enclave Women Seeking Men

Delhi Call girls

With more memory available, system performance of three Dell devices increased, which can translate to a better user experience Conclusion When your system has plenty of RAM to meet your needs, you can efficiently access the applications and data you need to finish projects and to-do lists without sacrificing time and focus. Our test results show that with more memory available, three Dell PCs delivered better performance and took less time to complete the Procyon Office Productivity benchmark. These advantages translate to users being able to complete workflows more quickly and multitask more easily. Whether you need the mobility of the Latitude 5440, the creative capabilities of the Precision 3470, or the high performance of the OptiPlex Tower Plus 7010, configuring your system with more RAM can help keep processes running smoothly, enabling you to do more without compromising performance.

Boost PC performance: How more available memory can improve productivity

Principled Technologies

🐬 The future of MySQL is Postgres 🐘

RTylerCroy

Abhishek Deb(1), Mr Abdul Kalam(2) M. Des (UX) , School of Design, DIT University , Dehradun. This paper explores the future potential of AI-enabled smartphone processors, aiming to investigate the advancements, capabilities, and implications of integrating artificial intelligence (AI) into smartphone technology. The research study goals consist of evaluating the development of AI in mobile phone processors, analyzing the existing state as well as abilities of AI-enabled cpus determining future patterns as well as chances together with reviewing obstacles as well as factors to consider for more growth.

Exploring the Future Potential of AI-Enabled Smartphone Processors

debabhi2

Automating Google Workspace (GWS) & more with Apps Script

wesley chun

Building Digital Trust in a Digital Economy Veronica Tan, Director - Cyber Security Agency of Singapore Apidays Singapore 2024: Connecting Customers, Business and Technology (April 17 & 18, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...

apidays

Data Cloud, More than a CDP by Matt Robison

Anna Loughnan Colquhoun

Sara Mae O’Brien Scott and Tatiana Baquero Cakici, Senior Consultants at Enterprise Knowledge (EK), presented “AI Fast Track to Search-Focused AI Solutions” at the Information Architecture Conference (IAC24) that took place on April 11, 2024 in Seattle, WA. In their presentation, O’Brien-Scott and Cakici focused on what Enterprise AI is, why it is important, and what it takes to empower organizations to get started on a search-based AI journey and stay on track. The presentation explored the complexities of enterprise search challenges and how IA principles can be leveraged to provide AI solutions through the use of a semantic layer. O’Brien-Scott and Cakici showcased a case study where a taxonomy, an ontology, and a knowledge graph were used to structure content at a healthcare workforce solutions organization, providing personalized content recommendations and increasing content findability. In this session, participants gained insights about the following: Most common types of AI categories and use cases; Recommended steps to design and implement taxonomies and ontologies, ensuring they evolve effectively and support the organization’s search objectives; Taxonomy and ontology design considerations and best practices; Real-world AI applications that illustrated the value of taxonomies, ontologies, and knowledge graphs; and Tools, roles, and skills to design and implement AI-powered search solutions.

IAC 2024 - IA Fast Track to Search Focused AI Solutions

Enterprise Knowledge

As privacy and data protection regulations evolve rapidly, organizations operating in multiple jurisdictions face mounting challenges to ensure compliance and safeguard customer data. With state-specific privacy laws coming up in multiple states this year, it is essential to understand what their unique data protection regulations will require clearly. How will data privacy evolve in the US in 2024? How to stay compliant? Our panellists will guide you through the intricacies of these states' specific data privacy laws, clarifying complex legal frameworks and compliance requirements. This webinar will review: - The essential aspects of each state's privacy landscape and the latest updates - Common compliance challenges faced by organizations operating in multiple states and best practices to achieve regulatory adherence - Valuable insights into potential changes to existing regulations and prepare your organization for the evolving landscape

TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments

TrustArc

Destaque

https://www.hubspot.com/state-of-marketing · Scaling relationships and proving ROI · Social media is the place for search, sales, and service · Authentic influencer partnerships fuel brand growth · The strongest connections happen via call, click, chat, and camera. · Time saved with AI leads to more creative work · Seeking: A single source of truth · TLDR; Get on social, try AI, and align your systems. · More human marketing, powered by robots

2024 State of Marketing Report – by Hubspot

Marius Sescu

ChatGPT is a revolutionary addition to the world since its introduction in 2022. A big shift in the sector of information gathering and processing happened because of this chatbot. What is the story of ChatGPT? How is the bot responding to prompts and generating contents? Swipe through these slides prepared by Expeed Software, a web development company regarding the development and technical intricacies of ChatGPT!

Everything You Need To Know About ChatGPT

Expeed Software

Product Design Trends in 2024 | Teenage Engineerings

Pixeldarts

Mental health has been in the news quite a bit lately. Dozens of U.S. states are currently suing Meta for contributing to the youth mental health crisis by inserting addictive features into their products, while the U.S. Surgeon General is touring the nation to bring awareness to the growing epidemic of loneliness and isolation. The country has endured periods of low national morale, such as in the 1970s when high inflation and the energy crisis worsened public sentiment following the Vietnam War. The current mood, however, feels different. Gallup recently reported that national mental health is at an all-time low, with few bright spots to lift spirits. To better understand how Americans are feeling and their attitudes towards mental health in general, ThinkNow conducted a nationally representative quantitative survey of 1,500 respondents and found some interesting differences among ethnic, age and gender groups. Technology For example, 52% agree that technology and social media have a negative impact on mental health, but when broken out by race, 61% of Whites felt technology had a negative effect, and only 48% of Hispanics thought it did. While technology has helped us keep in touch with friends and family in faraway places, it appears to have degraded our ability to connect in person. Staying connected online is a double-edged sword since the same news feed that brings us pictures of the grandkids and fluffy kittens also feeds us news about the wars in Israel and Ukraine, the dysfunction in Washington, the latest mass shooting and the climate crisis. Hispanics may have a built-in defense against the isolation technology breeds, owing to their large, multigenerational households, strong social support systems, and tendency to use social media to stay connected with relatives abroad. Age and Gender When asked how individuals rate their mental health, men rate it higher than women by 11 percentage points, and Baby Boomers rank it highest at 83%, saying it’s good or excellent vs. 57% of Gen Z saying the same. Gen Z spends the most amount of time on social media, so the notion that social media negatively affects mental health appears to be correlated. Unfortunately, Gen Z is also the generation that’s least comfortable discussing mental health concerns with healthcare professionals. Only 40% of them state they’re comfortable discussing their issues with a professional compared to 60% of Millennials and 65% of Boomers. Race Affects Attitudes As seen in previous research conducted by ThinkNow, Asian Americans lag other groups when it comes to awareness of mental health issues. Twenty-four percent of Asian Americans believe that having a mental health issue is a sign of weakness compared to the 16% average for all groups. Asians are also considerably less likely to be aware of mental health services in their communities (42% vs. 55%) and most likely to seek out information on social media (51% vs. 35%).

How Race, Age and Gender Shape Attitudes Towards Mental Health

ThinkNow

AI Trends in Creative Operations 2024 by Artwork Flow.pdf

marketingartwork

Skeleton Culture Code

Skeleton Technologies

PEPSICO Presentation to CAGNY Conference Feb 2024

Neil Kimberley

Content Methodology: A Best Practices Report (Webinar)

contently

How to Prepare For a Successful Job Search for 2024

Albert Qian

A report by thenetworkone and Kurio. The contributing experts and agencies are (in an alphabetical order): Sylwia Rytel, Social Media Supervisor, 180heartbeats + JUNG v MATT (PL), Sharlene Jenner, Vice President - Director of Engagement Strategy, Abelson Taylor (USA), Alex Casanovas, Digital Director, Atrevia (ES), Dora Beilin, Senior Social Strategist, Barrett Hoffher (USA), Min Seo, Campaign Director, Brand New Agency (KR), Deshé M. Gully, Associate Strategist, Day One Agency (USA), Francesca Trevisan, Strategist, Different (IT), Trevor Crossman, CX and Digital Transformation Director; Olivia Hussey, Strategic Planner; Simi Srinarula, Social Media Manager, The Hallway (AUS), James Hebbert, Managing Director, Hylink (CN / UK), Mundy Álvarez, Planning Director; Pedro Rojas, Social Media Manager; Pancho González, CCO, Inbrax (CH), Oana Oprea, Head of Digital Planning, Jam Session Agency (RO), Amy Bottrill, Social Account Director, Launch (UK), Gaby Arriaga, Founder, Leonardo1452 (MX), Shantesh S Row, Creative Director, Liwa (UAE), Rajesh Mehta, Chief Strategy Officer; Dhruv Gaur, Digital Planning Lead; Leonie Mergulhao, Account Supervisor - Social Media & PR, Medulla (IN), Aurelija Plioplytė, Head of Digital & Social, Not Perfect (LI), Daiana Khaidargaliyeva, Account Manager, Osaka Labs (UK / USA), Stefanie Söhnchen, Vice President Digital, PIABO Communications (DE), Elisabeth Winiartati, Managing Consultant, Head of Global Integrated Communications; Lydia Aprina, Account Manager, Integrated Marketing and Communications; Nita Prabowo, Account Manager, Integrated Marketing and Communications; Okhi, Web Developer, PNTR Group (ID), Kei Obusan, Insights Director; Daffi Ranandi, Insights Manager, Radarr (SG), Gautam Reghunath, Co-founder & CEO, Talented (IN), Donagh Humphreys, Head of Social and Digital Innovation, THINKHOUSE (IRE), Sarah Yim, Strategy Director, Zulu Alpha Kilo (CA).

Social Media Marketing Trends 2024 // The Global Indie Insights

Kurio // The Social Media Age(ncy)

The search marketing landscape is evolving rapidly with new technologies, and professionals, like you, rely on innovative paid search strategies to meet changing demands. It’s important that you’re ready to implement new strategies in 2024. Check this out and learn the top trends in paid search advertising that are expected to gain traction, so you can drive higher ROI more efficiently in 2024. You’ll learn: - The latest trends in AI and automation, and what this means for an evolving paid search ecosystem. - New developments in privacy and data regulation. - Emerging ad formats that are expected to make an impact next year. Watch Sreekant Lanka from iQuanti and Irina Klein from OneMain Financial as they dive into the future of paid search and explore the trends, strategies, and technologies that will shape the search marketing landscape. If you’re looking to assess your paid search strategy and design an industry-aligned plan for 2024, then this webinar is for you.

Trends In Paid Search: Navigating The Digital Landscape In 2024

Search Engine Journal

From their humble beginnings in 1984, TED has grown into the world’s most powerful amplifier for speakers and thought-leaders to share their ideas. They have over 2,400 filmed talks (not including the 30,000+ TEDx videos) freely available online, and have hosted over 17,500 events around the world. With over one billion views in a year, it’s no wonder that so many speakers are looking to TED for ideas on how to share their message more effectively. The article “5 Public-Speaking Tips TED Gives Its Speakers”, by Carmine Gallo for Forbes, gives speakers five practical ways to connect with their audience, and effectively share their ideas on stage. Whether you are gearing up to get on a TED stage yourself, or just want to master the skills that so many of their speakers possess, these tips and quotes from Chris Anderson, the TED Talks Curator, will encourage you to make the most impactful impression on your audience. See the full article and more summaries like this on SpeakerHub here: https://speakerhub.com/blog/5-presentation-tips-ted-gives-its-speakers See the original article on Forbes here: http://www.forbes.com/forbes/welcome/?toURL=http://www.forbes.com/sites/carminegallo/2016/05/06/5-public-speaking-tips-ted-gives-its-speakers/&refURL=&referrer=#5c07a8221d9b

5 Public speaking tips from TED - Visualized summary

SpeakerHub

Everyone is in agreement that ChatGPT (and other generative AI tools) will shape the future of work. Yet there is little consensus on exactly how, when, and to what extent this technology will change our world. Businesses that extract maximum value from ChatGPT will use it as a collaborative tool for everything from brainstorming to technical maintenance. For individuals, now is the time to pinpoint the skills the future professional will need to thrive in the AI age. Check out this presentation to understand what ChatGPT is, how it will shape the future of work, and how you can prepare to take advantage.

ChatGPT and the Future of Work - Clark Boyd

Clark Boyd

Getting into the tech field. what next

Tessa Mero

Google's Just Not That Into You: Understanding Core Updates & Search Intent

Lily Ray

How to have difficult conversations

Rajiv Jayarajah, MAppComm, ACC

Introduction to Data Science

Christy Abraham Joy

Time Management & Productivity - Best Practices

Vit Horky

The six step guide to practical project management If you think managing projects is too difficult, think again. We’ve stripped back project management processes to the basics – to make it quicker and easier, without sacrificing the vital ingredients for success. “If you’re looking for some real-world guidance, then The Six Step Guide to Practical Project Management will help.” Dr Andrew Makar, Tactical Project Management

The six step guide to practical project management

MindGenius

Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...

RachelPearson36

Destaque (20)

2024 State of Marketing Report – by Hubspot

Everything You Need To Know About ChatGPT

Product Design Trends in 2024 | Teenage Engineerings

How Race, Age and Gender Shape Attitudes Towards Mental Health

AI Trends in Creative Operations 2024 by Artwork Flow.pdf

Skeleton Culture Code

PEPSICO Presentation to CAGNY Conference Feb 2024

Content Methodology: A Best Practices Report (Webinar)

How to Prepare For a Successful Job Search for 2024

Social Media Marketing Trends 2024 // The Global Indie Insights

Trends In Paid Search: Navigating The Digital Landscape In 2024

5 Public speaking tips from TED - Visualized summary

ChatGPT and the Future of Work - Clark Boyd

Getting into the tech field. what next

Google's Just Not That Into You: Understanding Core Updates & Search Intent

How to have difficult conversations

Introduction to Data Science

Time Management & Productivity - Best Practices

The six step guide to practical project management

Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...

[TW] CSS Files Optimization

1. CSS FILES OPTIMIZATION TW 2011 Special lab Bogdan Gaza TW 2011 @hurrycane Monday, February 21, 2011

2. $ whoami Student at Faculty of Computer Science, Iasi, Romania RubySOC 2010 student bogdan.gaza@info.uaic.ro @hurrycane TW 2011 @hurrycane Monday, February 21, 2011

3. Why optimize css? TW 2011 @hurrycane Monday, February 21, 2011

4. To load pages faster TW 2011 @hurrycane Monday, February 21, 2011

5. The BIGGER the website - the bigger the ﬁle size TW 2011 @hurrycane Monday, February 21, 2011

6. The BIGGER the website - the selectors get larger TW 2011 @hurrycane Monday, February 21, 2011

7. http://special-web.wikispaces.com/Presentations TW 2011 @hurrycane Monday, February 21, 2011

8. http://special-web.wikispaces.com/Presentations Load time TW 2011 @hurrycane Monday, February 21, 2011

9. http://special-web.wikispaces.com/Presentations Size TW 2011 @hurrycane Monday, February 21, 2011

10. http://www.trilulilu.ro Load time Size TW 2011 @hurrycane Monday, February 21, 2011

11. 21% of Top 1000 Alexa* have >100k of CSS *Alexa = internet trafﬁc stats TW 2011 @hurrycane Monday, February 21, 2011

12. How? TW 2011 @hurrycane Monday, February 21, 2011

13. Reduce ﬁle size GZIP Number of css ﬁles Minify Reuse code Smaller selectors TW 2011 @hurrycane Monday, February 21, 2011

14. Reduce ﬁle size GZIP Client Server TW 2011 @hurrycane Monday, February 21, 2011

15. Reduce ﬁle size GZIP Request Client Server TW 2011 @hurrycane Monday, February 21, 2011

16. Reduce ﬁle size GZIP Request Client Server Response TW 2011 @hurrycane Monday, February 21, 2011

17. Reduce ﬁle size GZIP Request Client Server Response gzip TW 2011 @hurrycane Monday, February 21, 2011

18. Reduce ﬁle size - gzip Important bandwidth reduction example Amazon EC2 1 TB (uncompressed) = $174 1 TB (compressed) = $43.52 TW 2011 @hurrycane Monday, February 21, 2011

19. Reduce ﬁle size - gzip Important bandwidth reduction example Amazon EC2 1 TB (uncompressed) = $174 4:1 compression 1 TB (compressed) = $43.52 TW 2011 @hurrycane Monday, February 21, 2011

20. gzip mod_delate Demo TW 2011 @hurrycane Monday, February 21, 2011

21. Reduce ﬁle size GZIP Number of css ﬁles Minify Reuse code Smaller selectors TW 2011 @hurrycane Monday, February 21, 2011

22. Reduce ﬁle size GZIP Number of css ﬁles Minify Reuse code Smaller selectors TW 2011 @hurrycane Monday, February 21, 2011

23. Reduce ﬁle size Miniﬁcation = remove unnecessary characters from code without changing functionality TW 2011 @hurrycane Monday, February 21, 2011

24. Reduce ﬁle size Miniﬁcation is done using different tools. YUI-Compressor Minify Closure Compiler (google) TW 2011 @hurrycane Monday, February 21, 2011

25. Reduce ﬁle size YUI-Compressor is used for both JavaScript and CSS Written in Java Command line tool yuicompressor ceva.css -o ceva.min.css TW 2011 @hurrycane Monday, February 21, 2011

26. YUI-Compressor Demo TW 2011 @hurrycane Monday, February 21, 2011

27. Reduce ﬁle size GZIP Number of css ﬁles Minify Reuse code Smaller selectors TW 2011 @hurrycane Monday, February 21, 2011

28. Reduce rendering time TW 2011 @hurrycane Monday, February 21, 2011

29. Paradigm shift ul { ... } ul li { ... } ul li a { ... } Until now, focus was here TW 2011 @hurrycane Monday, February 21, 2011

30. Paradigm shift ul { ... } ul li { ... } ul li a { ... } Arhitecture lives here TW 2011 @hurrycane Monday, February 21, 2011

31. Object oriented css Objects rather than pages Global defaults Abstract reusable elements Separate structure and skin Use multiple classes to simulate OO TW 2011 @hurrycane Monday, February 21, 2011

32. Example of optimisation: Facebook’s Big pipe TW 2011 @hurrycane Monday, February 21, 2011

33. Example of optimisation: Facebook’s Big pipe 50% improvement gain in loading speed TW 2011 @hurrycane Monday, February 21, 2011

34. Choose the solution that best ﬁts you! TW 2011 @hurrycane Monday, February 21, 2011

35. QA TW 2011 @hurrycane Monday, February 21, 2011

36. Thanks! TW 2011 @hurrycane Monday, February 21, 2011

[TW] CSS Files Optimization

Recomendados

Recomendados

Mais conteúdo relacionado

Último

Último (20)

Destaque

Destaque (20)

[TW] CSS Files Optimization