Get Faster Loading Pages with Lazy Loading in EverWeb 4.1!

Thursday, April 18th, 2024
Lazy Loading for faster page loading in EverWeb 4.1

If you want to improve your website’s page loading times, EverWeb 4.1 is just for you! Our new release introduces two new features to EverWeb that will dramatically improve the time it takes for your site’s pages to load in a browser: Lazy Loading and WebP format support. We looked at the latter, WebP format, in a previous blog post, so now we turn our attention to the new Lazy Loading feature.

What Is Lazy Loading?

Usually when a web page loads in a browser, all of its content is loaded at that time. This can cause page loading times to become very slow, especially if you have a lot of large images on the page, or if your page uses other media content that takes time and resources to load. Slow loading pages can deter your visitors from remaining on the page until it loads. As such you increase the potential for visitors to click away from your site.

To solve this problem, lazy loading was developed as a way to help improve page loading times. Typically, lazy loading is usually applied to images on the page, but it is possible to apply lazy loading to other resource intensive content as well.

When a page that uses lazy loading is loaded, only the content that is necessary for the user to interact with is displayed. Any other content that is not displayed, or needed at the current time, will be loaded on demand as the visitor scrolls the page.

How To Use Lazy Loading in Your Site

In EverWeb 4.1, or higher, you can apply lazy loading to images on your pages. Simply select the image you want to lazy load, then go to the Shape Options tab and check the ‘Lazy Load Image’ checkbox. That is all that is required, so super easy!

Once you have check marked all of the images in your site’s pages that you want to lazy load, publish your website and see the difference it makes when your site loads in to a browser window.

The Benefits of Lazy Loading Images

There are a number of benefits gained by using lazy loading in your site:

  1. Faster Initial Page Load: By deferring the loading of non-essential elements, lazy loading reduces the initial page load time, allowing users to access the core content more quickly.
  2. Improved Performance: Lazy loading helps improve overall website performance by minimizing the amount of data transferred and reducing the server’s workload.
  3. Bandwidth Savings: Users may not view the entire page, so lazy loading helps save bandwidth by loading only the content that users actually interact with.
  4. Better User Experience: Users get a smoother experience as they navigate the page since the browser loads content progressively as needed, rather than waiting for all resources to load before displaying anything.

Lazy loading is especially beneficial for pages with a large amount of media content, such as image-heavy websites or pages with embedded videos. However, it may not be necessary, or suitable, to use it on every page of your site. As always, it is important to first think about the requirements of your website and your site’s visitors.

Other Ways to Improve Your Website’s Page Load Speeds

In addition to Lazy Loading images on your site’s pages, there are a number of other ways in which you can improve your page speed loading times:

  1. Use WebP Format when publishing your website. The size of the image will be reduced, but image quality should still be good.
  2. Other Image Optimization Techniques: Use image compression software to strip the image file of data that is not needed without losing image quality. You may also find benefit in reducing the image’s dimensions and additionally, you may benefit by changing the image file’s file format from e.g. PNG to JPEG.
  3. Minimize HTTP Requests: By reducing the number of elements on your web pages, such as images and any scripts or code you may have you can tweak your page load times.
  4. Enable Gzip Compression: If you are using EverWeb Site Shield Addon, Gzip compression is automatically enabled for you on the server side reducing the size of HTML, CSS, and JavaScript files before they are sent over the internet. This reduces bandwidth usage and speeds up loading times.
  5. Use less resources on your page. The simpler your page is in structure, the faster it will load.

Using a combination of readily available tools, in EverWeb itself, with EverWeb addons and external tools, you will easily be able to improve your page load speed times.

If you have any questions about page loading times, or about EverWeb in general, please let us know in the Comments Section below. We’re happy to help!

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Flipboard

YouTube

X

Instagram

NEW Video Backgrounds and Updated Page Backgrounds in EverWeb 4.1!

Thursday, March 14th, 2024

One of the most user requested features comes to EverWeb in our latest 4.1 release – Video Backgrounds! Find out all you need to know below! In addition, there are also some great updates to Image Fill for both Page and Browser Background options to enjoy!

To use the features described below, simply open your EverWeb project file, then go to the Page Settings tab in the Inspector Window.

NEW Video Background Feature Comes To EverWeb

