SlideShare une entreprise Scribd logo
1  sur  2
Télécharger pour lire hors ligne
TOP CSS AND JAVASCRIPT PERFORMANCE TIPS
There are many risks that come with having a site that’s slow to load. You could risk losing
potential customers, have a lower engagement level and eventually end up with no traffic
whatsoever. The speed of a website is much more than just the size of files. Browsers need to
have the adequate capabilities to understand and process the code written.
Sometimes making edits to your code during the website development stage can be worthwhile
as they save the end-user time when trying to access your webpage, as browsers will be able to
digest and translate it quicker. Below are some key tips that web development
agency professionals should consider for speeding up the performance of their developments
through code.
Never Repeat
Make use of the cascade and never repeat code, unless absolutely necessary. It extends further
than simply using common classes; you should also make use of the heritance. In the same vein
you can use the same set of properties for multiple elements of your development ensuring you
separate multiple selectors using commas as usual.
JavaScript also allows you to make use of objects, functions and plugins which gives you even
less need to repeat code.
Utilise IDs
IDs are really fast and wherever possible you should make use of them. They are faster in both
CSS and JavaScript and when using JavaScript you can even use alternatives to jQuery to select
tags such as document.body.
Right to Left
Browsers translate and process jQuery and CSS from right to left. Therefore, where possibly
write in this way to speed things up for the browser. The only answer is to write your code as
specifically as possible and where possible write backwards, so the browser can digest and
translate what you’re trying to say in its natural way as quickly as possible.
Short Selectors
In some instances an extra item in your selector can completely ruin your code. For example if
you’re writing a “ul li a” selector in most instances it’s more than possible to simply use the “ul
a” for the same effect.
When it comes to JavaScript we’d recommend you simply don’t use it as all it will do is cost you
development time, user performance results and maintenance, as well as causing issues with
some browser compatibility.
Redefine Vars Locally
Many website developers simply skip the var declaration step altogether. It’s not ideal as you
end up creating a lot of global variables which can break other functionality and when the
browser tries to recover it will search locally then globally.
Even if you choose to use global scope vars you should consider redefining them locally to save
some time.
One Less JPG
The One Less JPG movement suggests a solution to the JaveScript library / framework size
problem. It simply states you should remove one .jpg file from your site to compensate for added
JavaScript. The removal of a single image can create the additional speed and space for your
JavaScript.
These tips will help ensure all your website development projects are completed with all
browsers in mind and with performance speed as a key focus.

Contenu connexe

En vedette

How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Applitools
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at WorkGetSmarter
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...DevGAMM Conference
 
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationErica Santiago
 
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellSaba Software
 
Introduction to C Programming Language
Introduction to C Programming LanguageIntroduction to C Programming Language
Introduction to C Programming LanguageSimplilearn
 

En vedette (20)

How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
 
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy Presentation
 
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
 
Introduction to C Programming Language
Introduction to C Programming LanguageIntroduction to C Programming Language
Introduction to C Programming Language
 

CSS and JavaScript Performance Tips

  • 1. TOP CSS AND JAVASCRIPT PERFORMANCE TIPS There are many risks that come with having a site that’s slow to load. You could risk losing potential customers, have a lower engagement level and eventually end up with no traffic whatsoever. The speed of a website is much more than just the size of files. Browsers need to have the adequate capabilities to understand and process the code written. Sometimes making edits to your code during the website development stage can be worthwhile as they save the end-user time when trying to access your webpage, as browsers will be able to digest and translate it quicker. Below are some key tips that web development agency professionals should consider for speeding up the performance of their developments through code. Never Repeat Make use of the cascade and never repeat code, unless absolutely necessary. It extends further than simply using common classes; you should also make use of the heritance. In the same vein you can use the same set of properties for multiple elements of your development ensuring you separate multiple selectors using commas as usual. JavaScript also allows you to make use of objects, functions and plugins which gives you even less need to repeat code. Utilise IDs IDs are really fast and wherever possible you should make use of them. They are faster in both CSS and JavaScript and when using JavaScript you can even use alternatives to jQuery to select tags such as document.body. Right to Left Browsers translate and process jQuery and CSS from right to left. Therefore, where possibly write in this way to speed things up for the browser. The only answer is to write your code as specifically as possible and where possible write backwards, so the browser can digest and translate what you’re trying to say in its natural way as quickly as possible.
  • 2. Short Selectors In some instances an extra item in your selector can completely ruin your code. For example if you’re writing a “ul li a” selector in most instances it’s more than possible to simply use the “ul a” for the same effect. When it comes to JavaScript we’d recommend you simply don’t use it as all it will do is cost you development time, user performance results and maintenance, as well as causing issues with some browser compatibility. Redefine Vars Locally Many website developers simply skip the var declaration step altogether. It’s not ideal as you end up creating a lot of global variables which can break other functionality and when the browser tries to recover it will search locally then globally. Even if you choose to use global scope vars you should consider redefining them locally to save some time. One Less JPG The One Less JPG movement suggests a solution to the JaveScript library / framework size problem. It simply states you should remove one .jpg file from your site to compensate for added JavaScript. The removal of a single image can create the additional speed and space for your JavaScript. These tips will help ensure all your website development projects are completed with all browsers in mind and with performance speed as a key focus.