![To avoid overloading our servers, only 25 issues can
be returned at a time.
Return more than 25 crawling issues?
Jonathan Simon: […] it‘s propably time to consider
raising it. I‘ll discuss your feedback with the team.](https://image.slidesharecdn.com/php-kongress-2010-nico-steiner-101109131412-phpapp01/85/PHP-Kongress-2010-Web-Performance-112-320.jpg)
Hochgeladen vonNico Steiner
PHP Kongress 2010 - Web-Performance
Die Präsentation behandelt die Optimierung der Web-Performance bei 1&1, fokussiert auf Techniken zur Reduzierung der HTTP-Anfragen und zur effektiven Nutzung von Content Delivery Networks (CDNs). Es werden verschiedene Strategien wie Gzip-Komprimierung, Minimierung von Ressourcen und der Einsatz von Cache-Management erläutert, um die Ladezeiten und Benutzererfahrung zu verbessern. Zudem werden aktuelle Leistungskennzahlen und Vergleiche zur Internetgeschwindigkeit in Deutschland präsentiert.
PHP Kongress 2010 - Web-Performance
- 1. Web-Performance Regeln und LösungenRegelnund Lösungen PHP World Kongress 2010 | München
- 2. Hi! • Seit 2003bei der 1&1 Internet AG • Abteilung betreut die Bestellsysteme der 1&1 (Shops) • Experte für Frontend-Technologien • HTML, XML, CSS, JavaScript • Accessibility, Website Performance, AJAX, Suchmaschinenoptimierung Nico
- 3. Eigenschaften der 1&1Shops • Ca. 30 verschieden große Webapplikationen • Hunderte Seiten pro Applikation • Tausende von Grafiken • Hunderte Stylesheets und Scripte• Hunderte Stylesheets und Scripte • Täglicher Abruf von mehreren Terabyte an Ressourcen
- 4.
- 5.
- 6.
- 7. Reduziere die Anzahlder HTTP-Requests
- 8. Wenige HTTP-Requests Internet ServiceProvider + Bandbreite des AnwendersBandbreite des Anwenders + Nähe zu Peering-Punkten + Distanz
- 9.
- 10. Wie schnell surftdenn Deutschland so?
- 11.
- 12. Deutschland • In keinerTop 10 vertreten • Landesweite Verbindungsgeschwindigkeit durchschnittlich unter 5 Mbit/s • Baden-Baden als einzige deutsche Stadt auf Platz 61• Baden-Baden als einzige deutsche Stadt auf Platz 61 mit durchschnittlich 7,6 Mbit/s • Platz 1: Südkorea/Masan mit durchschnittlich 17 / 20,9 Mbit/s • Global durchschnittlich 1,8 Mbit/s
- 13.
- 14.
- 15. Frankfurt / IE7/ 1,5 Mbit/s 13 Sekunden First View
- 16.
- 17. Frankfurt / IE7/ 1,5 Mbit/s Second View 9 Sekunden
- 18.
- 19. Google runs expirementson the search results page to understand and improve search expirience. Our expiriment injected server-side delay 100 bis 400 ms 0,2% bis 0,6% weniger Suchanfragen
- 20. It comes downjust one factor – speed. 2,2 Sekunden schneller 15% mehr Downloads 10,8 Mio/Jahr
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27. CSS IMG Script HTMLPustefix Framework
- 28.
- 29. Jasmin Schönheit aus 1001Nacht? http://www.flickr.com/photos/honma/4084355466
- 30. Jasmin • Nur einServlet ;-) • JavaScript Minifier
- 31.
- 32. Modularisierung mit Dependencies <LINKhref=“/xml/jasmin/dslorder+clearfix+autocompletion/css“> <SCRIPT src=“/xml/jasmin/dslorder+clearfix+autocompletion/js“>
- 33. Wenige HTTP Requests „Ladefür alle Seiten die Ressourcen des DSL-Projekts und zusätzlich nur für die Seite DslCheck die Ressourcen der Autocompletion.“ DslStart DslMobile DslCheck dslorder dslorder dslorder autocompletion 1. Request 2. Request
- 34. Wenige HTTP Requests 1.Request 2. Request „Lade für alle Seiten die Ressourcen des DSL-Projekts und zusätzlich nur für die Seite DslCheck die Ressourcen der Autocompletion.“ 1. Request 2. Request gZip 1. Seite 2. Seite
- 35.
- 36.
- 37. Minimierung Original Optimierte Version /****zip:/home/servlet/pfixschlundAS_b/style/reset.css */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote, pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s ,samp,small,strike,strong,sub,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,leg end,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0 ;font-weight:inherit;font-style:inherit;font-size:100%;font- family:inherit;vertical-align:baseline;} sup{line-height:0;font- size:60%;}body{line-height:1;color:black;background:white;}ol,ul{list- style:none;}table{border-collapse:separate;border-spacing:0;}caption, th,td{text-align:left;fontweight:normal;}blockquote:before,blockquotetable, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; /*outline: 0;*/ font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } th,td{text-align:left;fontweight:normal;}blockquote:before,blockquote :after,q:before,q:after{content:"";}blockquote,q{quotes:"" "";}.clearfix: after{content:".";display:block;height:0;clear:both;visibility:hidden;}/* Hides from IE-mac */ .clearfix{display:block;}/* End hide from IE-mac */ #skipmenu{position:absolute;top:10px;left:10px;width:180px;z- index:100;}a.skiptarget{display:block;width:0;height:0;overflow:hidden;}a .skip{fontsize:11px;texttransform:uppercase;textdecoration:none;}a.skip, a.skip:link,a.skip:visited{position:absolute;top:999em;}a.skip:focus,a.skip: active{outline:1px dotted #fff;color:#fff;position:absolute;top:0;left:0;}
- 38.
- 39.
- 40. Jasmin • Ergänzt FarFuture Expires Header
- 41. Content Delivery Server(CDS) CSS IMG CDS Script HTML
- 42. Content Delivery Server(CDS) • Liefert sämtliche Media-Daten wie Grafiken, Flash, PDF usw. aus
- 43. Content Delivery Server(CDS) htdocsApache CDShtdocsApache Internet CDS
- 44. Far Future ExpiresHeader 2,5 Sekunden! Far Future Expires Header: „Diese Ressource verändert sich für die nächsten 15 Jahre nicht und kann immer aus dem Cache bezogen werden.“
- 45. Far Future ExpiresHeader „Wie erzwinge ich ein Neuladen, wenn sich die Ressource doch verändern sollte?“verändern sollte?“
- 46. „Auf der 1und1.degibt es einen Anzeigefehler bei Usern, die einen Browser-Cache aktiviert haben. Wie können wir solche Fehler vermeiden?“
- 47. Far Future ExpiresHeader „Wie erzwinge ich ein Neuladen, wenn sich die Ressource doch verändern sollte?“
- 48. Far Future ExpiresHeader /img/footer/ui-logo.gif Publish Internet MD5-Hash /img/footer/ui-logo.gif 32j4g23j4-ui-logo.gif Sync auf CDS <img src=„/img/footer/ui-logo.gif“> url(/img/footer/ui-logo.gif) <img src=„http://uicdn.net/32j4g23j4-ui-logo.gif“> url(http://uicdn.net/32j4g23j4-ui-logo.gif) CDS Expires Header HTML
- 49. Content Delivery Server(CDS) 3 3,5 4 4,5 Load Time* 0 0,5 1 1,5 2 2,5 3 Vorher Nachher Load Time * Aufruf mit Cache, Dulles (USA), IE7, 1.5 MBit
- 50. Content Delivery Server(CDS) 25 30 35 40 Requests* 0 5 10 15 20 25 Vorher Nachher Requests * Aufruf mit Cache, Dulles (USA), IE7, 1.5 MBit
- 51. Content Delivery Server(CDS) Vorher Nachher 82% weniger 304-Responses
- 52. Content Delivery Server(CDS) Sync auf CDSSync auf CDS CDS
- 53. Content Delivery Server(CDS) Optimierung + CDS Optimierung + Sync auf CDS
- 54.
- 55.
- 56.
- 57.
- 58.
- 59. Content Delivery Server(CDS) 4 5 6 Load Time* 0 1 2 3 4 Vorher Nachher Load Time * Aufruf ohne Cache, Dulles (USA), IE7, 1.5 MBit
- 60. Warum eine eigeneDomain? Darum
- 61. Warum eine eigeneDomain? StartseiteStartseite Mobile Internet Eigene Homepage DSL
- 62. Warum eine eigeneDomain? Startseite Mobile Internet Eigene Homepage DSL CDN
- 63. Warum eine eigeneDomain? home.1und1.de/header/logo.png mobile.1und1.de/header/logo.png dsl.1und1.de/header/logo.png homepage.1und1.de/header/logo.png www.uicdn.net/header/43j2hg35-logo.png
- 64.
- 65. Content Delivery Server(CDS) http://www.youtube.com/watch?v=IWWBnJEsUtU „Larry Page hat einmal die Vision geäußert, Webseiten so schnell browsen zu können, wie man die Seiten in einem Hochglanzmagazin umblättert.“
- 66.
- 67.
- 68. Kennzahlen „Welche Größe habendie Daten, welche von den verschiedenen Seiten eines Projekts abgerufen werden?“ „Werden Daten angefragt, die nicht verfügbar sind (404)?“ http://zoompf.com/2010-state-of-web-performance-report
- 69.
- 70.
- 72. Progressive Rendering CSS anden Anfang JavaScript ganz ans Ende
- 73. Nicholas C. Zakas RossHarmes Steven Leviathan Stoyan Stefanov http://oreilly.com/catalog/9780596802806 Julien Lecomte Matt Sweeney
- 74. http://vimeo.com/channels/fronteers10#16241085 Nicholas Zakas |High Performance Javascript | Fronteers 2010
- 75. <html> <head> <link rel=„stylesheet“ type=„text/css“href=„some-styles-1.css“ /> <link rel=„stylesheet“ type=„text/css“ href=„some-styles-2.css“ /> <script type=„text/javascript“ src=„some-scripts-1.js“></script> <script type=„text/javascript“ src=„some-scripts-2.js“></script> </head> <body> … Script
- 76. <html> <head> <link rel=„stylesheet“ type=„text/css“href=„some-styles-1.css“ /> <link rel=„stylesheet“ type=„text/css“ href=„some-styles-2.css“ /> <script defer type=„text/javascript“ src=„some-scripts-1.js“></script> <script defer type=„text/javascript“ src=„some-scripts-2.js“></script> </head> <body> … 4+ 3.5+ Script
- 77. <body> … <script type="text/javascript" src="js/LAB.js"></script> <scripttype="text/javascript"><!— $LAB .script(„some-scripts-1.js“).wait() .script(„some-scripts-2.js“); //--></script> </body> </html> Script
- 78. “The thing itdoes differently than most others is it allows you to express via the API calls when it is necessary to preserve execution order for dependencies.” http://labjs.com/ <script type="text/javascript" src="js/LAB.js"></script> <script type="text/javascript"><!— $LAB .script(„some-scripts-1.js“).wait() .script(„some-scripts-2.js“); //--></script>
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95. Firebug • Firebug (NetzwerkMonitoring) – Fortschrittsanalyse – Filter nach Ressourcen-Typ – Cache-Analyse– Cache-Analyse – HTTP Headers – XMLHttpRequest Monitoring
- 96.
- 98.
- 99.
- 100. Wie groß sinddie ausgelieferten Ressourcen? Pro Seite Pro Applikation Gibt es Ausreißer? Werden Ressourcen nicht gefunden? Gibt es überflüssige Ressourcen?
- 102. Jasmin CSS / JS CDS Grafiken/ Flash Apache HTML Größe Fehlende Ressourcen Größe Ungenutzte CSS-Selektoren JavaScript-Fehler Fehlende Ressourcen Überflüssige Ressourcen Größe Fehlende Seiten
- 103. Jasmin CSS / JS CDS Grafiken/ Flash Apache HTML Größe Fehlende Ressourcen Größe Ungenutzte CSS-Selektoren JavaScript-Fehler Fehlende Ressourcen Überflüssige Ressourcen Größe Fehlende Seiten
- 104.
- 105.
- 106.
- 107.
- 108.
- 109.
- 110.
- 112. To avoid overloadingour servers, only 25 issues can be returned at a time. Return more than 25 crawling issues? Jonathan Simon: […] it‘s propably time to consider raising it. I‘ll discuss your feedback with the team.
- 113.
- 115. start = newDate(); time = new Date() - start; if (time > 30000) { log(page, time); }
- 116.
- 117. Vielen Dank füreure Aufmerksamkeit! nico.steiner@1und1.de @sensationalseo www.nicosteiner.de www.slideshare.net/n.steinerhttp://www.flickr.com/photos/ben30/4028840988/