Building high performance web applications

We will share different techniques and tools that can be used to improve a website’s performance. the talk will cover some of the frontend and backend most used tricks and applications, along with some tools to measure the performance.

Agenda
Reasons and Benefits of optimization
Frontend optimization techniques
Backend Optimization techniques
Intro to memcache
Intro Varnish
Usefull tools

Session was held in 302Labs on December 22nd, 2012

Transcript

1. BUILDING HIGH PERFORMANCE WEB APPLICATIONS Ahmed Abdelaliem
2. AGENDA - Why Optimization is important - Frontend Optimization Techniques - Backend Optimization Techniques - Intro to memcache - Intro to Varnish - Useful Tools
3. WHY OPTIMIZATION IS - Users are more likely to be on website. - Higher position in search engines. - Save Resources
4. HTTP REQUEST Transferring Data Serving Content Finding DNS Lookup Connecting TCP Connection (waiting) Time to first byte Preparing Response HTTP Request(s)
5. CONCEPTS OF OPTIMIZATION 1- Smaller Data II- Don’t Repeat yourself
6. FRONTEND OPTIMIZATION •Gzip Compression •Images Optimization •CSS / Javascript Code Compression •CSS Sprites •Embedding Images •Using Expire Headers •CSS / Javascript Positions •Internal / External CSS / Javascript •Avoid Redirects •Make Ajax Cachable
7. GZIP COMPRESSION 1- Browser request GET /index.php Accept-Encoding: gzip 2- Server generate file /var/www/index.php (100 kb) 1 KB 4- Browser Decompress and display 3- Server response HTTP/1.x 200 ok content- encoding:gzip <compressed file> 10 Zip file
8. IMAGE OPTIMIZATION •Use appropriate file format •Conversion of graphic text into stylized text. •Changing the resolution of all images to 72dpi. •Cropping the images to the actual size required. •Specifying the actual height and width of all images. •Minimizing depth of color when it is not needed for quality. •Using thumbnails where required.
9. Minified Source CSS / JAVASCRIPT if(window.location.hash) { var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character if (hash == 'signInModal'){ $('#SignIn').click(); } // hash found } else { // No hash found window.location.hash&&"signInModal"==window.location.hash.substring(1)&&$ ("#SignIn").click();
10. Minified Source CSS SPRITES #nav li a {background:none no-repeat left center} #nav li a.item1 {background-image:url('../img/image1.gif')} #nav li a:hover.item1 {background-image:url('../img/image1_over.gif')} #nav li a.item2 {background-image:url('../img/image2.gif')} #nav li a:hover.item2 {background-image:url('../img/image2_over.gif')} #nav li a {background-image:url('../img/image_nav.gif')} #nav li a.item1 {background-position:0px 0px} #nav li a:hover.item1 {background-position:0px -72px} #nav li a.item2 {background-position:0px -143px;} #nav li a:hover.item2 {background-position:0px -215px; }
11. Base64 Image EMBEDDING IMAGES <img alt="" src="img/thumb_slide_0.jpg" /> <img alt="" src="data:image/ png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAbwklEQVR4nMWbWYxlx3nff1V1qs5 +t96me2Y0w0Xcd1qWTJGhKYuhLdqRLMXwQ4LAAbLAAQIYQYAECIIgMILkIQ82YgQBgiQGgiDOaluxIiGJAy22Y W2UTUrcRJHUiJzh9PR09+1779mrKg/nXnI4HnKGi5QCDur27Vvn1Pevr76t/kfx/7+lwE8Dc6ABJKCB9WXf/ DAfLn+YN182sbwu/04urwS4CVgDYuA64GFgArSAusL4q93/mlvwbge +g7aanAYyeqEXQL18fgacBE4A9wK3Ar8PnOfahZOAfTeT+1EA4JZ9Rz/ R64AbAUMvpAHuoxf8PPAF4DV6beiWY/3b3N9f8ox33NS7HfguWwUcLPtt4BeAvw3cLiAE/gvwMv2qd/T7v
12. Tips Typical USE EXPIRE HEADERS HTTP/1.1 200 OK Date: Fri, 30 Oct 1998 13:19:41 GMT Server: Apache/1.3.3 (Unix) Cache-Control: max-age=3600, must-revalidate Expires: Fri, 30 Oct 1998 14:19:41 GMT Last-Modified: Mon, 29 Jun 1998 02:28:12 GMT ETag: "3e86-410-3596fbbc" Content-Length: 1040 Content-Type: text/html •Use URLs consistently Index.html != index.html •Store images and pages that don’t change frequently •Don’t change files unnecessarily •Minimize use of SSL
13. JS in CSS in top CSS / JAVASCRIPT POSITIONS CSS is needed to render the page JS will be activated after the page start rendering
14. SINGLE MULTIPLE COMBINE CSS / JS <script type="text/javascript" src="http://careerise.me/js/jquery.min.js"></script> <script type="text/javascript" src="http://careerise.me/js/jquery.lazyload.min.js"></script> <script type="text/javascript" src="http://careerise.me/js/bootstrap.js"></script> <script type="text/javascript" src="http://careerise.me/js/bootstrap-typeahead.js"></script> <script type="text/javascript" src="http://careerise.me/js/jquery.imagesloaded.min.js"></script> <script type="text/javascript" src="http://careerise.me/js/smartcards.js"></script> <script type="text/javascript" src="http://careerise.me/js/fancybox/jquery.fancybox.js?v=2.1.1"></script> <script src="http://careerise.me/js/index.php?js=new_bootstrap-modal,new_bootstrap- twipsy,new_bootstrap-tooltip,new_bootstrap-popover" type="text/javascript"></script>
15. REDUCE HTTP REQUESTS •Avoid Redirects •Make Ajax Cachable •Use parallel downloads across multiple hostnames
16. BACKEND OPTIMIZATION 1. Tune your server 2. Tune your database and queries 2. Use Cache 4. Use CDN (content delivery network)
17. SERVER OPTIMIZATION - Tuning Variables: Maxclients Max Clients = (Total Memory - Operating System Memory - MySQL memory) / Average Size Per Apache process KeepAlive KeepAliveTimeout - Separate server for serving static content Create apache instance on different port with less modules
18. DATABASE OPTIMIZATION - Tuning Variables: Threads allowed Memory limit Timeout Query Caching - Indexing - Reduce Joins - Optimize Queries - Remove orphaned records
19. CACHING Request File based Memory based Web Server cache Database
20. CDN cache Database static content dynamic content Request Web Server CDN Content Delivery Network
21. PROXY CACHING cache Database Request CDN Proxy Server Web Server static content dynamic content
22. USEFUL TOOLS Y slow Analyses web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. http://developer.yahoo.com/yslow/
23. USEFUL TOOLS Apache Benchmark Analyses web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. output Example ab -n500 -c20 http://careerise.me.localhost/ Concurrency Level: 20 Time taken for tests: 0.764 seconds Complete requests: 500 Failed requests: 0 Write errors: 0 Requests per second: 654.57 [#/sec] (mean) Time per request: 30.555 [ms] (mean) Time per request: 1.528 [ms] (mean, across all concurrent requests)
24. USEFUL TOOLS WebPageTest.org Run a free website speed test from around the globe using real browsers at consumer connection speeds with detailed optimization recommendations.
25. USEFUL TOOLS YUI Compressor The YUI Compressor is JavaScript minifier designed to be 100% safe and yield a higher compression ratio than most other tools. Example java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js --charset utf-8
26. MEMCACHE Memcached is an in-memory key-value store for small chunks of arbitrary data (strings, objects) from results of database calls, API calls, or page rendering Installation Debian/Ubuntu #apt-get install memcached Redhat/Fedora #yum install memcached Example $memcache = new Memcache; $memcache->connect('localhost', 11211) or die ("Could not connect"); $memcache->set ('key', $tmp_object, false, 10) or die ("Failed to save data at the server"); $get_result = $memcache->get('key'); echo "Data from the cache:<br/>\n"; var_dump($get_result);
27. VARNISH •Varnish Cache is a web application accelerator also known as a caching HTTP reverse proxy. •You install it in front of any server that speaks HTTP and configure it to cache the contents. •It typically speeds up delivery with a factor of 300 - 1000x, depending on your architecture. Installation Debian/Ubuntu #apt-get install varnish Redhat/Fedora #yum install varnish - Configure varnish to serve on 80 and fetch from 8008: - Set apache to listen on port 8008: - Set all vhosts to listen on port 8008:
28. QUESTIONS