SlideShare a Scribd company logo
1 of 20
PageSpeed Optimization
Make your web pages load faster
PageSpeed Optimization on all devices
If you care about performance then…
Analyze your website:
http://developers.google.com/speed/pagespeed/insights/
Basic Rules to make your page load Faster

• Optimizing Images
• Using correct order of stylesheets, scripts, and
inline JavaScript code
• Leverage browser caching
• Minify files
• Enable Gzip
Optimizing Images
• Use text with CSS3 instead of images, if
possible

• Use web format of images like gif or png
• Use photo editor to use EXACT image size
required
• Use the height and width attributes under the
img tag (specify image dimensions)

• DON'T scale images in HTML
• Avoiding EMPTY image ‘src’
Using correct order
• CSS files at the top under the head tag
• JavaScript scripts at the bottom of the body tag
• Use the table less design whenever possible
Leverage Browser Caching
What does ‘Leverage’ means?
What does ‘Leverage Browser caching’ means?

This rule triggers when
PageSpeed Insights
detects that the
response from your
server doesn’t include
explicit caching headers
or if the resources
have a short freshness
lifetime.
It simply means

Setting an expiry date
Reduce the load times of pages by storing
commonly used files from your website on your
visitors browser.
It is suppose to be done in .htaccess file
How to do it?
Important
When you are done save the file as it is i.e.
.htaccess

and not as a
.txt file
Minify files
•
•
•
•

Minify CSS
Minify HTML
Minify Javascript
Avoid bad requests: Removing "broken links", or
requests that result in 404/410 errors, avoids
wasteful requests.
• And the last point is…

Enable Gzip
gzip is a software application used for file
compression and decompression.

Effective way to
save bandwidth and
speed up your site
OR / if that does not work
# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
To get instant changes use

http://www.gtmetrix.com/
Its Over
Thank you

More Related Content

What's hot

What's hot (20)

CGS2835 HTML5
CGS2835 HTML5CGS2835 HTML5
CGS2835 HTML5
 
UXify 2015 - Front-end Developers' Checklist for Better UX
UXify 2015 - Front-end Developers' Checklist for Better UXUXify 2015 - Front-end Developers' Checklist for Better UX
UXify 2015 - Front-end Developers' Checklist for Better UX
 
SASS for WordPress Workshop
SASS for WordPress WorkshopSASS for WordPress Workshop
SASS for WordPress Workshop
 
Responsive Web Development
Responsive Web DevelopmentResponsive Web Development
Responsive Web Development
 
The Afterburner - Optimizing Drupal for Speed and SEO
The Afterburner - Optimizing Drupal for Speed and SEOThe Afterburner - Optimizing Drupal for Speed and SEO
The Afterburner - Optimizing Drupal for Speed and SEO
 
Intro to front end development Basic
Intro to front end development BasicIntro to front end development Basic
Intro to front end development Basic
 
WordCamp Tokyo 2011 komori
WordCamp Tokyo 2011 komoriWordCamp Tokyo 2011 komori
WordCamp Tokyo 2011 komori
 
Drupal front-end performance
Drupal front-end performance Drupal front-end performance
Drupal front-end performance
 
BRE Deep Dive
BRE Deep DiveBRE Deep Dive
BRE Deep Dive
 
Java script tutorial
Java script tutorialJava script tutorial
Java script tutorial
 
LESS is More (ChiHTML5 Meetup June 2016)
LESS is More (ChiHTML5 Meetup June 2016)LESS is More (ChiHTML5 Meetup June 2016)
LESS is More (ChiHTML5 Meetup June 2016)
 
Quick And Easy Guide To Speeding Up MySQL for web developers
Quick And Easy Guide To Speeding Up MySQL for web developersQuick And Easy Guide To Speeding Up MySQL for web developers
Quick And Easy Guide To Speeding Up MySQL for web developers
 
Session 2 intro to Css
Session 2 intro to CssSession 2 intro to Css
Session 2 intro to Css
 
Introduction to web application development
Introduction to web application developmentIntroduction to web application development
Introduction to web application development
 
Ajax
AjaxAjax
Ajax
 
Core Web Vitals Optimization for any website, especially WordPress
Core Web Vitals Optimization for any website, especially WordPressCore Web Vitals Optimization for any website, especially WordPress
Core Web Vitals Optimization for any website, especially WordPress
 
Php ppt
Php pptPhp ppt
Php ppt
 
46h interaction 1.lesson Hello world
46h interaction 1.lesson Hello world46h interaction 1.lesson Hello world
46h interaction 1.lesson Hello world
 
Gaining (and Not Betraying) User Trust in WordPress eCommerce
Gaining (and Not Betraying) User Trust in WordPress eCommerceGaining (and Not Betraying) User Trust in WordPress eCommerce
Gaining (and Not Betraying) User Trust in WordPress eCommerce
 
JavaScript & CSS Development Workflow
JavaScript & CSS Development WorkflowJavaScript & CSS Development Workflow
JavaScript & CSS Development Workflow
 

Similar to PageSpeed Optimization

Drupal Frontend Performance and Scalability
Drupal Frontend Performance and ScalabilityDrupal Frontend Performance and Scalability
Drupal Frontend Performance and Scalability
Ashok Modi
 
Website Performance
Website PerformanceWebsite Performance
Website Performance
Hugo Fonseca
 

Similar to PageSpeed Optimization (20)

