Nothing is worse than a slow loading website. Today's web users have short attention spans, and they will abandon pages and websites that load too slowly.

While network speeds are continually improving thanks to newer technologies like fiber optic connections and 4G LTE, speed has always been an important factor in determining website enjoyment. Mobile access of web content is rapidly increasing and despite network improvements, accessing via a mobile device like a phone or tablet can often be hit or miss affair.

Google prefers pages that load quickly - and provides a "Page Speed Insights" tool that gives helpful suggestions on ways to improve page speed.

Here are some tips from Pallasart to speed up the loading of your website:

Tip #1 - Minimize and Optimize Your Image Files

Generally visual assets like photos or videos can use a lot of bandwidth and take longer to download than text based assets like HTML files.

JPEG photos use compression to minimize file size. Because JPEG compression is "lossy" increasing the amount of compression also lowers the photo's quality and introduces "noise" or blockiness into the photos if you look very closely. That said, photos generally compress extremely well, and one must try to balance the quality level with the size of the photo output. Often the noise introduced by compression is relatively minor. Tools like Adobe Photoshop allow users to "save for web" and preview the outputs at various quality levels.

A handy tool to minimize filesize while maintaining quality is TinyJPG

Note that graphical logos or banners containing text on them usually don't look good as JPEG files, as the compression artifacts becomes noticeable around curved graphical elements.

Where possible, graphical elements should be saved as SVG files - which can easily be scaled to any size while maintaining quality.

Other good options for logos or photos containing text would be as PNG files. PNG files use lossless compression - and thus maintain quality without noisy artifacts. Another advantage for PNG files over JPEG files is that they can have transparent elements. The only downside for saving as a PNG file - is that PNG files produced are often much larger than those saved as JPEG. TinyPNG is a great tool for minimizing PNG filesizes.

Logos and graphics with text can also be saved as GIF files, provided they have 256 colors or less.

Tip #2 - Use CSS Sprites

If your website has a bunch of small graphical elements like buttons or icons, you can make your website load quicker by creating a CSS Sprite.

An image sprite is a collection of images put into a single image, and then CSS is used to show only the potion of the image that contains that button or icon.

It speeds up website loading, because each HTTP request has a certain amount of overhead or handshaking time necessary to negotiate the connection to request a a specific file from the server. Servers often have limits on the number of concurrent requests that can be made. Thus, if you have say 20 little images necessary to render a page, it maybe much quicker to request 1 large image that includes all the little images, than it takes to request 20 little images separately -- even if the filesize of the larger image maybe slightly larger than the sum of the filesizes of all the little images.

This technique can be of particular importance on a highly trafficked website with lots of server HTTP connection requests to deal with.

Tip #3 - Utilize Browser Caching of Content

If your website has common elements used on numerous pages, caching can be useful since if the file already exists in the browser's cache, the browser does not have to request the file/asset again. Thus CSS style sheets and images may only need to be download once. The fewer files that must be requested and downloaded from the server, the faster the web page loads.

Learn How to Leverage Browser Caching

Best practices for caching include setting up appropriate "Cache-Control" headers for your content, and sending ETag tokens,

Remember that if your website utilizes caching, and you an in the development process of making frequent updates to your website files (particularly JavaScript and CSS files) - you may need to manually clear your browser's cache of temporary internet files or super reload the page (by holding down SHIFT key while reloading the page in the browser) to see the most recent changes to your website.

Tip #4 - Enable GZIP Compression

Compressing HTML, CSS, and JavaScript files can substantially reduce the filesize of these text based files. The GZIP compression must be turned on at the server level - but most servers should have this capability. If you are using an Apache server, you can usually control this via .htaccess file settings assuming your web hosting company allows you to edit and update that file.

Useful information enabling GZIP compression and how to optimize your site with gzip compression.

Tip #5 - Minify Resources

Minifying your HTML, CSS, and JavaScript files before you even load them on the server will help speed up the delivery of such files by removing extra spaces, comments, formatting, and ultimately optimizing the code for optimal speedy delivery without effecting the functionality of the code.

This article provides links to various online tools and resources that will help you minify your files

Important note -  The "minify process" may strip your code of the formatting or comments that would allow a future web developer to make changes to your website - so you should always keep a copy of your original source files.

Tip #6 - Use HTML5 to Eliminate Plugins

Prior to HTML5, video and sound files were often delivered via 3rd party plugins like Flash, Silverlight, or Java. These plugins were not native to the browsers, often caused crashes or hangs, and sometimes were exploited via unpatched security holes. Additionally, mobile browsers did not support these plugins.

 Video and sound can now be delivered via HTML5 tags in most modern browsers.

Tip #7 - Use a Content Delivery Network (CDN)

A content delivery network - or CDN - is a large network of computers where content is stored at various locations throughout the world. When a file or resource is requested from the CDN by an end-user (website visitor), the closest or optimal content delivery server to the  geographic location of the end-user will deliver the file to that user.

Ultimately the goal is to deliver the content via the most available and quickest route to the end-user.

Content delivery networks like those provided by Amazon CloudFront or Akamai

CDNs can be especially useful to enterprise level websites with high volume of traffic requesting media files.

Need help optimizing and speeding up your website? Contact Pallasart at 512-469-7454 and let's discuss your website project today!