SlideShare a Scribd company logo

Web Performance & Operation - Pagespeed

D
draskolnikova

The document presents an overview of PageSpeed, a web performance optimization tool developed to enhance website speed and reduce load times. Introduced in 2010, it has since been adapted to work with various web server platforms, including Apache, Nginx, and Microsoft IIS, and automates the optimization of web assets without requiring extensive programming skills. The document also discusses concepts such as CDN-like optimization and includes performance comparison metrics.

Technology
1 of 19
Downloaded 12 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Products of How to Train Your “DRAGON” taking web user experience to the next level Sept 2013 Presented by D. B. Alam & I. Kurniawan Research on © 2013 – Sysadmin PT. Merah Cipta Media
What is Pagespeed ? PageSpeed speeds up your site and reduces page load time. This open-source webserver module automatically applies web performance best practices to pages and associated assets (CSS, JavaScript, images) without requiring that you modify your existing content or workflow. taking web user experience to the next level @draskolnikova @idkurniawan
When Pagespeed was ‘born’ ? Pagespeed was developed on mid 2009 and introduced to public on November 2010. Pagespeed’s initial release only compatible with Apache Module called mod_pagespeed Jan, 2013 the Google Dev start port the Pagespeed Apache Module to NginX. Still in Jan, 2013, outside of Google Developers Project, a startup company start porting Pagespeed could running on Microsoft IIS. And now Pagespeed are able to run and works properly on most popular web server platform. taking web user experience to the next level @draskolnikova @idkurniawan
How Pagespeed works ? img: webdevcorner.nettaking web user experience to the next level @draskolnikova @idkurniawan
Why Pagespeed ? Auto[magic]ally optimize Scalability Almost no programming skills needed Better web performance taking web user experience to the next level @draskolnikova @idkurniawan Internet Connection slow on some location
Who use Pagespeed ? and many more … taking web user experience to the next level @draskolnikova @idkurniawan
Unified Modeling Language – LintasMe taking web user experience to the next level @draskolnikova @idkurniawan User request a webpage include static files (images, javascript, css). Then the web server split it into 2 groups. The static files served by NginX and the HTML Output from PHP served by Apache HTTP Server. It’s called reverse proxy
Proof of concept – CSS Optimization Original CSS Optimized CSS taking web user experience to the next level @draskolnikova @idkurniawan
Proof of concept – JS Optimization Original JS Optimized JS taking web user experience to the next level @draskolnikova @idkurniawan
Proof of concept – Images Optimization taking web user experience to the next level @draskolnikova @idkurniawan
Instant CDN-like Optimization Concept – LintasMe taking web user experience to the next level @draskolnikova @idkurniawan
Proof of Concept – CDN-like Optimization taking web user experience to the next level @draskolnikova @idkurniawan The visitor will be served by CDN-like Server (Optimized Result) after hit the origin once. The meaning once is, if everyone hit the origin server, the other visitor will not hit the origin again, but will be served by CDN-like Server.
Latency Test taking web user experience to the next level @draskolnikova @idkurniawan Comparison Page: http://bit.ly/14oaoBu
Bandwidth Usage (Server/Client Side) taking web user experience to the next level @draskolnikova @idkurniawan Comparison Page: http://bit.ly/14oaoBu
Client Conn. Request taking web user experience to the next level @draskolnikova @idkurniawan Comparison Page: http://bit.ly/14oaoBu
Visual Progress taking web user experience to the next level @draskolnikova @idkurniawan Comparison Page: http://bit.ly/14oaoBu
Demo taking web user experience to the next level @draskolnikova @idkurniawan
Q & A taking web user experience to the next level @draskolnikova @idkurniawan Slide can be downloaded at www.slideshare.net/draskolnikova www.ngxpagespeed.com www.modpagespeed.com References
Thanks to taking web user experience to the next level @draskolnikova @idkurniawan Community Corporate

More Related Content

PPTX
Lazy load Website Assets
Chris Love
 
PPTX
Getting SEO performance in Angular Meteor with ngmeta
Will Haire
 
PPTX
Javascript & Jquery
Gurpreet singh
 
PDF
Rendering: Or why your perfectly optimized content doesn't rank
WeLoveSEO
 
PPTX
Making Single Page Applications (SPA) faster
Boris Livshutz
 
