People have no patience for websites with poor load speeds or inadequate performance.  Simply put, when people go to your website, you are selling them something: products, services or ideas.  The first currency they have with you is their time and attention.  Time is money and attention is a commodity.  If your visitors have to wait for your website to load their attention will drift or they will think your site is a waste of time.

In a recent study done by Akamai, 47% of consumers expect a web page to load in 2 seconds or less, and 40% of people abandon a website that takes more than 3 seconds to load.  It's a race to the bottom, faster download gives you a chance to actually perform your website's mission.  That same study revealed that a 1 second delay in page response can result in a 7% reduction in conversions (A.K.A. sales).

Alas, there is a way to escape this conundrum: speed up your website.  The following are ways to improve your website's speed.

Optimize all images

Each element of your website has a file size.  I usually call it how much it weights.  The more it weights the longer it will take to load. 

Images are an important component of any website. After all people respond quicker to an image than to text (text content is still very important though).  Thus, they need to download quickly.  Optimizing images means taking any image and rethinking it.  There a various factors to take into consideration: file size, file type, vector vs bitmap and icon fonts.

Images come in 2 varieties bitmaps or vectors. A vector image uses geometrical formulas to represent images. Bitmaps are formed with patterns of dots or pixels.  The more pixels an image has the more dimensions it has and the bigger the file size could be.

File size

Image quality and file size are a tradeoff.  The higher the quality (crispness or sharpness of the image) the higher the file size.  Sharpness is an evaluation of how well the detail in the image is recorded while crispness is about how well that detail is conveyed to the viewer. A crisp image will be sharp (mostly, that is, where sharpness counts), but it will also necessarily have a degree of contrast (at several levels) that allows the viewer to notice that it's sharp.

In order to have the right file size for your image you have to set up the quality of the image to the point where it best represents what you want to display.  For example a thumbnail image of a product does not need to be 1mb or 100kb.  The larger version of the image could be bigger, but that depends on the case.

Image Type

This first tip works well when using JPEGS. Jpeg images are images that have the jpg or jpeg file extension.  For example image1.jpg.  Jpegs are a compressed or lossy bitmap format.  In jpegs the quality and the dimensions play a role in the file size.  Since jpegs are compressed each time they are opened in an editor and recompressed they loose quality.  However jpegs are very popular because they, when properly exported, can have good image quality and a reasonable file size.

JPEG means Joint Photographic Experts Group (the folks that created the format)

Aside from Jpegs there are other web-compatible image formats such as PNGs and GIFs.  GIFs (Graphics Interchange Format) are images that have 3 main characteristics: they can be animated, can have transparent areas and support up to 256 different colors per image.  The number of colors and the dimensions affect the file size.  Naturally if the image is animated its number of frames will increase file size. Since GIFs only support up to 256 colors they are not very good for photographs (unlike JPGS which do).  GIFs are better suited for instances where transparency or pixel sharp images are necessary.   

PNGs or Portable Network Graphics are a lossless image format.  This means that no compression is available.  PNGs come in 2 flavors: PNG-8 or PNG-24.  PNG-8 (8 bit), like GIFs, only support 256 colors per image and transparent pixels.  PNG-24 (24 bits) support millions of colors (like Jpegs) and transparent pixels.  A third variant is PNG-32 which is essentially a PNG-24 with 8 extra bits for translucency (partial transparency).  PNG-24 and 32 produce larger file sizes.  Photoshop exports PNG-8 and PNG-32 (labeled as 24).

So which image type should I use?

That depends on the case scenario. PNGs are many times used for logos because they are high quality, and can handle transparency. This works well for logos because logo's nearly always require transparency, you likely want it to be high quality, and because logos are a small part of your site overall so the file size is still small.

Today, GIFs are mostly used for their animation, as a replacement for video.  For small details, PNGs are preferred (for their image quality) or Icon Fonts. 

JPEGs are better suited for photographs or complex images.