Minimize website page loading time – 20+ advanced SEO tips
Minimize website page loading time – 20+ advanced SEO tipsMinimize website page loading time – 20+ advanced SEO tips
Minimize website page loading time – 20+ advanced SEO tips
 
The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014
The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014
The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014
 
The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013
 
Search Oxford March 2022 - Most common ecommerce mistakes that are killing yo...
Search Oxford March 2022 - Most common ecommerce mistakes that are killing yo...Search Oxford March 2022 - Most common ecommerce mistakes that are killing yo...
Search Oxford March 2022 - Most common ecommerce mistakes that are killing yo...
 
Speed!
Speed!Speed!
Speed!
 
Client Side Optimization
Client Side OptimizationClient Side Optimization
Client Side Optimization
 
10 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 201210 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 2012
 
Word press optimizations
Word press optimizations Word press optimizations
Word press optimizations
 
High Performance Ajax Applications
High Performance Ajax ApplicationsHigh Performance Ajax Applications
High Performance Ajax Applications
 
Optimizing Your WordPress Site: Why speed matters, and how to get there
Optimizing Your WordPress Site: Why speed matters, and how to get thereOptimizing Your WordPress Site: Why speed matters, and how to get there
Optimizing Your WordPress Site: Why speed matters, and how to get there
 
Harder, Better, Faster, Stronger
Harder, Better, Faster, StrongerHarder, Better, Faster, Stronger
Harder, Better, Faster, Stronger
 
Magento Performance Optimization 101
Magento Performance Optimization 101Magento Performance Optimization 101
Magento Performance Optimization 101
 
High-Speed HTML5
High-Speed HTML5High-Speed HTML5
High-Speed HTML5
 
Static resource-optimization using webutilities
Static resource-optimization using webutilitiesStatic resource-optimization using webutilities
Static resource-optimization using webutilities
 
Drupal Frontend Performance and Scalability
Drupal Frontend Performance and ScalabilityDrupal Frontend Performance and Scalability
Drupal Frontend Performance and Scalability
 
How to Improve Magento Performance | Tips to Speed up Magento eCommerce Site/...
How to Improve Magento Performance | Tips to Speed up Magento eCommerce Site/...How to Improve Magento Performance | Tips to Speed up Magento eCommerce Site/...
How to Improve Magento Performance | Tips to Speed up Magento eCommerce Site/...
 
Html Optimization for SEO
Html Optimization for SEOHtml Optimization for SEO
Html Optimization for SEO
 
SEO best practices to increase your page speed
SEO best practices to increase your page speedSEO best practices to increase your page speed
SEO best practices to increase your page speed
 
WordCamp Denmark Keynote
WordCamp Denmark KeynoteWordCamp Denmark Keynote
WordCamp Denmark Keynote
 
Website Performance
Website PerformanceWebsite Performance
Website Performance
 

Recently uploaded

Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
FIDO Alliance
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc
 

Recently uploaded (20)

API Governance and Monetization - The evolution of API governance
API Governance and Monetization -  The evolution of API governanceAPI Governance and Monetization -  The evolution of API governance
API Governance and Monetization - The evolution of API governance
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cf
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Choreo: Empowering the Future of Enterprise Software Engineering
Choreo: Empowering the Future of Enterprise Software EngineeringChoreo: Empowering the Future of Enterprise Software Engineering
Choreo: Empowering the Future of Enterprise Software Engineering
 
Modernizing Legacy Systems Using Ballerina
Modernizing Legacy Systems Using BallerinaModernizing Legacy Systems Using Ballerina
Modernizing Legacy Systems Using Ballerina
 
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
 
Simplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptxSimplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptx
 

PageSpeed Optimization

  • 1. PageSpeed Optimization Make your web pages load faster PageSpeed Optimization on all devices
  • 2. If you care about performance then… Analyze your website: http://developers.google.com/speed/pagespeed/insights/
  • 3. Basic Rules to make your page load Faster • Optimizing Images • Using correct order of stylesheets, scripts, and inline JavaScript code • Leverage browser caching • Minify files • Enable Gzip
  • 5. • Use text with CSS3 instead of images, if possible • Use web format of images like gif or png • Use photo editor to use EXACT image size required • Use the height and width attributes under the img tag (specify image dimensions) • DON'T scale images in HTML • Avoiding EMPTY image ‘src’
  • 6. Using correct order • CSS files at the top under the head tag • JavaScript scripts at the bottom of the body tag • Use the table less design whenever possible
  • 7. Leverage Browser Caching What does ‘Leverage’ means?
  • 8.
  • 9. What does ‘Leverage Browser caching’ means? This rule triggers when PageSpeed Insights detects that the response from your server doesn’t include explicit caching headers or if the resources have a short freshness lifetime.
  • 10. It simply means Setting an expiry date Reduce the load times of pages by storing commonly used files from your website on your visitors browser. It is suppose to be done in .htaccess file
  • 11. How to do it?
  • 12. Important When you are done save the file as it is i.e. .htaccess and not as a .txt file
  • 13. Minify files • • • • Minify CSS Minify HTML Minify Javascript Avoid bad requests: Removing "broken links", or requests that result in 404/410 errors, avoids wasteful requests.
  • 14. • And the last point is… Enable Gzip
  • 15.
  • 16. gzip is a software application used for file compression and decompression. Effective way to save bandwidth and speed up your site
  • 17.
  • 18. OR / if that does not work # compress text, html, javascript, css, xml: AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript
  • 19. To get instant changes use http://www.gtmetrix.com/