Illustration showing text CSS rewrite and small graphics showing the squeezed binary code by two arrows.

Widget optimizations

This article will explore optimizations made to our widgets, including rewriting CSS code, dropping support for IE11, and making other adjustments. Your widgets will run faster and smoother than ever before.

CSS code rewrite

We rewrote most of the CSS code in our widgets. It resulted in a much smaller codebase. For instance, the basic 3×3 grid widget code before the changes had a size of 33.3kB. After the changes, the size is 24.7kb. This results in about 25% smaller widget size!

List of the removed classes

Below you will find the list of removed classes from our widgets. If you use them in the Custom CSS field, your code widget might not work as expected. Please adjust your custom CSS code and use different selectors if you use any classes below. 

.lightwidget__posts--click-event-none{}
.lightwidget__column--column-1{}
.lightwidget__column--column-2{}
.lightwidget__column--column-n{}
...
.lightwidget__column--column-10{}
.lightwidget__posts--columns-1{}
.lightwidget__posts--columns-2{}
.lightwidget__posts--columns-n{}
...
.lightwidget__posts--columns-10{}
.lightwidget__posts--hide-tiles{}
.lightwidget__posts--grid-1{}
.lightwidget__posts--grid-2{}
.lightwidget__posts--grid-n{}
...
.lightwidget__posts--grid-10{}

The fix should be easy since they are only BEM modifiers. The same elements still have .lightwidget__posts and .lightwidget__column classes, so that you can use these selectors in your Custom CSS code.

A partial drop in support for IE11

You might be surprised, but our widgets support Internet Explorer 11. IE 11 was released on October 17, 2013, making it an ancient browser without support for the new features.

For widgets to look the same on new browsers and IE11, many hacks are needed, which adds a lot of unnecessary code. After the rewrite, we removed many backward compatibility codes, which helped us reduce the widget’s overall size.

Most of the features will still work and the widgets in most cases should still look OK, but in some cases, they will not display like in other, modern browsers.

Most of the features will still work, and the widgets should still look OK, but in some cases, they will not display like in other modern browsers.
We plan to support IE11 until June 15, 2022. On that date, the support for IE11 will officially end by Microsoft.

Shortly after that, we plan to rewrite the widgets one more time and remove all JS polyfills that we use in our Instagram widgets, which will reduce the size of the plugin even more!

Comments (0)

You must be logged in to post comments.