Web Performance & Operation - Pagespeed

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

description

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

Transcript of Web Performance & Operation - Pagespeed

Page 1: Web Performance & Operation - Pagespeed

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

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

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

How Pagespeed works ?

img: webdevcorner.nettaking web user experience to the next level @draskolnikova @idkurniawan

Page 5: Web Performance & Operation - Pagespeed

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

Who use Pagespeed ?

and many more …

taking web user experience to the next level @draskolnikova @idkurniawan

Page 7: Web Performance & Operation - Pagespeed

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

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

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

Proof of concept – Images Optimization

taking web user experience to the next level @draskolnikova @idkurniawan

Page 11: Web Performance & Operation - Pagespeed

Instant CDN-like Optimization Concept – LintasMe

taking web user experience to the next level @draskolnikova @idkurniawan

Page 12: Web Performance & Operation - Pagespeed

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

Latency Test

taking web user experience to the next level @draskolnikova @idkurniawan

Comparison Page: http://bit.ly/14oaoBu

Page 14: Web Performance & Operation - Pagespeed

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

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

Visual Progress

taking web user experience to the next level @draskolnikova @idkurniawan

Comparison Page: http://bit.ly/14oaoBu

Page 17: Web Performance & Operation - Pagespeed

Demo

taking web user experience to the next level @draskolnikova @idkurniawan

Page 18: Web Performance & Operation - Pagespeed

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

Thanks to

taking web user experience to the next level @draskolnikova @idkurniawan

Community Corporate