SlideShare a Scribd company logo
Front-End Performance Optimizing How to optimize the Front-End  to get the   maximum   loading   speed © 2010 by Michael Pehl - http://www.cookielessdomain.com
Front-End Performance Optimizing “ Front-End Performance Optimizing”? What is that? Front-End Optimizing is optimizing a website with different techniques to achieve the fastest possible loading speed. In this case only the Front-End counts. The Front-End is the part of the website that is transferred and executed/rendered to the client (browser) and contains at least the following four parts: - HTML code - CSS code - JavaScript code - Image files (optional media files like .swf, .mov, .mp3,...) © 2010 by Michael Pehl - http://www.cookielessdomain.com
Front-End Performance Optimizing How does it work? The different parts of the optimizing process are (1-3) : 1. Common HTML Programming Tasks - Avoid HTML errors (W3C Validation) - Delete comments from HTML document 2. Common CSS Programming Tasks - Avoid CSS expressions 3. Optimizing HTML - Optimize the order of styles and scripts - Avoid usage of tables for website design - Avoid usage of inline styles - Avoid usage of inline JavaScript © 2010 by Michael Pehl - http://www.cookielessdomain.com
Front-End Performance Optimizing How does it work? The different parts of the optimizing process are (4-6) : 4. Optimizing CSS - Remove unused CSS 5. Optimizing JavaScript - Remove unused JavaScript 6. Minimize HTTP Requests - Combine external CSS - Combine external JavaScript - Use CSS Sprites to reduce the amount of images to download © 2010 by Michael Pehl - http://www.cookielessdomain.com
Front-End Performance Optimizing How does it work? The different parts of the optimizing process are (7-9) : 7. Compressing CSS/JavaScript/image files - Minify combined CSS - Minify combined JavaScript - Optimize image file size with tools like Yahoo SmushIt 8. Reduce download size and increment the number of concurrent downloads - Serve static content (CSS/JavaScript/image files) from a cookieless domain - Parallelize downloads across hostnames 9. Server-Side Compression and Browser Caching - Enable compression (mod_gzip/mod_deflate on Apache web server) - Leverage browser caching (mod_expires on Apache web server) - Specify a Vary: Accept-Encoding header (mod_headers on Apache web server) © 2010 by Michael Pehl - http://www.cookielessdomain.com

More Related Content

What's hot

Challenges of angular in production (Tasos Bekos) - GreeceJS #17
Challenges of angular in production (Tasos Bekos) - GreeceJS #17Challenges of angular in production (Tasos Bekos) - GreeceJS #17
Challenges of angular in production (Tasos Bekos) - GreeceJS #17
GreeceJS
 
Metarefresh
MetarefreshMetarefresh
Metarefresh
Aakash Bapna
 
Front-End Web Performance Optimization by BucketSoft
Front-End Web Performance Optimization by BucketSoftFront-End Web Performance Optimization by BucketSoft
Front-End Web Performance Optimization by BucketSoft
Steve Wortham
 
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Adam Dunford
 
Search in WordPress - how it works and howto customize it
Search in WordPress - how it works and howto customize itSearch in WordPress - how it works and howto customize it
Search in WordPress - how it works and howto customize it
Otto Kekäläinen
 
Speed!
Speed!Speed!
Meta Refresh 2014
Meta Refresh 2014Meta Refresh 2014
Meta Refresh 2014
Aakash Bapna
 
Odoo - Open Source CMS: A performance comparision
Odoo - Open Source CMS: A performance comparisionOdoo - Open Source CMS: A performance comparision
Odoo - Open Source CMS: A performance comparision
Odoo
 
WordCamp RVA 2011 - Performance & Tuning
WordCamp RVA 2011 - Performance & TuningWordCamp RVA 2011 - Performance & Tuning
WordCamp RVA 2011 - Performance & Tuning
Timothy Wood
 
I Can Haz More Performanz?
I Can Haz More Performanz?I Can Haz More Performanz?
I Can Haz More Performanz?
Andy Melichar
 
Drupal Frontend Performance and Scalability
Drupal Frontend Performance and ScalabilityDrupal Frontend Performance and Scalability
Drupal Frontend Performance and Scalability
Ashok Modi
 
Presentation1
Presentation1Presentation1
Presentation1
Rosie brown
 
High Performance - Joomla!Days NL 2009 #jd09nl
High Performance - Joomla!Days NL 2009 #jd09nlHigh Performance - Joomla!Days NL 2009 #jd09nl
High Performance - Joomla!Days NL 2009 #jd09nl
Joomla!Days Netherlands
 
