FIT 14.2 – Reduce Image Weight, Raise Quality

The first release of 2016, FIT 14.2 primarily brings a set of new features regarding image optimization.

First and foremost we have implemented a new algorithm that allows us to reduce the transport size of truecolor PNGs with transparency by up to 80%. This is especially interesting for relevant browsers that do not support WebP images (looking at you, Apple Safari). While we were inspired by Mario Klingemann’s Zorro SVG we were able to take the idea several steps ahead and not only resolve issues that it raised, but also improve methods further and in consequence produce even smaller result images without the need of JavaScript.

FIT now also uses 16-bit algorithms for internal image calculation and a better gamma correction. Better handling for truecolor PNGs that are transcoded to WebP format was implemented and developers now may use ai-scaling-width/height values that will scale images bigger than the target viewport. Additionally bringing new scroll speed dependent loading of visibility delayed images and options to control the viewport offset for loading these, FIT 14.2 arguably offers the best automated image optimization we ever had.

For assuring high quality in development and maintenance of projects we introduced an XPath function and a fit.ini setting. The watch() XPath function allows you to watch XPath expressions and in case of errors will create entries in the fit_alert.log. In combination with the new fit.ini option FIT_DEPRECATION_EXCEPTION, which will cause exceptions to be thrown when deprecated features are used, you can minimize the chance that your projects will run into future issues.

We also did a rework of our user agent detection. FIT now uses the common UA Parser project for client matching. It provides a robust set of regular expressions that are less sensitive to the frequent version updates (of both operating systems and browsers) seen in user agent strings. However, we still maintain our own Client Description Repository that stores client capabilities, features and properties. After identifying the client, our CDR data is accessed to build up the Delivery Context.

Updates of third party software and bugfixes complete this release.

The SDK available from Github is updated to 14.2, too.

Refer to the full changelog at our developer site for a more detailed list of changes.

FIT 14.1.5

14.1.5 is available! It is the 11th and last planned release in 2015. The main focus was on improving the image handling of the Web Accelerator.

However, the most interesting feature is certainly the script manager that now supports loading remote scripts, too. According to HTTP Archive, after image media, JavaScript is the second largest chunk of content used in Web pages. At the same time, JS code is often delivered in many small files. FIT combines its caching, minifying and script loading facilities to turn the situation into a strength: All JS files, both from backend servers or local files, will be delivered in a single request. This results in better compression, a reduced HTTP overhead and faster browsing – especially on networks that suffer from higher latency like mobile connections.

For Image Scaling (and compression), we have improved the handling of PNG images. This image type delivers sharp graphics, well suited for logos and glyphs, but they can eat up your bandwidth – especially when the number of colors exceeds the maximum palette size. Our new algorithm considers the number of colors, transparency and client capabilities to decide whether the image is suitable for lossy compression. For graphic-like images, WebP lossless compression is used, if supported. These measures drastically reduce the resulting file size.

These advanced compression techniques may now be used for even more images: The parse action detects image content and then applies image scaling to it. These images are scaled according to the default image settings. As the URLs are the same for every client, the response is not publicly cacheable. Nevertheless, this allows you to reduce image payload, even if your image URLs are created or modified on-the-fly with JavaScript, as many responsive image libraries do.

Speaking of which, the new responsive-image-filtering reduces the HTML size by filtering out all image variants (picture/source or srcset) that a capable client would not use anyway. At the same time, image scaling and compression is applied to these images, too.

In addition to these features, we have improved our HTTP compatibility to properly pass HTML form uploads (multipart/form-data) through FIT, regardless of the field names used. In the other direction, HTML fragment responses can be detected automatically, which is often useful for sites making heavy use of AJAX.

The SDK available from Github is updated to 14.1.5, too.

Refer to the full changelog at our developer site for a more detailed list of changes.

Web Performance Optimization – Best Practice

Stoll Online Shop verkürzt Ladezeiten um 63 Prozent

