Beiträge zu “performance”

NGINX Performance Tips

Heute morgen habe ich mal die 3 Tipps von hier ausprobiert. Bisher habe ich die Konfiguration des Webservers zur Performance nicht so stark beachtet da ich eher mit den Ladezeiten der Webseiten beschäftigt war. Wahrscheinlich geht da noch mehr aber die 3 Einstellungen bringen substantiellen Gewinn:

Getestet habe ich mit

     ab -c 20 -n 1200 https://www.hagen-bauer.de/

Vorher:

     Time taken for tests:   18.786 seconds
     Requests per second:    596.17 [#/sec] (mean)
     Time per request:       33.547 [ms] (mean)
     Time per request:       1.677 [ms] (mean, across all concurrent requests)

     Connection Times (ms)
                   min  mean[+/-sd] median   max
     Connect:       15   30   3.6     30      83
     Processing:     2    3   0.8      3      35
     Waiting:        2    3   0.7      3      35
     Total:         22   33   3.9     33      89

Nachher:

      Time taken for tests:   7.866 seconds
      Requests per second:    1423.81 [#/sec] (mean)
      Time per request:       14.047 [ms] (mean)
      Time per request:       0.702 [ms] (mean, across all concurrent requests)

      Connection Times (ms)
                    min  mean[+/-sd] median   max
      Connect:        2   11   4.9     10      44
      Processing:     0    3   1.8      3      18
      Waiting:        0    1   1.2      1      14
      Total:          2   14   5.4     13      49
22.2.18
Weitere Beiträge zu: nginx   performance  

Jquery Bibliotheken anpassen (und verkleinern)

Jquery ist inzwischen eine art “Standardbiblitothek” geworden und ist auch eine der Voraussetzungen für Bootstrap. Wie bei jeder Standardbibliothek sind auch ein paar Elemente drin die man vielleicht nicht braucht.

Jquery arbeitet auch mit Grunt und bietet die Möglichkeit an einzelne Elemente in einer einer angepassten Version auszuschließen.

So sehen die Schritte aus wenn man dies für eine Version 1.11 machen möchte und auf die Ajax Anteile von Jquery verzichten kann. Die Datei wird dann 10kb kleiner. Jetzt muss ich nur noch herausfinden auf welche Elemente ich vielleicht auch noch verzichten kann

mkdir jquery-build
cd jquery-build/
git clone git://github.com/jquery/jquery.git
cd jquery/
git checkout 1.11.3
grunt custom:-ajax
13.9.15
Weitere Beiträge zu: jquery   performance  

Jekyll: Responsive Images

Bei aller Optimierung der Webseite ergibt sich immer noch ein relativ großes Problem mit Bildern.

Man kann zwar größere Bilder für kleinere Geräte “herunter rechnen”, nur müssen trotzdem die Daten erst einmal übertragen werden.

Könnte man nicht bei einem kleinen Gerät, das wahrscheinlich über eine langsamere Leitung angebunden ist, nicht einfach ein kleineres Bild übertragen?

Mit “Responsive Images” geht das. Es gib inzwischen ein “picture” Tag in dem man sagen kann:

  • bei großer Auflösung nimm das große Bild
  • bei mittlerer Auflösung nimm das mittlere Bild
  • bei kleiner Auflösung nimm ein kleines Bild
  • bei ganz kleiner Auflösung nimm das kleine Bild und schneide oben und unten noch etwas ab.

So weit so gut. Nur wer schreibt den ganzen HTML Kram und muss ich die ganzen Bilder manuell erstellen? Das Jekyll Plugin Jekyll Picture Tag nimmt einem diese ganze Arbeit ab. Einfach das Bild mit

  {% picture /pfad/zumbild.jpg alt="ein ganz tolles Bild" %}

in den Text einfügen. Der Rest geht automatisch

Die Installation ist recht einfach

     sudo gem install jekyll-picture-tag
 
 

und das Plugin von hier in den _plugin Folder. Die aktuellen Browser unterstützen schon das neue Picture Tag und für die älteren gibt es eine Javascript Bibliothek Polyfill.

Die Konfiguration geschieht in der _config.yml von Jekyll. Ich habe erst mal mit den Standardwerten begonnen. Mal sehen was ich über die Zeit noch anpassen muss.

Habt Ihr schon Erfahrungen?

12.9.15
Weitere Beiträge zu: jekyll   performance  

CSS Sprites automatisiert aktualisieren

Bei der Optimierung von Webseiten auf Geschwindigkeit ist die Reduktion der notwendigen Anfragen einer der wichtigsten Maßnahmen. Kleine Bilddateien für Logos, Trusted Shop Logos oder SSL Zertifikate sind dabei nicht zu unterschätzen.

Für diesen Fall werden sogenannte “CSS Sprites” empfohlen. Die Idee: man packt alle kleinen Dateien in eine einzelne Datei und verwendet dann CSS Anweisungen um an der richten Stelle den richtigen Ausschnitt zu verwenden. Im allgemein kann man dazu kleine online Tools verwenden um sich diese Sprite zu erstellen.

Etwas kniffeliger kann es werden wenn diese Bilddateien nicht statisch sind sondern täglich aktualisiert werden.

In meinem Fall habe ich das so gelöst. Ich verwende convert aus dem imagemagick Baukasten um die Gif Datei täglich mit Cron zu aktualisieren.

 convert logo_shop.gif trusted-shop-siegel.gif trusted-shop-rating.gif thawte-seal.gif -append sprite.gif

Innerhalb der CSS Datei werden dann die genauen Positionen festgelegt

.logo_shop, .trusted-shop-siegel, .trusted-shop-rating, .thawte {
  background-image: url('sprite.gif');
  background-repeat: no-repeat;
}
.thawte{
    background-position: 0px -344px;
    width: 60px;
    height: 61px;
}
.trusted-shop-rating {
    background-position: 0px -153px;
    width: 190px;
    height: 190px;
}

Stellt sich die Frage wie man die genaue Position herausbekommt. Hilfreich hierbei kann die Website SpriteCow sein. Aber am Ende muss man wohl immer etwas probieren.

Im HTML der Webseite kann man dann die Bilder ungefähr so einbinden

   <a href="{$index}"> <div class="logo_shop"></div></a>

Bei der Optimierung der Bilder auf Größe kann einem auch noch kraken.io hilfreich sein.

10.9.15
Weitere Beiträge zu: performance   CSS  

Jekyll: CSS Optimierungen "above the fold" mit Grunt

Bevor der Browser die Seite darstellen kann muss er die Formatierungen (CSS) und den Inhalt (html) der Seite im Speicher haben. Das bedeutet in den meisten Fällen das die Seite erst dann dargestellt wird wenn CSS und HTML Datei geladen sind.

Eine auch von Google empfohlene Möglichkeit ist das man die großen CSS Dateien erst am Schluss lädt und die für die Darstellung des sichtbaren Bereichs notwendigen CSS Information direkt in den HTML Bereich stellt.

Dann kann der Browser mit der Darstellung des sichtbaren Bereichs beginnen wenn er Formatierungen und Inhalt und der Rest wird nachgeladen.

So weit die Theorie. Die Frage ist nur “Welche CSS Formatierungen” brauche ich?”.

Wenn man Grunt verwendet gibt es hier ein Werkzeug das einem genau diese notwendigen CSS Anweisungen heraussucht.

Diese Beschreibung für meinen Jekyll Blog geht davon aus, das Grunt bereits installiert und konfiguriert ist.

Zuerst die Module installieren

    sudo npm install grunt-penthouse --save-dev
    sudo npm install penthouse --save-dev
    
    vi Gruntfile.js
    penthouse: {
      extract : {
          outfile :  './_includes/critical.css',
          css : './css/style.min.css',
          url :'http://localhost:4000/',
          width : 1200,
          height : 500
      },
    },
    grunt penthouse

Mit diese Anweisung wird Grunt angewiesen sich die URL anzusehen und für die Bildschirmgröße 1200 x 500 alle CSS Anweisungen aus der Datei css/style.min.css herauszusichen die man braucht und das Ergebnis in die Datei _include/critical.css zu schreiben.

Die Informationen aus dieser Datei importieren ich dann im Jekyll Build Prozess in meinen <head> Abschnitt

    vi _includes/head.htm
      <style>
         .highlight,h1,h3,p,pre,ul{margin-bottom:15px}.wrapper{max-width:-webkit-calc(800px - (30px * 2));max-width:calc(800px - (30px * 2));margin-right:auto;margin-left:auto;padding-right:30px;padding-left:30px}@media screen and (max-width:800px){.wrapper{max-width:-webkit-calc(800px - (30px));max-width:calc(800px - (30px));padding-right:15px;padding-left:15px}}.wrapper:after{content:"";display:table;clear:both}.page-content{padding:30px 0}.post-list{margin-left:0;list-style:none}.post-link{display:block}.highlight{background:#fff}@font-face{font-family:icons;src:url(/fonts/icons.eot?d30c1b80659ee9dba62c4125fe8fca0c);src:url(/fonts/icons.eot?#iefix) format("embedded-opentype"),url(/fonts/icons.woff2?d30c1b80659ee9dba62c4125fe8fca0c) format("woff2"),url(/fonts/icons.woff?d30c1b80659ee9dba62c4125fe8fca0c) format("woff"),url(/fonts/icons.ttf?d30c1b80659ee9dba62c4125fe8fca0c) format("truetype"),url(/fonts/icons.svg?d30c1b80659ee9dba62c4125fe8fca0c#icons) format("svg");font-weight:400;font-style:normal}.icon{font-family:icons;display:inline-block;vertical-align:middle;line-height:1;font-weight:400;font-style:normal;speak:none;text-decoration:inherit;text-transform:none;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon_Blue_and_yellow_ribbon:before{content:"\f101"}.icon_box_archive:before{content:"\f102"}.icon_glyphicons-28-search:before{content:"\f104"}.icon_glyphicons-66-tag:before{content:"\f108"}.icon_glyphicons-social-38-rss:before{content:"\f10c"}.icon_meisen-cam:before{content:"\f10e"}.icon_solar_pannel_solar_cell:before{content:"\f10f"}.icon_weather-station:before{content:"\f111"}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}header{display:block}a{background-color:transparent}img{border:0}pre{overflow:auto}code,pre{font-size:1em}button{color:inherit;font:inherit;margin:0}button{overflow:visible}button{text-transform:none}button{-webkit-appearance:button;cursor:pointer}button::-moz-focus-inner{border:0;padding:0}@media print{:after,:before{background:transparent!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}}*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:transparent}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:16px;line-height:1.42857;background-color:#efefef}button{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#ff8f00;text-decoration:none}img{vertical-align:middle}.img-circle{border-radius:50%}h1,h3{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}h1,h3{margin-top:22px;margin-bottom:11px}h1{font-size:35px}h3{font-size:28px}code,pre{font-family:Menlo,Monaco,Consolas,"Courier New",monospace}code{padding:2px 4px;font-size:90%;color:#c7254e;background-color:#f9f2f4;border-radius:4px}pre{display:block;font-size:15px;line-height:1.42857;word-break:break-all;word-wrap:break-word}pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}.container{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}.container:after,.container:before{content:" ";display:table}.container:after{clear:both}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.row{margin-left:-15px;margin-right:-15px}.row:after,.row:before{content:" ";display:table}.row:after{clear:both}.col-md-9,.col-sm-3,.col-sm-9,.col-xs-6{position:relative;min-height:1px;padding-left:15px;padding-right:15px}.col-xs-6{float:left}.col-xs-6{width:50%}@media (min-width:768px){.col-sm-3,.col-sm-9{float:left}.col-sm-3{width:25%}.col-sm-9{width:75%}}@media (min-width:992px){.col-md-9{float:left}.col-md-9{width:75%}}.collapse{display:none}.nav{margin-bottom:0;padding-left:0;list-style:none}.nav:after,.nav:before{content:" ";display:table}.nav:after{clear:both}.nav>li{position:relative;display:block}.nav>li>a{position:relative;display:block;padding:10px 15px}.navbar{position:relative;min-height:50px;margin-bottom:22px;border:1px solid transparent}.navbar:after,.navbar:before{content:" ";display:table}.navbar:after{clear:both}@media (min-width:768px){.navbar{border-radius:4px}}.navbar-collapse{overflow-x:visible;padding-right:15px;padding-left:15px;border-top:1px solid transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.1);-webkit-overflow-scrolling:touch}.navbar-collapse:after,.navbar-collapse:before{content:" ";display:table}.navbar-collapse:after{clear:both}@media (min-width:768px){.navbar-collapse{width:auto;border-top:0;box-shadow:none}.navbar-collapse.collapse{display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important}.navbar-fixed-top .navbar-collapse{padding-left:0;padding-right:0}}.navbar-fixed-top .navbar-collapse{max-height:340px}@media (max-device-width:480px) and (orientation:landscape){.navbar-fixed-top .navbar-collapse{max-height:200px}}.container>.navbar-collapse{margin-right:-15px;margin-left:-15px}@media (min-width:768px){.container>.navbar-collapse{margin-right:0;margin-left:0}}.navbar-fixed-top{position:fixed;right:0;left:0;z-index:1030}@media (min-width:768px){.navbar-fixed-top{border-radius:0}}.navbar-fixed-top{top:0;border-width:0 0 1px}.navbar-brand{float:left;padding:14px 15px;height:50px}@media (min-width:768px){.navbar>.container .navbar-brand{margin-left:-15px}}.navbar-toggle{position:relative;float:right;margin-right:15px;padding:9px 10px;margin-top:8px;margin-bottom:8px;background-color:transparent;background-image:none;border:1px solid transparent;border-radius:4px}.navbar-toggle .icon-bar{display:block;width:22px;height:2px;border-radius:1px}.navbar-toggle .icon-bar+.icon-bar{margin-top:4px}@media (min-width:768px){.navbar-toggle{display:none}}.navbar-nav{margin:7px -15px}.navbar-nav>li>a{padding-top:10px;padding-bottom:10px;line-height:22px}@media (min-width:768px){.navbar-nav{float:left;margin:0}.navbar-nav>li{float:left}.navbar-nav>li>a{padding-top:14px;padding-bottom:14px}}@media (min-width:768px){.navbar-right{float:right!important;margin-right:-15px}}.navbar-inverse{background-color:#607d8b;border-color:#4b626d}.navbar-inverse .navbar-brand{color:#fff}.navbar-inverse .navbar-nav>li>a{color:#fff}.navbar-inverse .navbar-toggle{border-color:#333}.navbar-inverse .navbar-toggle .icon-bar{background-color:#fff}.navbar-inverse .navbar-collapse{border-color:#516a76}.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:transparent;border:1px solid none;border-radius:4px}.visible-xs{display:none!important}@media (max-width:767px){.visible-xs{display:block!important}}@media (max-width:767px){.hidden-xs{display:none!important}}#sidebar{height:100%;padding-right:0;padding-top:20px}#sidebar .nav{width:95%}@media screen and (max-width:767px){.row-offcanvas{position:relative;-webkit-transition:all .25s ease-out;-moz-transition:all .25s ease-out;transition:all .25s ease-out}.row-offcanvas-right .sidebar-offcanvas{right:-41.6%}.sidebar-offcanvas{position:absolute;top:0;width:41.6%}#sidebar{padding-top:0}}ul{list-style:square inside}ul li{padding-left:1em;margin-bottom:.5em}body,h1,h3,p,pre,ul{margin:0;padding:0;color:#757575}p{margin:0 0 9px}body{padding-top:50px;padding-bottom:40px}.sidebar-nav{padding:9px 0}img{max-width:100%;height:auto}.hb-entry-title a{color:#757575;display:block;margin-top:10px;padding:0 0 3px;text-decoration:none}.widget-header{font-size:22px}.navbar-inverse .navbar-nav>li>a{font-size:20px}.navbar-brand{box-sizing:border-box;display:block;font-size:24px;color:#fff;font-weight:400;letter-spacing:.02em;line-height:1;position:relative}.widget-content{margin:5px 30px 30px;position:relative}.highlight pre{overflow-x:auto}.highlight pre code{white-space:pre}.highlight pre,pre{background-color:#f8f8f8;border:1px solid #ccc;padding:6px 10px;border-radius:3px}.navbar-toggle .icon-bar:nth-of-type(2){top:1px}.navbar-toggle .icon-bar:nth-of-type(3){top:2px}.navbar-toggle .icon-bar{position:relative;transition:all 500ms ease-in-out}
      </style>

Damit bin ich zu mindestens für den Desktop Bereich mit den von Google Pagespeed vorgeschlagenen Optimierungen durch.

page insights

29.8.15
Weitere Beiträge zu: jekyll   grunt   performance  

Dies ist ein privater Blog von Hagen Bauer- berufstätiger Vater, Ehemann, Naturliebhaber, Läufer, Zelter, technikverliebt.


Creative Commons License
This blog is licensed under a Creative Commons License