0
Products of
How to Train Your “DRAGON”
taking web user experience to the next level
Sept 2013
Presented by D. B. Alam & I....
What is Pagespeed ?
PageSpeed speeds up your site and reduces
page load time. This open-source webserver
module automatica...
When Pagespeed was ‘born’ ?
Pagespeed was developed on mid 2009 and
introduced to public on November 2010.
Pagespeed’s ini...
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...
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...
Proof of concept – CSS Optimization
Original CSS Optimized CSS
taking web user experience to the next level @draskolnikova...
Proof of concept – JS Optimization
Original JS Optimized JS
taking web user experience to the next level @draskolnikova @i...
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 visi...
Latency Test
taking web user experience to the next level @draskolnikova @idkurniawan
Comparison Page: http://bit.ly/14oao...
Bandwidth Usage (Server/Client Side)
taking web user experience to the next level @draskolnikova @idkurniawan
Comparison P...
Client Conn. Request
taking web user experience to the next level @draskolnikova @idkurniawan
Comparison Page: http://bit....
Visual Progress
taking web user experience to the next level @draskolnikova @idkurniawan
Comparison Page: http://bit.ly/14...
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.n...
Thanks to
taking web user experience to the next level @draskolnikova @idkurniawan
Community Corporate
Upcoming SlideShare
Loading in...5
×

Web Performance & Operation - Pagespeed

376

Published on

The web should be fast - Google, Inc
Make your web more faster then before, automagically optimized by server.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
376
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Web Performance & Operation - Pagespeed"

  1. 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. 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. 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. 4. How Pagespeed works ? img: webdevcorner.nettaking web user experience to the next level @draskolnikova @idkurniawan
  5. 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. 6. Who use Pagespeed ? and many more … taking web user experience to the next level @draskolnikova @idkurniawan
  7. 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. 8. Proof of concept – CSS Optimization Original CSS Optimized CSS taking web user experience to the next level @draskolnikova @idkurniawan
  9. 9. Proof of concept – JS Optimization Original JS Optimized JS taking web user experience to the next level @draskolnikova @idkurniawan
  10. 10. Proof of concept – Images Optimization taking web user experience to the next level @draskolnikova @idkurniawan
  11. 11. Instant CDN-like Optimization Concept – LintasMe taking web user experience to the next level @draskolnikova @idkurniawan
  12. 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. 13. Latency Test taking web user experience to the next level @draskolnikova @idkurniawan Comparison Page: http://bit.ly/14oaoBu
  14. 14. Bandwidth Usage (Server/Client Side) taking web user experience to the next level @draskolnikova @idkurniawan Comparison Page: http://bit.ly/14oaoBu
  15. 15. Client Conn. Request taking web user experience to the next level @draskolnikova @idkurniawan Comparison Page: http://bit.ly/14oaoBu
  16. 16. Visual Progress taking web user experience to the next level @draskolnikova @idkurniawan Comparison Page: http://bit.ly/14oaoBu
  17. 17. Demo taking web user experience to the next level @draskolnikova @idkurniawan
  18. 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. 19. Thanks to taking web user experience to the next level @draskolnikova @idkurniawan Community Corporate
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×