PPTX
Building WordPress sites with AngularJS and the RESTful plugin JSON API
Eric Greene
 
PDF
Arsitektur Aplikasi Modern - Faisal Henry Susanto
DicodingEvent
 
PDF
Single page applications
Diego Cardozo
 
Lazy load Website Assets
Chris Love
 
Getting SEO performance in Angular Meteor with ngmeta
Will Haire
 
Javascript & Jquery
Gurpreet singh
 
Rendering: Or why your perfectly optimized content doesn't rank
WeLoveSEO
 
Making Single Page Applications (SPA) faster
Boris Livshutz
 
Building WordPress sites with AngularJS and the RESTful plugin JSON API
Eric Greene
 
Arsitektur Aplikasi Modern - Faisal Henry Susanto
DicodingEvent
 
Single page applications
Diego Cardozo
 

What's hot (20)

PPTX
React js, node js & angular js which one is the best for web development
Concetto Labs
 
PPT
Introduction To JavaScript
Khadija Khalid
 
PPTX
Html5 Fit: Get Rid of Love Handles
Chris Love
 
PDF
Kickstarting Node.js Projects with Yeoman
Patrick Buergin
 
PPTX
Single page applications
Prafful Garg
 
PPTX
Optimizing Your WordPress Site: Why speed matters, and how to get there
Stephen Bell
 
PDF
It's all about the google spider
Naidu Shiva
 
PPTX
Implementing a Responsive Image Strategy
Chris Love
 
PDF
Learning Single page Application chapter 1
Puguh Rismadi
 
PPTX
Rapid Application Development with MEAN Stack
Avinash Kaza
 
PPTX
Single page applications
Rumesh Hapuarachchi
 
PPTX
Reactjs workshop
Ahmed rebai
 
PPTX
Rise of the responsive single page application
Oren Shatken
 
PPTX
Fastlix
Denis Gukov
 
PDF
Modern web application devlopment workflow
Hamdi Hmidi
 
PDF
From MEAN to the MERN Stack
Troy Miles
 
PPTX
Responsive Web Design helps SEO Boost up by XHTMLChamps
XHTML Champs
 
PPT
Jquery
chauhankapil
 
PPTX
ReactJs
Sahana Banerjee
 
PDF
Rise and Fall of the Frontend Developer
Rafael Casuso Romate
 
React js, node js & angular js which one is the best for web development
Concetto Labs
 
Introduction To JavaScript
Khadija Khalid
 
Html5 Fit: Get Rid of Love Handles
Chris Love
 
Kickstarting Node.js Projects with Yeoman
Patrick Buergin
 
Single page applications
Prafful Garg
 
Optimizing Your WordPress Site: Why speed matters, and how to get there
Stephen Bell
 
It's all about the google spider
Naidu Shiva
 
Implementing a Responsive Image Strategy
Chris Love
 
Learning Single page Application chapter 1
Puguh Rismadi
 
Rapid Application Development with MEAN Stack
Avinash Kaza
 
Single page applications
Rumesh Hapuarachchi
 
Reactjs workshop
Ahmed rebai
 
Rise of the responsive single page application
Oren Shatken
 
Fastlix
Denis Gukov
 
Modern web application devlopment workflow
Hamdi Hmidi
 
From MEAN to the MERN Stack
Troy Miles
 
Responsive Web Design helps SEO Boost up by XHTMLChamps
XHTML Champs
 
Jquery
chauhankapil
 
ReactJs
Sahana Banerjee
 
Rise and Fall of the Frontend Developer
Rafael Casuso Romate
 
Ad

Similar to Web Performance & Operation - Pagespeed (20)

PPTX
AD113 Speed Up Your Applications w/ Nginx and PageSpeed
edm00se
 
PDF
Web Performance in the Age of HTTP2 - Topconf Tallinn 2016 - Holger Bartel
Holger Bartel
 
PPTX
Web Performance Optimization
Patrick Meenan
 
PPTX
Measuring web performance
Patrick Meenan
 
PPT
Web performance testing
Patrick Meenan
 
PPTX
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
Distilled
 
PPTX
Supercharge Application Delivery to Satisfy Users
NGINX, Inc.
 
PPTX
Building Lightning Fast Websites (for Twin Cities .NET User Group)
strommen
 
PDF
Client-Side Performance Testing
Anand Bagmar
 
