4 Easy Tips for Speeding Up Your Website Load Time


Site loading time getting you down? You could be losing potential clients by how your site does…or DOESN'T load for them. Here are some easy ways to ensure that your site is optimized and loads quickly for your site visitors.

[dropcap]1[/dropcap] NESTED STYLE GROUPS

In case you are unfamiliar with style groups in Showit, they are the little folders that contain all of your site's pages. The can be seen from the “Pages” tab on the left side of the program, and you can add additional ones as needed with the small folder icon with the plus sign on it at the bottom of the program.

Every Showit website has at least one style group, and most have more than one. Style groups are great for reducing page load times (not to mention design frustration!) because everything that resides within a style group layer (foreground or background), rather than a page layer is loaded only once despite being on several pages. This also means that you don't have to add the same thing to every page and go through the annoyance of trying to position it in the exact same place. Things like your logo, your menu, and any other elements shared by more than one page can be added to a style group.

Layers panel of the Polished Style Group showing foreground and page layers.

Layers panel of the Polished Style Group showing foreground and page layers.

If an element is shared by pages, try dropping it into a style group layer (in your layers panel) in the foreground or background layers, rather than having it site on the page.

Nested style group structure within the Polished style group.

Nested style group structure within the Polished style group.

Style groups can be “nested” within one another to further reduce load time. It's always a good idea to keep folders nested so that your site can stay one style group in case you need to export it or convert it over to a mobile site, it will all stay together. Nesting elements in a section, say galleries for example, can further reduce load times because every gallery page with shared elements (like a gallery submenu) will be added to all gallery pages contained within the galleries folder.

[dropcap]2[/dropcap] TRANSPARENT PNG IMAGES

A .png image is great to design with because you are able to place them over other layers without having a white background like a .jpg file would. Using a lot of large .png files, however, can slow down the loading time of your site. Unlike .jpg files, Showit does not compress .png files, making smaller versions of them for use in smaller image areas (see Tip #4!), but rather uses them at their full size all the time.

If your design calls for using .png files, just make sure you watch the pixel size of them, and try to not add a lot of large .png files. You can also try to reduce the size of the file (mb) using websites such as TinyPNG.

[dropcap]3[/dropcap] SITE AND PAGE LOADERS

While this isn't necessarily a tip to reduce load times per say, it is a tip to help you from losing clients who think your site might be broken or not loading at all. By using site loaders and page loaders, visitors to your site will know that more is coming, and in many cases have a countdown or timer that shows them how long it will be until the content loads.

Site loaders can be accessed through Site Settings in your main menu, and you can drop in an image, change the loader, or even drop in a custom flash image when your site initially loads.

Site Settings panel showing site loader settings.

Site Settings panel showing site loader settings.

While most people set a site loader, many don't set a page loader on their sites. This can be helpful especially if you have a lot of big images, etc. that need to load on your site.

Page loaders included within Showit's Media Library.

Page loaders included within Showit's Media Library.

Page loaders can be accessed by clicking on your style group folder and scrolling to the very bottom where it says “View Preload Layers.” You can then add a loader into every page in a specific style group, which will only show up between pages, rather than on a live page. This lets your site visitors know that the page is loading instead of them thinking that there isn't information on the page. This is especially helpful for people with slower internet, or those who live in more remote areas.

[dropcap]4[/dropcap] IMAGE SIZE

This tip is two-fold – sizing your images for use within Showit and then selecting the image size once in the program. First, starting with images that are saved specifically for web is key. In Photoshop, you can batch your images to be “Saved for Web” at about 80% (give or take) and they should retain a lot of their information, but be compressed just enough to help your loading time. As discussed before, Showit will use your original “Large” version image, create a smaller “Medium” version image, and then also create an even smaller “Thumbnail” version. Those sizes can actually be changed and adjusted as needed in Showit's Preferences panel.

Advanced panel "Image Size" dropdown.

Advanced panel “Image Size” dropdown.

Once your images are added into your galleries, you can actually select what size image the galleries will use. Showit defaults to “Auto,” but sometimes it can be more effective for load time to tell it which size of image to use. If an image area is on the cusp between Medium and Large for example, it is helpful if you specify to use the Medium size over the large size for your gallery, which will speed up the loading time.

This is especially key for mobile sites, where I ALWAYS set image size to “Medium” for a faster load time on all pages that have a gallery. Because mobile devices have such a small viewing area, this shouldn't ever cause an issue with viewing the images, but will greatly reduce your page's load time.

Have you implemented any of these tips into your own websites? Let us know in the comments!

Learn more about Showit

CHoose a design to Start with

Brand your business like nobody's business with the drag-and-drop website builder made for creatives like you.