If you are using EverWeb 4.1 or higher, you can now add a video background as a Browser Background. In the Browser Background section of the Page Settings tab, click on the dropdown menu to the right of the words ‘Browser Background’ then select Video if it is not already selected. You will see various options displayed. Start by choosing the video source from the dropdown menu. You have four options to choose from:

External Video URL

The External Video URL option allows you to easily link to videos from other sources such as YouTube or Vimeo. All you need to do is enter the URL of the video that you want to use in the box below the menu option.

Local Video File

If you choose the Local Video File option, you can choose a video for use as a background from your project file. Click on the ‘Choose… button then select the video you want to use from the Assets list.

YouTube Video

To use this option, first go in to YouTube then choose the video you want to use. Click on the video’s ‘Share’ button then click on the ‘Copy’ button which will copy the video’s URL to the Clipboard. In EverWeb, paste in the link in the box below the video type selection dropdown menu.

Note that you can also use the External Video URL menu option as well as it works in the same way.

Vimeo Video

The Vimeo video option also works in the same way as the External Video URL and YouTube options. Just select the video in Vimeo that you want to use, copy its shareable link then paste it in to the box below the video type selection dropdown menu.

Video Background Options

Once you have done this, you can set options to loop the video and fix the video in place on screen if you want. Additional options allow you to set the scrolling speed of the video, and whether the video can be played on tablet or mobile devices. There is also an option to add a thumbnail image to the video which is useful if you know that the video will take time to load prior to playing.

Video Background Q&A

Here are some useful hints and tips that may help you when using EverWeb’s Video Background feature:

  • When you set a video background, you will need to Preview, or Publish, your site to see it working. You will not see the video background in your project’s Editor window.
  • If you find that your video is obscured when previewed or published, it is probably because the Page Background is set to ‘Color Fill’ or ‘Image Fill’. Set the Page Background to ‘None’ if this is the case.
  • Be careful if you decide to use the Local Video File option as the video will be stored in your project file’s Assets List. This may make the project file very large (depending on the size of the video) and you may find it takes longer to publish your project file as well.
  • If you are using a large video file, test first before publishing. You may need, or want, to use a video Thumbnail image which can be displayed whilst the large video loads.

Improved Image Fill Features For Page & Browser Backgrounds

In addition to the introduction of Video Backgrounds to Browser Backgrounds, EverWeb 4.1 also sees improvements if you are using Image Fill option for your Browser Background. You can now set the image alignment both horizontally and vertically. Furthermore, you can also fix the image in place so that it does not scroll as you scroll the page.

If you are using the Page Background feature, you will see the same improvements with buttons available for you, to horizontally, or vertically align your image. as well as the ability to fix the position of the image.

Image Fill for Page Background also gains two new options with the introduction of Tile Vertical and Tile Horizontal to the existing Original Size, Stretch, Scale To Fit, Scale To Fill and Tile options. Just set the option you want using the dropdown menu to the right of the image thumbnail. For more flexibility you can also adjust the vertical and horizontal alignment as required.

Find Out More About EverWeb 4.1

The new Video and Page Background features are just two of the new features of EverWeb 4.1. Check out our What’s New in EverWeb 4.1 post to find out more about our new release!

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Flipboard

YouTube

X

Instagram

Why Use EverWeb’s New WebP Format? Everything You Need To Know!

Thursday, February 15th, 2024
Get better page loading speeds using WebP format in EverWeb 4.1.

In our latest EverWeb release, version 4.1, we have introduced support for WebP format which has the power to dramatically improve your page load times. In this post we take a deep dive explaining all that you need to know about the format, the advantages of using WebP in EverWeb, and some things that you may want to consider before publishing your site using WebP format…

What Is WebP Format?

WebP is a modern image format developed by Google, who first announced the format in 2010, but only released their first stable version of the format in 2018. The goal of the WebP format was to replace JPEG, PNG and GIF file formats with a new standard that provided better compression without loss of image quality. Using WebP format in your website, therefore, has a number of benefits…

What Are The Advantages of Using WebP Format in EverWeb?

