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

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