Der Möbelhändler Stoll Wohnbedarf + Objekt hat seine Webseite für Mobile optimiert. Nutzer können jetzt nach knapp sieben Sekunden mit den Smartphone Möbel shoppen. Die Ladezeit wurde damit von 19 Sekunden auf knapp sieben Sekunden reduziert, mit dem Ziel dem Nutzer möglichst schnell eine bedienbare Webseite (vgl. „Document Complete“ in den Diagrammen) zur Verfügung zu stellen. Dies entspricht einer Verkürzung der Ladezeit von 63 %.

Ladezeiten-Stoll-Online

Dies ist für Onlineshops besonders wichtig, denn mit mobilen Geräten sind die Besucher ungeduldiger als am Desktop Rechner. Einige Beispiele: Erhöht Amazon die Ladezeit um 0,1 Sekunden, gehen die Umsätze um ein Prozent zurück (Quelle: Kohavi und Longbotham 2007).
Google beobachtet einen Rückgang der Suchanfragen um 0,6 %, wenn sich die Ladezeit um 0,4 Sekunden erhöht (Quelle: Brutlag 2009).

Der Möbelhändler setzt die Software Web Accelerator von Sevenval ein, um Maßnahmen der Web Performance Optimization möglichst schnell in das vorhandene Tool Stack zu integrieren. Für den Einsatz der Software musste der Code des bestehenden Shops nicht verändert werden. Sevenval stellt die Software inzwischen einzeln zur Verfügung, zuvor war die Web Performance Optimization Teil einer umfangreichen Server-Lösung. Unsere Infografik erklärt hierzu weitere Details.

Der Web Accelerator übernimmt automatisch die Kompression von Bildern und Scripts und anderen Webseitenelementen. So wird für Stoll-Online eine Seite ausgeliefert, die mit 469 KB bis zur Interaktionsfähigkeit (Document complete) nur noch 16 % der ursprünglichen Seitengröße ausmacht.

Die Qualität bleibt dabei hochwertig. Zum Beispiel erhalten alle Browser und Geräte das für sie perfekte Bildformat in der besten Auflösung.

Der nahezu identische Wert bei der Seitengröße für Document complete und Fully loaded ohne Einsatz des Web Accelerators zeigt, dass die Seite nicht auf Interaktionsfähigkeit optimiert war (Vgl. rote Balken im Diagramm). Alle Daten wurden geladen, bevor der Nutzer auf der Seite aktiv werden konnte. Mit dem Web Accelerator werden Daten nicht nur komprimiert, sondern auch die Render Queue wird besser organisiert. Elemente, die nicht sofort gebraucht werden, laden im Hintergrund nach. Deshalb werden zunächst nur 469 KB übertragen, um den Nutzer möglichst schnell handlungsfähig zu machen. Sobald alle Elemente geladen sind, liegt die Seitengrösse bei 992 KB.

Dateigrössen-Elemente

Laut HTTPArchive.org machen Bilder im Durchschnitt 64 % der Datenmenge einer Webseite aus – keine andere Ressource bringt größere Dateien mit sich. Aktuell müssen durchschnittlich 1.408 KB übertragen werden, um alle Bilder eines Anbieters zu laden. Die Analyse beruht auf Daten von hunderttausenden Webseiten, dazu gehören die populärsten Seiten gemäß dem Alexa Ranking.

Bilder sind daher der Schlüssel für eine erfolgreiche Reduzierung der Seitengröße für die mobile Nutzung. Bei Stoll Online konnten die Bilder auf 538 KB reduziert werden, was im weltweiten Vergleich eine Reduktion auf 38 % der Ursprungsgröße bedeutet.

Bei Stoll Online lag der Bildanteil mit 2498 KB deutlich höher als der weltweite Durchschnitt, hier führt die Optimierung sogar zu 21 % der vorherigen Dateimenge.

Usability-Studie: Banken im mobilen Stresstest

Sevenval Consulting, unsere Beratungsunit, hat eine Studie zur Usability mobiler Bankenportale veröffentlicht.

Unser ausführlicher Report zur Studie, inklusive Executive Summary und Handlungsempfehlungen, kann via Email angefragt werden: bankenstudie@sevenval.com.
Bitte den Betreff “Bankenstudie” angeben.