Here are some of the key advantages of using WebP files on your website:

  1. Smaller File Sizes: WebP typically offers better compression compared to other image formats such as JPEG and PNG. The result is smaller file sizes which is important for faster page loading times, especially for image based websites, such as photography websites.
  2. Faster Loading Times: As WebP files are smaller than other image file formats, so typically downloaded quicker, resulting in faster page loading times. This benefits both the website’s visitor and the website’s Search Engine Optimization (SEO), where page speed is factored in to the website’s search rankings.
  3. Better Bandwidth Usage: Smaller file sizes help reduce bandwidth usage for both the server and end-user. This can benefit users with limited data plans or slow internet connections.
  4. Lossless and Lossy Compression: WebP supports both lossless and lossy file compression, so images can retain their quality whilst benefitting from smaller file sizes.
  5. Alpha Channel Support: WebP supports transparency (alpha channel), similar to PNG, allowing you to create images with a transparent background. This can be useful for overlaying images on different backgrounds without a visible border.
  6. Animation Support: WebP supports animated images, making it a suitable replacement for GIFs. Animated WebP files typically have smaller file sizes than equivalent GIFs, again resulting in faster loading times for web animations.
  7. Wide Browser Support: Most modern browsers support WebP, including Google Chrome, Firefox, Safari, Microsoft Edge and Opera. Note that older browsers may have limited or no support for WebP format.
  8. Google’s Preference: Google actively promotes the use of WebP so using their file format standard may benefit your site’s search engine ranking.

What Should You Be Aware Of When Using WebP Format

While there are clear advantages to using WebP, it is important to consider browser compatibility. Fortunately EverWeb does this for you. If the browser your visitor is using does not support WebP format. an alternative image format will be used instead.

Below is a list of some of the things you might want to consider when thinking about using the WebP format in your website:

  1. Limited Browser Support: Although support for WebP has grown, it may not be supported by all browsers, especially older ones.
  2. Fallback Requirement: Due to varying browser support, alternative image files (e.g., JPEG or PNG) should be available for browsers that do not support WebP. EverWeb takes care of this requirement for you so you do not have to do anything.
  3. Compression Artefacts: WebP’s compression may result in noticeable artefacts, especially in highly detailed images. EverWeb will process and optimizes images to avoid this from happening.

How To Use WebP Format In Your EverWeb Made Website

If you decide to use WebP format in your EverWeb website, it is easy to implement. Simply go to the EverWeb -> Edit Publishing Settings screen if you are using macOS, or the File-> Edit Publishing Settings screen if you are using Windows. Check the box “Export Optimized Images”. This will be in either the EverWeb Location, Folder Location or FTP Server Details section of the screen. Publish your site and WebP support will be included automatically.

WebP Format and Lazy Loading for the Best Page Loading Speeds

WebP format is a great addition to EverWeb. This feature can be also used in conjunction with EverWeb 4.1’s new Lazy Loading feature for even faster page loading speeds. We will be looking at Lazy Loading in a future blog post!

If you have any comments or questions about the new WebP format feature, or about anything else EverWeb related, please let us know in the Comments Section below.

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Flipboard

YouTube

Twitter / X

Instagram

NEW In EverWeb 4.1: Lazy Loading, WebP Support, Draft Page Mode and More!

Thursday, January 25th, 2024

We’re excited to announce the release of EverWeb 4.1! Our latest release includes WebP support for images so that your pages load faster than ever in browser windows! Plus new draft mode, lazy loading images, Video backgrounds for your browser background and much more! See below for full details!

Which Version of EverWeb is for You?

EverWeb is available in the following versions:

  • If you are running Microsoft Windows 10 or 11, EverWeb 4.1 is available for you.
  • If you are running an Intel Mac running macOS High Sierra, Mojave, Catalina, Big Sur, Monterey, Ventura or Sonoma, EverWeb version 4.1 is available for you.
  • If you are running an Apple Silicon Mac running macOS Ventura, Monterey, Big Sur or Sonoma, EverWeb version 4.1 is available for you as a Universal Binary. EverWeb will run natively without the need to use Rosetta 2.
  • If you are running OS X 10.10 – macOS 10.12 (OS X Yosemite, OS X El Capitan, macOS Sierra) EverWeb 3.4.2 is for you.
  • If you are running OS X 10.7 – 10.9 (Lion, Mountain Lion, Mavericks) EverWeb version 2.9.1 is available for you.

When updating to the latest version of EverWeb, the update process will automatically download the correct version of EverWeb for your operating system.

EverWeb 4.1 Includes…

[NEW] Lazy Loading images – Your images load only when they are actually needed.

[NEW] Video Browser Backgrounds from four different sources, such as YouTube and Vimeo.

[NEW} WebP images supported with automatic image optimization to WebP format with correct resizing