Heavy Web Optimization: Frontend
Heavy Web Optimization: FrontendHeavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Võ Duy Tuấn
 
Mastering WordPress Vol.1
Mastering WordPress Vol.1Mastering WordPress Vol.1
Mastering WordPress Vol.1
Wataru OKAMOTO
 
EasyEngine - Command-Line tool to manage WordPress Sites on Nginx
EasyEngine - Command-Line tool to manage WordPress Sites on NginxEasyEngine - Command-Line tool to manage WordPress Sites on Nginx
EasyEngine - Command-Line tool to manage WordPress Sites on Nginx
rtCamp
 
Theming Wordpress for Your Showcases
Theming Wordpress for Your ShowcasesTheming Wordpress for Your Showcases
Theming Wordpress for Your Showcases
Jun Hu
 
Caching 101
Caching 101Caching 101
Caching 101
Andy Melichar
 
Speeding up your WordPress Site - WordCamp Toronto 2015
Speeding up your WordPress Site - WordCamp Toronto 2015Speeding up your WordPress Site - WordCamp Toronto 2015
Speeding up your WordPress Site - WordCamp Toronto 2015
Alan Lok
 
How to integrate your design in Odoo v8 CMS
How to integrate your design in Odoo v8 CMSHow to integrate your design in Odoo v8 CMS
How to integrate your design in Odoo v8 CMS
Odoo
 

What's hot (20)

Challenges of angular in production (Tasos Bekos) - GreeceJS #17
Challenges of angular in production (Tasos Bekos) - GreeceJS #17Challenges of angular in production (Tasos Bekos) - GreeceJS #17
Challenges of angular in production (Tasos Bekos) - GreeceJS #17
 
Metarefresh
MetarefreshMetarefresh
Metarefresh
 
Front-End Web Performance Optimization by BucketSoft
Front-End Web Performance Optimization by BucketSoftFront-End Web Performance Optimization by BucketSoft
Front-End Web Performance Optimization by BucketSoft
 
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
 
Search in WordPress - how it works and howto customize it
Search in WordPress - how it works and howto customize itSearch in WordPress - how it works and howto customize it
Search in WordPress - how it works and howto customize it
 
Speed!
Speed!Speed!
Speed!
 
Meta Refresh 2014
Meta Refresh 2014Meta Refresh 2014
Meta Refresh 2014
 
Odoo - Open Source CMS: A performance comparision
Odoo - Open Source CMS: A performance comparisionOdoo - Open Source CMS: A performance comparision
Odoo - Open Source CMS: A performance comparision
 
WordCamp RVA 2011 - Performance & Tuning
WordCamp RVA 2011 - Performance & TuningWordCamp RVA 2011 - Performance & Tuning
WordCamp RVA 2011 - Performance & Tuning
 
I Can Haz More Performanz?
I Can Haz More Performanz?I Can Haz More Performanz?
I Can Haz More Performanz?
 
Drupal Frontend Performance and Scalability
Drupal Frontend Performance and ScalabilityDrupal Frontend Performance and Scalability
Drupal Frontend Performance and Scalability
 
Presentation1
Presentation1Presentation1
Presentation1
 
High Performance - Joomla!Days NL 2009 #jd09nl
High Performance - Joomla!Days NL 2009 #jd09nlHigh Performance - Joomla!Days NL 2009 #jd09nl
High Performance - Joomla!Days NL 2009 #jd09nl
 
Heavy Web Optimization: Frontend
Heavy Web Optimization: FrontendHeavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
 
Mastering WordPress Vol.1
Mastering WordPress Vol.1Mastering WordPress Vol.1
Mastering WordPress Vol.1
 
EasyEngine - Command-Line tool to manage WordPress Sites on Nginx
EasyEngine - Command-Line tool to manage WordPress Sites on NginxEasyEngine - Command-Line tool to manage WordPress Sites on Nginx
EasyEngine - Command-Line tool to manage WordPress Sites on Nginx
 
Theming Wordpress for Your Showcases
Theming Wordpress for Your ShowcasesTheming Wordpress for Your Showcases
Theming Wordpress for Your Showcases
 
Caching 101
Caching 101Caching 101
Caching 101
 
Speeding up your WordPress Site - WordCamp Toronto 2015
Speeding up your WordPress Site - WordCamp Toronto 2015Speeding up your WordPress Site - WordCamp Toronto 2015
Speeding up your WordPress Site - WordCamp Toronto 2015
 
How to integrate your design in Odoo v8 CMS
How to integrate your design in Odoo v8 CMSHow to integrate your design in Odoo v8 CMS
How to integrate your design in Odoo v8 CMS
 