Ein schneller Überblick zu den Ergebnissen:

  • Klassische Filialbanken zielen am mobilen Geschäftsmodell vorbei.
  • Keine der Banken erreicht das Gesamturteil „gut“. Die Mehrheit der getesteten Anbieter weist erhebliche Usability-Mängel auf.
  • Ladezeiten sind abschreckend lang. Nur die Sparkasse Hannover unterschreitet die
    wichtige 5-Sekunden-Marke bis zur Interaktionsfähigkeit der Webseite.
  • Die Usability-Untersuchung folgt dabei einer vollständigen Customer Journey. Bewertet wird unter anderem der Einstieg via Google-Suchergebnissen, die mobile Darstellung der Service- und Produktinformationen und die Beantragung eines Girokontos.

Weitere Informationen auf: sevenval.com/consulting

2015-11-19-Usability Wertung, Bankenstudie-weiß-Überschrift-klein

 

FIT 14.1.4

We are happy to announce the release of FIT 14.1.4. It is a maintenance release comprising bugfixes and a number of enhancements. Many of which aim to provide seamless integration of FIT into existing Web site deployments to make use of the Web Accelerator features.

The SDK available from Github is updated to 14.1.4, too.

Refer to the full changelog at our developer site for a more detailed list of changes.

Mobile Trends – Unsere Webtraffic-Analyse für Oktober

Hier sind die Mobile Trends mit Zahlen aus unseren Webtraffic-Analysen für den Monat Oktober 2015.

Wir zeigen eine Top 10 der am häufigsten verwendeten mobilen Geräte, Browsern und Betriebssysteme. Außerdem vergleichen wir speziell diesen Monat den Webtraffic von Android Marshmallow und iOS 9 jeweils vier Wochen nach deren Markteintritt.

FIT 14.1.3

We have just released FIT 14.1.3. This version comes with a host of exciting new features:

At the core of FIT, there has always been a lot of HTTP functionality, and now there is even more. The new HTTP Cache partially implements RFC7234: FIT will store publicly cacheable responses from source servers according to their cache-related headers (e.g. Cache-Control). That means that fewer resources have to be retrieved from the origin servers, the time-to-first-byte decreases and inlining features will work out of the box. Since the feature is enabled by default, you will automatically benefit from cacheable backends. However, you can still configure caching rules manually or disable caching altogether in your sources.xml.

Besides caching, FIT now supports simple HTTP Range Requests on the client connection. Downloading partial documents has become a popular way to load video files. Thus, FIT now supports video playback and seeking in most browsers/players.

To maintain a readable configuration even for complex settings, the sources.xml file is now filtered. That enables you to use dynamic expressions that for example set different origin servers for development and production setups.

Furthermore, the filtered config files (sources.xml, urlmap.xml, flow.xml) now support Dynamic Attribute Values with the shorthand syntax: attribute="{expression}". This enables you to use DC properties or arbitrary strings computable with XPath in any setting.

For proxy-like setups, especially for the Web Accelerator, you can now configure the FIT frontend domain to have the same name as your origin server. That means, you just have to change your DNS to point to FIT and your setup is ready!

On the feature side, the Web Accelerator has interesting news as well. FIT now incorporates mozjpeg as a bundled third party library. On average, it encodes JPEG images into 25% smaller output files. This can significantly speed up the transfer and rendering of your Web page.

Many CSS files contain redundant, browser specific code. The CSS minifier can now strip unused CSS code with vendor prefixes (like -webkit) that do not apply to the requesting user agent. You have to enable the feature in config.xml.

The head reordering component can now remove duplicate scripts if the same URL is used in more than one script element. You have to enable the feature in config.xml.

All CSS files stored in Adaptive Components can now be combined into a single request with the new option <style-concat>. This may save a lot of HTTP requests in projects that use ACs to modularize their code.

Developers will find that the updated SDK will apply strict XML parsing to configuration files. FIT will throw an exceptions if your configuration is not well-formed. The debug output and log files will provide detailed information regarding the cause of the error.

Also, the vagrant user in the SDK can now write FIT configuration and cache files. Thanks to that, you can e.g. empty the cache of a project without entering the guest system: vagrant ssh -- fitadmin maintenance clearcache <project>

Refer to the full changelog for a more detailed list of changes.