SlideShare uma empresa Scribd logo
1 de 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

Mais conteúdo relacionado

Mais procurados

Mais procurados (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
 

Semelhante a 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
 

Semelhante a 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
 

Último

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
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
 

Último (20)

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
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
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
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
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
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
 
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
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
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
 

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/