Similar to Front-End Performance Optimizing

Modelling Web Performance Optimization - FFSUx
Modelling  Web Performance Optimization - FFSUxModelling  Web Performance Optimization - FFSUx
Modelling Web Performance Optimization - FFSUx
Haribabu Nandyal Padmanaban
 
Accelerate SharePoint 2007 and 2010 websites and intranets mike iem - apti...
Accelerate SharePoint 2007 and 2010 websites and intranets    mike iem - apti...Accelerate SharePoint 2007 and 2010 websites and intranets    mike iem - apti...
Accelerate SharePoint 2007 and 2010 websites and intranets mike iem - apti...
Aptimize
 
High Performance Ajax Applications
High Performance Ajax ApplicationsHigh Performance Ajax Applications
High Performance Ajax Applications
Siarhei Barysiuk
 
Front-end performances
Front-end performancesFront-end performances
Front-end performances
Smile I.T is open
 
SEO 101 - Google Page Speed Insights Explained
SEO 101 - Google Page Speed Insights Explained SEO 101 - Google Page Speed Insights Explained
SEO 101 - Google Page Speed Insights Explained
Steve Weber
 
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital MarketersSearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
Distilled
 
Html5 & less css
Html5 & less cssHtml5 & less css
Html5 & less css
Graham Johnson
 
Performace optimization (increase website speed)
Performace optimization (increase website speed)Performace optimization (increase website speed)
Performace optimization (increase website speed)
clickramanm
 
Open-source website performance tools
Open-source website performance toolsOpen-source website performance tools
Open-source website performance tools
Artur Cistov
 
Make Drupal Run Fast - increase page load speed
Make Drupal Run Fast - increase page load speedMake Drupal Run Fast - increase page load speed
Make Drupal Run Fast - increase page load speed
Andy Kucharski
 
Frontend performance
Frontend performanceFrontend performance
Frontend performance
sacred 8
 
How to optimize your Magento store
How to optimize your Magento store How to optimize your Magento store
How to optimize your Magento store
Rasbor.com
 
The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5
Todd Anglin
 
Testing and Improving Performance
Testing and Improving PerformanceTesting and Improving Performance
Testing and Improving Performance
Nicole Ryan
 
Web Performance Optimization (WPO)
Web Performance Optimization (WPO)Web Performance Optimization (WPO)
Web Performance Optimization (WPO)
Betclic Everest Group Tech Team
 
Website optimization
Website optimizationWebsite optimization
Website optimization
Mindfire Solutions
 
Drupal performance optimization Best Practices
Drupal performance optimization Best PracticesDrupal performance optimization Best Practices
Drupal performance optimization Best Practices
Ratnesh kumar, CSM
 
Client Side Performance @ Xero
Client Side Performance @ XeroClient Side Performance @ Xero
Client Side Performance @ Xero
Craig Walker
 
Website Development Guidelines
Website Development GuidelinesWebsite Development Guidelines
Website Development Guidelines
Amit Kute
 
A High-Performance Solution To Microservices UI Composition
A High-Performance Solution To Microservices UI CompositionA High-Performance Solution To Microservices UI Composition
A High-Performance Solution To Microservices UI Composition
Alexey Gravanov
 

Similar to Front-End Performance Optimizing (20)

Modelling Web Performance Optimization - FFSUx
Modelling  Web Performance Optimization - FFSUxModelling  Web Performance Optimization - FFSUx
Modelling Web Performance Optimization - FFSUx
 
Accelerate SharePoint 2007 and 2010 websites and intranets mike iem - apti...
Accelerate SharePoint 2007 and 2010 websites and intranets    mike iem - apti...Accelerate SharePoint 2007 and 2010 websites and intranets    mike iem - apti...
Accelerate SharePoint 2007 and 2010 websites and intranets mike iem - apti...
 
High Performance Ajax Applications
High Performance Ajax ApplicationsHigh Performance Ajax Applications
High Performance Ajax Applications
 
Front-end performances
Front-end performancesFront-end performances
Front-end performances
 
SEO 101 - Google Page Speed Insights Explained
SEO 101 - Google Page Speed Insights Explained SEO 101 - Google Page Speed Insights Explained
SEO 101 - Google Page Speed Insights Explained
 
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital MarketersSearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
 
Html5 & less css
Html5 & less cssHtml5 & less css
Html5 & less css
 
Performace optimization (increase website speed)
Performace optimization (increase website speed)Performace optimization (increase website speed)
Performace optimization (increase website speed)
 
