FIT 14.6: Web Accelerator with next-generation Image Compression

This year’s last release is a big one. FIT 14.6 introduces our next-generation Image Compression engine.

To find the optimal representation for an image, the Image Compression engine performs a number of optimizations suitable for the input image. For example, lossy compression techniques (WebP/JPEG) may be applied to a photograph for substantial size improvements. Transparent PNGs may benefit from ZorroSVG mapping, or graphics from WebP lossless coding or quantization. The experiments are traffic-aware, so that frequently requested images are taken care of with higher priority.

<image-compression> can be used if Image Scaling is disabled. As a bonus, the handling of Image Compression URLs in HTML (and CSS) documents is much faster, which reduces the footprint of HTML processing in the critical path.

As a BETA feature, we have added an automatic image quality assessment tool. Lossy compression usually achieves the highest byte savings. However, it is impossible to find a compression level (ironically often called “quality”) that balances compression and quality for all images. Different images show different patterns of degradation if the compression level is increased. While some images still look good with JPEG “quality” 30, other images may start showing visible artifacts already at high levels like 90. The common solution is to raise the quality for all images. You can now define the compression level by means of quality: “Compress an image as much as possible, as long it looks like the original”. This can be a real byte-saver! It allows us to apply lossy compression to input images in lossless formats without the risk of quality degradation. As this is beta, we would love to hear your feedback about this!

Another interesting beta feature is the HTML5 compliant parser. It parses HTML documents exactly like your browser, and you can still use all FIT development features like XSLT and XPath.

As this is a major release, the various bug fixes, 3rd party updates and smaller improvements are accompanied by a couple of removals of previously deprecated features. So please pay close attention to the changelog.

The SDK for 14.6 is available from Github.

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

FIT 14.5.3 & Web Accelerator: Delayed iframes and more

In addition to fixing bugs FIT 14.5.3 introduces new and improved Web Accelerator features.

In many modern projects, iframes are used for social media widgets and user tracking. They usually have no impact on the perceived performance of a web page. But there are also sites that have iframes with heavy-weight media content such as youtube videos. Loading megabytes of videos slows down page loading tremendously, even in iframes.

To ensure that users will only load content they are about to see, we introduce delayed iframes. The delayed loading for iframes works exclusively with visibility based loading: The source of the iframe is going to be loaded when the iframes comes close to or into the browser’s viewport, for example by scrolling the page. Due to the unknown nature of the included content of iframes (small tracking and social media vs large videos), the feature cannot be activated globally. You have to enable it in config.xml and mark the individual iframe element with the ai-delay="true" attribute.

Probably even more exciting is an improvement we made for delayed images. If the dimensions of images are already known (i.e. the image is in the FIT cache) FIT will generate an SVG image with the same intrinsic size as the final image (instead of a transparent 1x1px GIF). Hence, the layout of the page will remain unchanged when the final image is loaded and replaces the placeholder. This saves a lot of browser reflows and avoids “jumping pages”. The SVG placeholder also clears the way for more promising improvements to the delayed image placeholders, so stay tuned for further news on the topic in upcoming releases.

The SDK for 14.5.3 is available from Github.

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

Sevenval FIT 14.5.2

FIT 14.5.2 is another release bringing mostly bug fixes and improvements for existing features.

Delayed images prioritized to be loaded when they are going to become visible considerably reduce traffic. But if visitors want to print sites, they are basically missing every image that neither is nor has been in the viewport. The new parameter of the loadHQImages function makes the client load all images, whether they are in the viewport or not. And the new event delayedimagesloaded informs you when the client finished doing so. So this combination offers means to prepare the site for printing and lets you know when preparing has finished.

FIT 14.5.1 already addressed noise in the logs. We identified another source for noise, namely overly greedy bots (such as Google spiders) interpreting JavaScript strings starting with a / as relative URLs. So when you write something like <script>var foo = '/bar';</script> into your document, it will not take long until you notice said spiders requesting the resource /bar. This will probably lead to unnecessary 404 responses, inflating the FIT server logs and backend server logs, thus probably hiding real problems from you. FIT 14.5.2 will no longer generate JavaScript strings starting with a /.

Additionaly, fixing issues with the image scaling cache has reduced the CPU usage noticeably.

The SDK for 14.5.2 is available from Github.

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

 

WirUm4-Vortrag: Web Architektur bei Sevenval

WirUm4 ist unsere Vortragsreihe von Kollegen für Kollegen, die stets nachmittags stattfindet. Zuletzt hat Robert Großer unsere Web Architektur vorgestellt. 


