How EverWeb Makes Your Website Faster...
Saturday, November 4, 2017 7:11 PM
It might be easy to look at EverWeb and think all we're doing is exporting what you see on your screen to HTML and CSS code. But, under the hood, we are doing A LOT more. In fact, for the past 5 years we have been actively improving our WebCode Conversion Engine™ which takes your design and makes it into an actual website.
The WebCode Conversion Engine™ first came to light with our WebCrusher website optimizer software that we used to sell to optimize and speedup any website. Now, we have incorporated the techniques into a more powerful, more sophisticated web code generator.
The WebCode Conversion Engine™ That Makes Your Website FAST!
When we released the first betas of EverWeb, about 4 years ago (WOW!), we included some important features to make your website load fast! In fact, we think we were ahead of our time. You see at the time, retina (high reoslution) screens were just becoming popular with the new Macbook Pros and iPhones.
Retina Image Optimizations
So we included the ability to automatically create high resolution retina images. But we went even further. We took care of the tedious task of making sure only retina screens would load those images because high resolution images can be double the size as regular images. We didn’t want your website loading more slowly if it didn’t have to.
At that time, the way to achieve this was new and had to be tested on all browsers and screen resolutions. Even today, many websites don’t bother with this optimization but with EverWeb, we do it automatically for you.
Intelligent Image Preloading
Next, we added a special preloading system which would preload images in the background before the user would see them. This was especially important for mouse over and mouse down effects for shapes and buttons to reduce flicker and improve the visual aspect of your website. It also worked will with the image gallery.
Automatic Image Optimization
We also included an automatic image optimization engine. At first, it worked for JPEG images but then we added built in and automatic support for PNG images as well. The PNG optimization tool was so good that you wouldn’t even see a difference in the image quality, but the file size was reduced from 20% - 55% depending on your image size.
All this happened automatically without any interaction from you, the user.
Did you know that most web developers don’t bother with these techniques because of how tedious they are with most website builders. We do it all for you!
WebCode Conversion Engine™ Progression
Since version 1 of EverWeb we have actively been improving the WebCode Conversion Engine™. For example, we started using CSS instead of images for many shapes when it was possible. The problem is that if you actually count the number of settings you can apply to a shape or text block in EverWeb there are literally thousands of combinations.
So not only do we have to figure out the combinations that can be optimized, we also have to make sure the changes actually work in all web browsers and as expected. Moreso, we can’t make a mistake and try an optimization where it wouldn’t work properly.
In EverWeb 1.7 we automatically combined CSS selectors so they are never duplicated, but reused when needed for text and shapes that are the same.
When using gradient fills, when possible, we tile your gradient pattern with a very tiny 2 pixel image instead of downloading the entire full sized gradient image. This goes for the inserted shapes, buttons and even browser background styles.
When we introduced Master Pages we started exporting common images and CSS in the same location so that your visitors’ web browsers can take advantage of browser caching making your site load significantly faster as a visitor navigates through your website.
In the EverWeb 2.x series we started incorporating actual HTML and CSS code optimizations on a high level. As mentioned above we took the techniques from WebCrusher and starting applying them to EverWeb’s generated code reducing website size, and speeding up your visitor's experience, by a minumum of 20%.
In EverWeb 2.3 we took the WebCode Conversion Engine™ and included many optimizations for different shapes, using CSS instead of an image when possible.
A Faster Website with EverWeb 2.6
In EverWeb 2.6, our next upcoming release, we have improved this even more! Here are just some of the improvements we have added, and all you have to do to take advantage of them is republish your website!
Most competing website builders that let you apply shadows to objects use the box-shadow css feature. This only works for rectanglur shaped images and won’t work for transparent PNGs. With EverWeb 2.6 we use the box-css technique only in this circumstances but will also use an actual true shadow effect for transparent images.
This makes your website significantly faster because there are no additional images needed to be downloaded but gives you more flexibility in your designs.
We also now optimize for round rectangular shapes with mouse over and mouse down effects so the mouse transitions happen instantly without having to connect to your server for additional image resources.
If you use background browser shadows those are optimized as well using CSS instead of images. They look nicer and load much faster than ever before.
What Else Does EverWeb Do for You?
Aside from the above optimizations we work really hard to implement technical features that usually take some kind of expertise, a lot of time to implement and are prone to errors.
- We automatically publish your website with NO FTP details if you have an EverWeb + Hosting account
- We automatically make your website secure (HTTPS) with the click of a checkbox with EverWeb + Hosting
- We can automatically set up your emails at the click of a button in your Mail client with EverWeb + Hosting
- Coming in EverWeb 2.6: Lightning Publish: Publish 50x faster to your EverWeb + Hosting or 5x faster to your own web hosting provider.