Open-source website performance tools
Open-source website performance toolsOpen-source website performance tools
Open-source website performance tools
 
Make Drupal Run Fast - increase page load speed
Make Drupal Run Fast - increase page load speedMake Drupal Run Fast - increase page load speed
Make Drupal Run Fast - increase page load speed
 
Frontend performance
Frontend performanceFrontend performance
Frontend performance
 
How to optimize your Magento store
How to optimize your Magento store How to optimize your Magento store
How to optimize your Magento store
 
The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5
 
Testing and Improving Performance
Testing and Improving PerformanceTesting and Improving Performance
Testing and Improving Performance
 
Web Performance Optimization (WPO)
Web Performance Optimization (WPO)Web Performance Optimization (WPO)
Web Performance Optimization (WPO)
 
Website optimization
Website optimizationWebsite optimization
Website optimization
 
Drupal performance optimization Best Practices
Drupal performance optimization Best PracticesDrupal performance optimization Best Practices
Drupal performance optimization Best Practices
 
Client Side Performance @ Xero
Client Side Performance @ XeroClient Side Performance @ Xero
Client Side Performance @ Xero
 
Website Development Guidelines
Website Development GuidelinesWebsite Development Guidelines
Website Development Guidelines
 
A High-Performance Solution To Microservices UI Composition
A High-Performance Solution To Microservices UI CompositionA High-Performance Solution To Microservices UI Composition
A High-Performance Solution To Microservices UI Composition
 

Recently uploaded

Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
Mariano Tinti
 
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptxOcean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
SitimaJohn
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
Tomaz Bratanic
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
tolgahangng
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
Wouter Lemaire
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Wask
 
Recommendation System using RAG Architecture
Recommendation System using RAG ArchitectureRecommendation System using RAG Architecture
Recommendation System using RAG Architecture
fredae14
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
David Brossard
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
Matthew Sinclair
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
Quotidiano Piemontese
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
Daiki Mogmet Ito
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
danishmna97
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
saastr
 

Recently uploaded (20)

Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
 
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptxOcean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
 
Recommendation System using RAG Architecture
Recommendation System using RAG ArchitectureRecommendation System using RAG Architecture
Recommendation System using RAG Architecture
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
 

Front-End Performance Optimizing

  • 1. Front-End Performance Optimizing How to optimize the Front-End to get the maximum loading speed © 2010 by Michael Pehl - http://www.cookielessdomain.com
  • 2. Front-End Performance Optimizing “ Front-End Performance Optimizing”? What is that? Front-End Optimizing is optimizing a website with different techniques to achieve the fastest possible loading speed. In this case only the Front-End counts. The Front-End is the part of the website that is transferred and executed/rendered to the client (browser) and contains at least the following four parts: - HTML code - CSS code - JavaScript code - Image files (optional media files like .swf, .mov, .mp3,...) © 2010 by Michael Pehl - http://www.cookielessdomain.com
  • 3. Front-End Performance Optimizing How does it work? The different parts of the optimizing process are (1-3) : 1. Common HTML Programming Tasks - Avoid HTML errors (W3C Validation) - Delete comments from HTML document 2. Common CSS Programming Tasks - Avoid CSS expressions 3. Optimizing HTML - Optimize the order of styles and scripts - Avoid usage of tables for website design - Avoid usage of inline styles - Avoid usage of inline JavaScript © 2010 by Michael Pehl - http://www.cookielessdomain.com
  • 4. Front-End Performance Optimizing How does it work? The different parts of the optimizing process are (4-6) : 4. Optimizing CSS - Remove unused CSS 5. Optimizing JavaScript - Remove unused JavaScript 6. Minimize HTTP Requests - Combine external CSS - Combine external JavaScript - Use CSS Sprites to reduce the amount of images to download © 2010 by Michael Pehl - http://www.cookielessdomain.com
  • 5. Front-End Performance Optimizing How does it work? The different parts of the optimizing process are (7-9) : 7. Compressing CSS/JavaScript/image files - Minify combined CSS - Minify combined JavaScript - Optimize image file size with tools like Yahoo SmushIt 8. Reduce download size and increment the number of concurrent downloads - Serve static content (CSS/JavaScript/image files) from a cookieless domain - Parallelize downloads across hostnames 9. Server-Side Compression and Browser Caching - Enable compression (mod_gzip/mod_deflate on Apache web server) - Leverage browser caching (mod_expires on Apache web server) - Specify a Vary: Accept-Encoding header (mod_headers on Apache web server) © 2010 by Michael Pehl - http://www.cookielessdomain.com