Um unseren Kunden moderne Webtechniken anbieten zu können, betreiben wir bei Sevenval in unseren Rechenzentren eine komplexe Infrastruktur. In seinem WirUm4-Vortrag erläuterte Robert die Komponenten der Web-Architektur und legte besonders Augenmerk auf die verschiedenen Stationen beim Request-Durchlauf, die für Caching eingesetzt werden können. So befindet sich, neben dem auf den FIT Servern eingesetzten FIT HTTP Cache, sowohl vor den FIT Servern ein Cachingserver (Varnnish Cache), als auch hinter den FIT Servern zu den Kundenbackenservern für http-Requests ein Proxy Cache (Squid).

In einer Simulation eines Requests beginnend vom anfragenden Handy bis hin zu dem Kundenbackend erläuterte Robert den Teilnehmern den vollständigen Ablauf inklusive DNS-Auflösung und SSL-Entschlüsselung. Das erworbene Wissen soll vor allem dabei helfen, ungenutzte Caching-Potentiale in Projekte zu erkennen, diese zu nutzen und die Identifizierung aufgetretener Fehler zu beschleunigen.

Kurzübersicht

Schön war’s auf dem Fast Track! Unsere dmexco in Bildern.

Am 15. und 16. September fluteten ca. 50.000 Besucher die Hallen des Kölner Messegeländes, um 1.000 Aussteller der digitalen Wirtschaft zu besuchen.

Mit unserem Angebot zur schnellen digitalen Transformation – dem Fast Track – hatten wir ein schönes Alleinstellungsmerkmal, bei den meisten Unternehmen auf der Messe ging es um Online-Werbung und E-Commerce.

Ein großes Dankeschön an unsere Gäste! Wir hatten eine gute Zeit mit Euch und freuen uns auf weitere Gespräche. Der große Andrang hat uns sehr erfreut und uns gezeigt, dass wir mit unseren Frontend-Lösungen auf dem richtigen Weg sind.

Unsere Tipps zum digitalen Wandel in verschiedenen Branchen könnt ihr auf Mobilbranche.de nachlesen:

Für Fragen zum Digital Transformation Fast Track schreibt am besten an dmexco@sevenval.com.

allesaufgrün_small

Die Ruhe vor dem Sturm. 

letzte Vorbereitungen

Letzte Vorbereitungen bei Sevenval.

Sevenval-Schuhe_small

Schließlich war alles im grünen Bereich. Inklusive Schuhe in unserem Sevenval grün;-)

Visitenkarten tauschen_small

Und dann ging es los mit dem Netzwerken. 

 

Jan Webering und Sascha Langfus mit Gast

Chefsache: Jan Webering und Sascha Langfus im Gespräch.

 

Frozen Yoghurt

Unser Frozen Yoghurt war sehr beliebt. Für den zweiten Tag mussten wir Becher nachbestellen.

 

Yoghurt schlange_small

Vielen Dank für Euer zahlreiches Erscheinen! Bis nächstes Jahr! 

 

Ladezeiten sparen mit dns-prefetch, preconnect, preload und HTTP/2 push

Unser Kollege Johannes stellte in einem internen Vortrag Resource Hints und diverse andere Methoden vor, mit denen Ladezeiten von Websites und externen Inhalten bzw. Ressourcen verkürzt und die Performance verbessert werden können. Thematisiert wurden dns-prefetch, preconnect, preload und HTTP/2 push.

Durch explizites Aufrufen von DNS-Prefetching kann die Auflösung von IP-Adressen bereits vor dem Aufruf von Inhalten externer Domains durchgeführt werden. Da die Einbindung externer Domains ihren Aufruf mit sich bringt, wird dadurch möglicherweise das Laden einer Website verlangsamt. Die Verwendung von DNS-Prefetch-Links kann also dabei helfen, die Ladezeit um einige (Mili-)Sekunden zu verbessern.

WPT ohne alles

Ersten Laden ohne Optimierung (Usecase: Font Loading)

wpt dns prefetch

Ladezeiten mit DNS-prefetch (Usecase: Font Loading)

Preconnect hingegen ermöglicht es dem Browser Verbindungen einzurichten, bevor eine HTTP-Anfrage an den Server gesendet wird. Teure Roundtrips, die durch DNS-Lookups, TCP-Handshake und ggfs. TLS-Negotiaton entstehen, können hierdurch aus dem Request-Ablauf eliminiert und Ladezeiten verkürzt werden.

wpt mit preconnect

Ladezeiten mit preconnect (Usecase: Font Loading)

Bei Preload handelt es sich um einen neuen Web-Standard, der mehr Kontrolle bei der Anforderung bestimmter Ressourcen ermöglicht. Einen nützlichen Anwendungsfall stellt unter anderem die frühe Beschaffung kritischer Ressourcen dar, deren Ausführung erst später erwartet wird.