PDF
Speed is Essential for a Great Web Experience
Andy Davies
 
KEY
Fosdem 2009 – improving drupal's page loading performance
Erup Enolc
 
PPTX
Why your slow loading website is costing you sales and how to fix it
Robert Flournoy
 
PPTX
Why your slow loading website is costing you sales and how to fix it
strommen
 
PDF
Web Performance Optimization @Develer
Massimo Iacolare
 
PPT
Scaling Front-End Performance - Velocity 2016
Patrick Meenan
 
PDF
Building performance into the new yahoo homepage presentation
masudakram
 
PDF
Performance on the Yahoo! Homepage
Nicholas Zakas
 
PDF
Optimising for Performance
thomas_mb
 
PDF
Making the web faster
Patrick Meenan
 
PDF
Hacking Web Performance 2019
Maximiliano Firtman
 
AD113 Speed Up Your Applications w/ Nginx and PageSpeed
edm00se
 
Web Performance in the Age of HTTP2 - Topconf Tallinn 2016 - Holger Bartel
Holger Bartel
 
Web Performance Optimization
Patrick Meenan
 
Measuring web performance
Patrick Meenan
 
Web performance testing
Patrick Meenan
 
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
Distilled
 
Supercharge Application Delivery to Satisfy Users
NGINX, Inc.
 
Building Lightning Fast Websites (for Twin Cities .NET User Group)
strommen
 
Client-Side Performance Testing
Anand Bagmar
 
Speed is Essential for a Great Web Experience
Andy Davies
 
Fosdem 2009 – improving drupal's page loading performance
Erup Enolc
 
Why your slow loading website is costing you sales and how to fix it
Robert Flournoy
 
Why your slow loading website is costing you sales and how to fix it
strommen
 
Web Performance Optimization @Develer
Massimo Iacolare
 
Scaling Front-End Performance - Velocity 2016
Patrick Meenan
 
Building performance into the new yahoo homepage presentation
masudakram
 
Performance on the Yahoo! Homepage
Nicholas Zakas
 
Optimising for Performance
thomas_mb
 
Making the web faster
Patrick Meenan
 
Hacking Web Performance 2019
Maximiliano Firtman
 
Ad

Recently uploaded (20)

PDF
Approach and Philosophy of On baking technology
30anthuong17
 
PDF
NewMind AI Weekly Chronicles - August'25-Week II
NewMind AI
 
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
David Malick Dieng
 
PPTX
sap open course for s4hana steps from ECC to s4
sreeni2106invites
 
PDF
Encapsulation theory and applications.pdf
gurumoop
 
PDF
Per capita expenditure prediction using model stacking based on satellite ima...
IAESIJAI
 
PPTX
Spectroscopy.pptx food analysis technology
nawahassan45
 
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
DatVoNgoc
 
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
SOFTTECHHUB
 
PDF
Encapsulation_ Review paper, used for researhc scholars
gurumoop
 
PPTX
Cloud computing and distributed systems.
kkkkkhan
 
PPTX
Machine Learning_overview_presentation.pptx
kondavamsidharreddy2
 
PPTX
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
23bcla24
 
PDF
MIND Revenue Release Quarter 2 2025 Press Release
MIND CTI
 
PPT
Teaching material agriculture food technology
LiaRayya
 
PDF
Machine learning based COVID-19 study performance prediction
IAESIJAI
 
PDF
gpt5_lecture_notes_comprehensive_20250812015547.pdf
Chinchu40
 
PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
IAESIJAI
 
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Safe Software
 
DOCX
The AUB Centre for AI in Media Proposal.docx
GAONE9
 
Approach and Philosophy of On baking technology
30anthuong17
 
NewMind AI Weekly Chronicles - August'25-Week II
NewMind AI
 
Digital-Transformation-Roadmap-for-Companies.pptx
David Malick Dieng
 
sap open course for s4hana steps from ECC to s4
sreeni2106invites
 
Encapsulation theory and applications.pdf
gurumoop
 
Per capita expenditure prediction using model stacking based on satellite ima...
IAESIJAI
 
Spectroscopy.pptx food analysis technology
nawahassan45
 
20250228 LYD VKU AI Blended-Learning.pptx
DatVoNgoc
 
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
SOFTTECHHUB
 
Encapsulation_ Review paper, used for researhc scholars
gurumoop
 
