web performance & operation - pagespeed
DESCRIPTION
The web should be fast - Google, Inc Make your web more faster then before, automagically optimized by server.TRANSCRIPT
![Page 1: Web Performance & Operation - Pagespeed](https://reader033.vdocument.in/reader033/viewer/2022052619/555795e7d8b42aa3378b4e83/html5/thumbnails/1.jpg)
Products of
How to Train Your “DRAGON”taking web user experience to the next level
Sept 2013Presented by D. B. Alam & I. Kurniawan
Research on
© 2013 – Sysadmin PT. Merah Cipta Media
![Page 2: Web Performance & Operation - Pagespeed](https://reader033.vdocument.in/reader033/viewer/2022052619/555795e7d8b42aa3378b4e83/html5/thumbnails/2.jpg)
What is Pagespeed ?
PageSpeed speeds up your site and reduces page load time. This open-source webservermodule 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
![Page 3: Web Performance & Operation - Pagespeed](https://reader033.vdocument.in/reader033/viewer/2022052619/555795e7d8b42aa3378b4e83/html5/thumbnails/3.jpg)
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 Pagespeedare able to run and works properly on most popular web server platform.
taking web user experience to the next level @draskolnikova @idkurniawan
![Page 4: Web Performance & Operation - Pagespeed](https://reader033.vdocument.in/reader033/viewer/2022052619/555795e7d8b42aa3378b4e83/html5/thumbnails/4.jpg)
How Pagespeed works ?
img: webdevcorner.nettaking web user experience to the next level @draskolnikova @idkurniawan
![Page 5: Web Performance & Operation - Pagespeed](https://reader033.vdocument.in/reader033/viewer/2022052619/555795e7d8b42aa3378b4e83/html5/thumbnails/5.jpg)
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
![Page 6: Web Performance & Operation - Pagespeed](https://reader033.vdocument.in/reader033/viewer/2022052619/555795e7d8b42aa3378b4e83/html5/thumbnails/6.jpg)
Who use Pagespeed ?
and many more …
taking web user experience to the next level @draskolnikova @idkurniawan
![Page 7: Web Performance & Operation - Pagespeed](https://reader033.vdocument.in/reader033/viewer/2022052619/555795e7d8b42aa3378b4e83/html5/thumbnails/7.jpg)
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
![Page 8: Web Performance & Operation - Pagespeed](https://reader033.vdocument.in/reader033/viewer/2022052619/555795e7d8b42aa3378b4e83/html5/thumbnails/8.jpg)
Proof of concept – CSS Optimization
Original CSS Optimized CSS
taking web user experience to the next level @draskolnikova @idkurniawan
![Page 9: Web Performance & Operation - Pagespeed](https://reader033.vdocument.in/reader033/viewer/2022052619/555795e7d8b42aa3378b4e83/html5/thumbnails/9.jpg)
Proof of concept – JS Optimization
Original JS Optimized JS
taking web user experience to the next level @draskolnikova @idkurniawan
![Page 10: Web Performance & Operation - Pagespeed](https://reader033.vdocument.in/reader033/viewer/2022052619/555795e7d8b42aa3378b4e83/html5/thumbnails/10.jpg)
Proof of concept – Images Optimization
taking web user experience to the next level @draskolnikova @idkurniawan
![Page 11: Web Performance & Operation - Pagespeed](https://reader033.vdocument.in/reader033/viewer/2022052619/555795e7d8b42aa3378b4e83/html5/thumbnails/11.jpg)
Instant CDN-like Optimization Concept – LintasMe
taking web user experience to the next level @draskolnikova @idkurniawan
![Page 12: Web Performance & Operation - Pagespeed](https://reader033.vdocument.in/reader033/viewer/2022052619/555795e7d8b42aa3378b4e83/html5/thumbnails/12.jpg)
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.
![Page 13: Web Performance & Operation - Pagespeed](https://reader033.vdocument.in/reader033/viewer/2022052619/555795e7d8b42aa3378b4e83/html5/thumbnails/13.jpg)
Latency Test
taking web user experience to the next level @draskolnikova @idkurniawan
Comparison Page: http://bit.ly/14oaoBu
![Page 14: Web Performance & Operation - Pagespeed](https://reader033.vdocument.in/reader033/viewer/2022052619/555795e7d8b42aa3378b4e83/html5/thumbnails/14.jpg)
Bandwidth Usage (Server/Client Side)
taking web user experience to the next level @draskolnikova @idkurniawan
Comparison Page: http://bit.ly/14oaoBu
![Page 15: Web Performance & Operation - Pagespeed](https://reader033.vdocument.in/reader033/viewer/2022052619/555795e7d8b42aa3378b4e83/html5/thumbnails/15.jpg)
Client Conn. Request
taking web user experience to the next level @draskolnikova @idkurniawan
Comparison Page: http://bit.ly/14oaoBu
![Page 16: Web Performance & Operation - Pagespeed](https://reader033.vdocument.in/reader033/viewer/2022052619/555795e7d8b42aa3378b4e83/html5/thumbnails/16.jpg)
Visual Progress
taking web user experience to the next level @draskolnikova @idkurniawan
Comparison Page: http://bit.ly/14oaoBu
![Page 17: Web Performance & Operation - Pagespeed](https://reader033.vdocument.in/reader033/viewer/2022052619/555795e7d8b42aa3378b4e83/html5/thumbnails/17.jpg)
Demo
taking web user experience to the next level @draskolnikova @idkurniawan
![Page 18: Web Performance & Operation - Pagespeed](https://reader033.vdocument.in/reader033/viewer/2022052619/555795e7d8b42aa3378b4e83/html5/thumbnails/18.jpg)
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
![Page 19: Web Performance & Operation - Pagespeed](https://reader033.vdocument.in/reader033/viewer/2022052619/555795e7d8b42aa3378b4e83/html5/thumbnails/19.jpg)
Thanks to
taking web user experience to the next level @draskolnikova @idkurniawan
Community Corporate