[NEW] Draft Mode. Pages set to draft will not be published.

[NEW] Alt Text is now available for images in the Image Gallery Widget.

[NEW] Alt Text is now available for images in the Responsive Image Gallery Widget.

[NEW} Import images from CSV file to bulk load images in to the Responsive Image Gallery Widget.

[NEW[ Tile Vertically or Tile Horizontally for images used as Page Background.

[NEW] Image Scaling available for images used as Browser Background.

[NEW] Fixed Position for images used as Page and Browser Background.

[NEW] Image alignment options for Page and Browser Background.

[NEW] Check Page updated to include new optimization suggestions.

[IMPROVED] Improved export of high-resolution images without relying on java script.

[IMPROVED] Code optimized for better W3C compliance.

[CHANGE] Updated Twitter widget to become the ‘X’ widget.

[CHANGE] Replaced the Twitter button with an ‘X’ button.

[CHANGE] The Google+ Button has been removed from the Insert-> Button menu.

[FIX] Blank Contact Forms Enhanced Addon field in Contact Form Advanced widget.

[FIX] Simple Passwords not being carried over has been fixed.

[FIX] Color settings issue in the responsive navigation bar fixed.

[FIX] Redefined styles from selection bug fixes.

[FIX] Full-width shapes exporting issue resolved.

[FIX] ‘Microsoft Edge Can’t read and write to directory’ Error for some users on Windows fixed

[FIX] Possible crash when using some widgets on ARM based Macs

[FIX] The URL field is properly changed to HTTPS when pressing the Use Secure HTTPS Urls option

[FIX] Fixed a crash when dragging from the Stock Photos on Windows

[FIX] Fixed ‘500 error’ on Preview

[FIX] Fixed crash when double clicking on a blank row in Manage Cache Window

[FIX] Fixed a potential crash on backup

[FIX] Some minor issues with SEO Check Page Fixed

[FIX] Many Improvements and bug fixes for EverWeb for Windows Users

[FIX] Fixes for the Stripe Payments widget

[FIX] Some Issues with Search fields fixed.

How To Update To EverWeb 4.1 for Windows

You can easily update EverWeb for Windows by either:

  1. Launching EverWeb then opening a project file. From the Help menu at the top of the screen select ‘Check for Update’ or by
  2. Downloading EverWeb from the EverWeb website.

After downloading EverWeb, double click on the EverWebSetup.exe file. Note that the file name may have the version number appended to it and that you may need to initially trust the file to be able to download it.

Follow the instructions in the Installation Wizard until the installation is finished. You can delete the EverWebSetup.exe file afterwards by dragging it to the Recycle Bin.

How To Update To EverWeb 4.1 for macOS

You can easily update EverWeb for macOS by either:

  1. Launching EverWeb then going to the EverWeb menu at the top of the screen and selecting ‘Check for Update’ or by
  2. Downloading EverWeb from the EverWeb website.

After downloading EverWeb, double click on the EVERWEB.DMG file. A window will open. Drag the EverWeb icon on to the Applications folder icon.

Once the file has been copied, you can close the installation window, delete the .DMG file and eject the EverWeb disk on the desktop by dragging it to the Trashcan.

About Your EverWeb Update

Remember, you won’t lose any previous data when updating as your website project files are stored elsewhere on your computer.

The update is free for EverWeb + Hosting users and EverWeb Standalone users who are within their 1 year of free upgrades and support period.

You can easily check your EverWeb update period from your EverWeb-> Preferences… window on macOS, from your Edit-> Options menu on Windows, or from your client area.

If you have passed your one year of free EverWeb updates, you can purchase 1 more year of upgrades and support from your client area.

You can easily re-download earlier versions of EverWeb from your client area if you are not ready to purchase an additional year of updates and support.

Login to your Client Area and go to the ‘Manage Product’ page. On the left of this page, select ‘Downloads’ and choose the version of EverWeb that you need.

More Information About EverWeb

For more information about the new version of EverWeb, please check out the following resources:

  • The EverWeb website which has up to the moment information in its blogging section.
  • New EverWeb videos on YouTube.
  • The EverWeb User Manual in EverWeb’s Help-> User Manual menu.
  • The EverWeb Discussion Forum.

If you can’t find what you need, or have any other questions, comments or feedback please let us know.

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Flipboard

YouTube

X

Instagram