Cloud computing and distributed systems.
kkkkkhan
 
Machine Learning_overview_presentation.pptx
kondavamsidharreddy2
 
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
23bcla24
 
MIND Revenue Release Quarter 2 2025 Press Release
MIND CTI
 
Teaching material agriculture food technology
LiaRayya
 
Machine learning based COVID-19 study performance prediction
IAESIJAI
 
gpt5_lecture_notes_comprehensive_20250812015547.pdf
Chinchu40
 
Diabetes mellitus diagnosis method based random forest with bat algorithm
IAESIJAI
 
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Safe Software
 
The AUB Centre for AI in Media Proposal.docx
GAONE9
 

Web Performance & Operation - Pagespeed

  • 1. Products of How to Train Your “DRAGON” taking web user experience to the next level Sept 2013 Presented by D. B. Alam & I. Kurniawan Research on © 2013 – Sysadmin PT. Merah Cipta Media
  • 2. What is Pagespeed ? PageSpeed speeds up your site and reduces page load time. This open-source webserver module automatically applies web performance best practices to pages and associated assets (CSS, JavaScript, images) without requiring that you modify your existing content or workflow. taking web user experience to the next level @draskolnikova @idkurniawan
  • 3. When Pagespeed was ‘born’ ? Pagespeed was developed on mid 2009 and introduced to public on November 2010. Pagespeed’s initial release only compatible with Apache Module called mod_pagespeed Jan, 2013 the Google Dev start port the Pagespeed Apache Module to NginX. Still in Jan, 2013, outside of Google Developers Project, a startup company start porting Pagespeed could running on Microsoft IIS. And now Pagespeed are able to run and works properly on most popular web server platform. taking web user experience to the next level @draskolnikova @idkurniawan
  • 4. How Pagespeed works ? img: webdevcorner.nettaking web user experience to the next level @draskolnikova @idkurniawan
  • 5. Why Pagespeed ? Auto[magic]ally optimize Scalability Almost no programming skills needed Better web performance taking web user experience to the next level @draskolnikova @idkurniawan Internet Connection slow on some location
  • 6. Who use Pagespeed ? and many more … taking web user experience to the next level @draskolnikova @idkurniawan
  • 7. Unified Modeling Language – LintasMe taking web user experience to the next level @draskolnikova @idkurniawan User request a webpage include static files (images, javascript, css). Then the web server split it into 2 groups. The static files served by NginX and the HTML Output from PHP served by Apache HTTP Server. It’s called reverse proxy
  • 8. Proof of concept – CSS Optimization Original CSS Optimized CSS taking web user experience to the next level @draskolnikova @idkurniawan
  • 9. Proof of concept – JS Optimization Original JS Optimized JS taking web user experience to the next level @draskolnikova @idkurniawan
  • 10. Proof of concept – Images Optimization taking web user experience to the next level @draskolnikova @idkurniawan
  • 11. Instant CDN-like Optimization Concept – LintasMe taking web user experience to the next level @draskolnikova @idkurniawan
  • 12. Proof of Concept – CDN-like Optimization taking web user experience to the next level @draskolnikova @idkurniawan The visitor will be served by CDN-like Server (Optimized Result) after hit the origin once. The meaning once is, if everyone hit the origin server, the other visitor will not hit the origin again, but will be served by CDN-like Server.
  • 13. Latency Test taking web user experience to the next level @draskolnikova @idkurniawan Comparison Page: http://bit.ly/14oaoBu
  • 14. Bandwidth Usage (Server/Client Side) taking web user experience to the next level @draskolnikova @idkurniawan Comparison Page: http://bit.ly/14oaoBu
  • 15. Client Conn. Request taking web user experience to the next level @draskolnikova @idkurniawan Comparison Page: http://bit.ly/14oaoBu
  • 16. Visual Progress taking web user experience to the next level @draskolnikova @idkurniawan Comparison Page: http://bit.ly/14oaoBu
  • 17. Demo taking web user experience to the next level @draskolnikova @idkurniawan
  • 18. Q & A taking web user experience to the next level @draskolnikova @idkurniawan Slide can be downloaded at www.slideshare.net/draskolnikova www.ngxpagespeed.com www.modpagespeed.com References
  • 19. Thanks to taking web user experience to the next level @draskolnikova @idkurniawan Community Corporate