HTTP/2 push erlaubt das Senden von Subressourcen, bevor diese von Client angefordert wurden. Die Zeit, in der das HTML „zusammengebaut“ wird, kann somit überbrückt und die Performance hierdurch verbessert werden. Cache-bare Ressourcen sollten jedoch nicht gepusht werden, da nicht alle Browser den Cache prüfen und den Push ggfs. unterbrechen. Die Verwendung von HTTP/2 push sollte daher nur in Verbindung mit einer sinnvollen Cache-Lösung stattfinden.

ANLEITUNG ZUR DIGITALEN TRANSFORMATION IM FRONTEND

Als Frontend Experten haben wir gerade in den letzten Monaten viele Unternehmen bei der digitalen Transformation begleitet und dabei unsere Expertise für Frontendprojekte ausgespielt.
Wir sind überzeugt, dass sich die Transformation am Kunden orientieren muss. Mit einer Modernisierung der digitalen Kundenschnittstellen lässt sich am meisten erreichen.

Wir möchten zeigen, dass die ersten Schritte zu einer erfolgreichen Transformation sich schneller und einfacher umsetzen lassen, als zunächst angenommen. Dazu haben wir in den letzten Wochen in Kooperation mit dem Branchenmedium “Mobilbranche” Tipps zur digitalen Transformation veröffentlicht.

Hier findet Ihr unseren Beitrag zur Transformation der Versicherungsbranche: http://mobilbranche.de/2016/08/digitale-transformation-versicherungen

und hier zur Transformation der Bankenbranche:
http://mobilbranche.de/2016/08/digitale-transformation-banken

Heute, als Startschuss zur DMEXCO, veröffentlichen wir unsere branchenunabhängige Anleitung zur digitalen Transformation im Frontend:
http://mobilbranche.de/2016/09/anleitung-digitale-transformation-frontend

Viel Spaß und viel Erfolg auf der DMEXCO!

Wir freuen uns auf Euren Besuch am Stand F025 in Halle 6!

FIT 14.5.1 – Web Accelerator vs Bigimage

This month’s release is mostly a “smoothing” release comprising a lot of bug fixes and smaller improvements, as well as 3rd party updates and security patches.

One of the most common errors that we have encountered in our log files was a complaint about source images being too large: … image area exceeds limit of 8 Mpixels. Of course, 8 million are a lot of pixels. But with the proliferation of high resolution cameras (in smartphones) and high density displays (also in smartphones), prepare to encounter large images in Web sites more frequently. However, the worst part of the error message was: Continue with original source. That means that of all things the largest images on your Web site are “too large to optimize”. The client has to load all these big files as they are. Even if those might be the outliers of your image files, a single large image with megabytes of data will outweigh every little byte saved by thoroughly optimizing everything else.

Acknowledging this problem, the Web Accelerator now supports sources images with up to 100 mega pixels. Image Scaling will drastically reduce the file size of large images by allowing optimizations such as format conversion or lossy compression. On our systems, we have seen savings of multiple mega bytes per image. To mitigate the operational costs of processing huge pixel arrays, images with more than 8 mega pixels are processed with an algorithm that is less precise but faster than our usual scaling method. Given so many pixels, there is no noticeable difference.

Don’t let the legendary Bigimage eat your bandwidth! Update today!

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

 

Grillen am Rheinufer – Beach Feeling op Kölsch

Volltreffer, unsere Kölner Kollegen haben das richtige Wetter erwischt: Bei herrlichem Sommerwetter ging es mit Kind und Kegel wieder einmal zu einem Grillabend ans Rheinufer. An unserem Stammplatz in Rodenkirchen genossen wir die Urlaubsatmosphäre am Strand und ließen bei einigen Kölsch die Woche entspannt ausklingen.

Grillen am Rhein2

Unsere Grillmeister heizten den Steaks ordentlich ein. Nachdem Bürohund Struppi die Fleischqualität bestätigt hatte, langten auch alle anderen ordentlich zu.


Struppi

Ein großer Dank geht an das Orga-Team für die Vorbereitung und Durchführung!

So darf einem der Sommer gerne in Erinnerung bleiben!

Trefft Sevenval auf der DMEXCO

Alle reden von der digitalen Transformation – wir bieten Euch die Überholspur.

Wie Ihr Eure Kundenschnittstelle – das Frontend – schnell modernisiert und zu Ergebnissen kommt, ist dieses Jahr unser Schwerpunktthema.

Wenn Ihr uns treffen wollt, schreibt bitte an dmexco@sevenval.com
und macht einen Terminvorschlag.
Je nach Branche meldet sich der richtige Experte bei Euch.

Wir sehen uns dann in Halle 6 am Stand F025 und laden Euch gerne zu einem
Frozen Yoghurt ein;-)

Schon mal viel Spaß und auf bald!

Meet us at DMEXCO to accelerate the digital transformation for your company.