Speed Up Your Website with Optimization

Looks are not the only important feature of a website, it is important to consider what’s running in the back-end as well. Many times the most visually pleasing and interactive websites cause the most user frustration; the more images and animations there are, the slower the website loads.  Optimization is pertinent for top tier websites and applications that AVIBE develops. One of our clients has a web application that is specifically tailored to all of their unique business needs. This application is where they manage all of their daily workflow, and their customers use the website to login and manage their accounts. The application is so robust that it had to be optimized to ensure a quick load time for front-end users on all devices and network speeds; as well as have the ability to run large queries or reports from their interconnected Back Office. There are many tricks to improve the load time of a website and application, here are some of the options available and utilized by the AVIBE team that proved successful.

Render Blocking

Render blocking is what occurs when a browser loads a static asset (external resources like fonts or scripts from other websites) before loading the content.  Loading static assets first causes a delay for users receiving content on the page, what they are actually looking for. Render blocking is most apparent with JavaScript files. Typically, JavaScript files are coded into the header tag of an HTML file; this is above the body tag where the visual content for a website is housed. Browsers read code like a person reads a book, from the top to the bottom. To avoid the delay in content generation, there are two options for developers:

Load Scripts at the End

Loading the JavaScript file right before the closing body tag, </body>, allows users to access content much faster. The drawback to this option is default fonts, or JavaScript files used to control page functions; full content will not display until the page loads, which can cause a visual flash, or change, after the script fully loads. For example, if a website’s default font is Arial and the content is in Futura, the Arial font will display first which can break the layout of the site until the correct font loads; this is the same scenario when loading scripts.

Load Scripts Asynchronously

Loading the JavaScript file asynchronously requests the file and then lets the browser continue to load the content in the body tag by appending async within the script. This option is good, but may cause problems with the interdependence of the JavaScript files. Some scripts are dependent on one another, and the site may break if one takes longer than the other to load. Developers should not deploy this optimization method if scripts are interdependent.

Depending on how websites and applications are built, and how complex a page needs to be, developers can choose one or both of the above options that work best for the site’s architecture.

Typography

Web fonts that are linked from other websites such as Google or TypeKit can cause unnecessary performance issues for load times. When a True Type Face (TTF) file is loaded, it usually includes different styling options, such as thin, medium, bold, italics, etc. and every character set within that font; some of which will never be seen by the public. There are a few methods to improving web font performance:

• Reduce the number of fonts used; stick with one whenever possible and use default fonts to compliment it
• Reduce the use of numerous font weights and styles throughout the site wherever possible
• Deploy Dynamic Subsetting; only rendering characters needed on the page to decrease the font file size
• Utilize GZIP; a server configuration that compresses text assets and speed up load time

The tips and tools for saving bandwidth and improving loading time were very helpful when we were optimizing our client’s web application. Their website is very content heavy and is comprised of ~200 pages of text rich content. We applied all of these techniques to our client’s web application and greatly improved the load time of each page. While these techniques were very helpful, there is always room for improvement, so we continued optimizing.

Minification

Minification is the process of removing unnecessary characters, white space, comments, etc. from JavaScript or CSS files without changing the file’s functionality – very cool! Minification can be done through a Gulp script; or through many other programs depending on your coding language. While this may not make a huge file size savings, making numerous small changes can add up to a big difference.

Tip: Don't minify your files until you are ready to push to a production environment, and always make a copy of your working files to easily make changes in the future.

Image Optimization

Optimizing the file sizes of scripts can be very beneficial in reducing load times, but there are other, more obvious improvements that can be made. Images are what makes a website or application visually pleasing, but the larger the image and the higher the image quality, the longer it will take for the page to load. Our client’s web application is very visual and includes a slideshow on the home page as well as large photos throughout the website. We had to apply some tricks to optimize their images to reduce the loading time. Here are some resources that AVIBE utilized:

TINY PNG

Tiny PNG is a free tool for shrinking PNG and JPG files, allowing for up to 500 free image compressions per month. This tool utilizes compression without losing the original image quality. When testing our client’s homepage banner image using this method, we were able to reduce a JPG image size from 636 KB to 143 KB.  AVIBE was more successful at reducing the image size using JPEGmini than Tiny PNG, but it is very useful for PNGs that do not usually allow for compression through programs like Photoshop.

Designer Savvy

Thankfully, we have some very talented designers here at AVIBE that have done a lot of homework when it comes to compression. One of the hardest places to optimize is large banner slideshows because of the amount of photos needed to be loaded. The slideshow image we were optimizing had part of the image covered by another graphic, so we were able to flatten out the colors used in the overlapping portion of the image. Having areas of the picture with solid, flat color, helped us achieve a much smaller file size because it required less colors to be saved to the file. We compressed the image in Photoshop, and then used the programs mentioned above to reduce file size even further.

Pro Tip: Having many tools under your ‘belt’ to reduce image file size is always the best approach. Sometimes it will take some experimenting to know what will work best, but the time spent will be well worth it in the end.

External Tools

There are many trusted websites that can analyze your website and report on where your website needs work. Two are listed below that we use before launching our websites:

Google PageSpeed Insights

Google PageSpeed is a great resource for developers to test the load time for scripts, images, and other items. We have recommended it numorous times in our articles. When you enter the website domain that you want to test, Google PageSpeed lists what images can be further optimized and it provides you with a zipped file of the newly optimized images – very convenient! Google even looks at the page loading speeds when considering ranking, so having an optimized site looks good to Google. Utilizing page speed compression and some other image adjustments by our designers, we were able to take our client’s homepage banner image from 636 KB to about 80 KB; the best results yet!

WebPageTest.org

Another resource for content breakdown and a list of various metrics is WebPageTest.org. Using this website you can see a nice pie chart that lists all components of the website. The pie chart shows where the files are the heaviest and clearly states what areas need improvement. They even have videos and slideshows to easily see how, and at what second intervals, your website is loading.

Results

AVIBE applied numerous tests and resources to our client’s web application optimization process to achieve some great results. By deploying a combination of the optimization tricks listed above, we were able to reduce the number of bytes for the first, initial homepage view on the website by half! These techniques and resources are proven effective when optimizing websites and can help decrease your website’s loading time. Run your website domain through Google’s PageSpeed test and see where your website can be optimized!