Then there are vector graphics...

The most common vector graphics format is SVG (Scalable Vector Graphics).  Vectors use geometric formulas to create images.  For example, an image of a square with a circle inside. 

In an SVG file the contents of the file may tell the browser "black square with 10px red border and blue circle in the middle with 5px yellow border".  The same image as a bitmap would have dots in a map patterned as "black square with 10px red border and blue circle in the middle with 5px yellow border" in preset dimensions (for example 400px by 400px).  If you display the bitmap as 400x400 it would be as sharp and crisp as the image quality of the format allows.  If you were to zoom in or display the image larger than its preset dimensions, it would quickly loose image quality as there are there are only a preset number of pixels inside the image (160,000) including the white or transparent ones of the background. 

On the other hand a vector image such a SVG could be enlarged irrespective of its original file size as a square is a square regardless of its size.  SVG File size depends on paths and points.  When the number of paths and anchor points increase, the mathematical information to store them also increases! In these cases a bitmapped version of the file can be more suited for a lesser file size.

Add cache to your website

Cache (pronounced CASH) is a method of storing data that is going to be accessed again.  This data is stored to shorten data access time (speed).  For example web browsers such as Chrome, Safari, Firefox and Edge use 'browser cache” to improve speed while navigating into and inside a website.  Essentially they store locally (in the hard drive) parts of the website such as logos, images, CSS and js files and html content.  If you go from one page to another it wouldn't make sense downloading the logo and the CSS again and again.  The web browser uses the same stored data and only downloads new information.  This type of cache depends on the web browser.

Another type of cache is application cache.  Application cache works by storing the processed results from a program so that if the same information is to be produced by an application (such as a web app).

Browser cache can actually be controlled (or specified) by the website via .htaccess file.  In Apache servers you can use the .htacess file to modify a lot of the website's behavior.  From the default page (index.html vs index.php vs home.html), 404 error pages to cache.

The basic layout of the cache code is:

The htaccess file will tell the browser the preferred method of caching the webpage.  The lines with the number signs # # are comments (notes to explain what this is and where it begins and ends).  Then you have a condition 'IfModule mod_expires.c”  meaning if mod_expires is available.  Then you activate the module with 'ExpiresActive On”.

ExpiresByType tells the browser that jpgs, gifs, and pngs have an expiration date of one year.  In the above case it's the same for css, js pdfs and icons.  ExpiresDefault defines the default expiration for everything else. 

The user can override the cache by refreshing the page.  You can override the cache by linking dynamic pages (such as your blog) using an ever changing parameter in the link.  For example if your blog changes every day, links to your blog could contain a dynamic parameter such as the date that changes every day.  Naturally that would require some programing on your part.

Minimize HTTP requests

When a user visits your website, the first thing that happens is an http request for the html of the requested page.  Once the html downloads, the browser starts processing or parsing it for a couple of things: how to display it and what else to download.  Each image, css file, and js file are then requested and downloaded.  If the css files references another file, such as a background picture, it will then start another http request.  Same thing goes for the JavaScript files.

Combining CSS & JS

One way to minimize http requests is to combine your files.  CSS files can be cumulatively combined.  Take two files, place the content of the first inside the second, reference only the second one.

JavaScript is the same but you should be mindful of the order in which you merge the files into one.  Join them in the order they're normally included in the page.

CSS Sprites

Essentially place all your images in one larger image (this works best with small icons) then use the CSS background-image property to display the section of the larger image that contains the smaller one.  Instead of making 20 requests to the server for 20 images in tags, there is only 2 requests, the css file defining the sprite and the larger image.  The CSS file was going to be included anyway for the rest of the design, so its only one net new request or 19 less requests.  Plus, since everything is defined in the css file, making changes only requires changing the css file.

Caching

Caching will also reduce http requests since the web browser is storing a cache of the requested file.

We will soon add more ways to speed up your website.