web performance & operation - pagespeed
DESCRIPTION
The web should be fast - Google, Inc Make your web more faster then before, automagically optimized by server.TRANSCRIPT
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
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
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
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