Front-End Optimization

Front-End Optimization (FEO) is a set of techniques or products that can be used to speed up websites.

Websites listing Front-End Optimization techniques often just list them and don't prioritise the techniques.

These are the key things you should do which are easy to implement

Images

As images represent approximately 50% of all data and requests on eCommerce websites, Elasticera can play an important part in a Front-End Optimisation strategy.

  • The Elasticera Image Transformation Service can significantly reduce the file size of the images.
  • The Elasticera Image Transformation Service reduces the time it takes to download images no matter where your customers are.
  • The Elasticera Image Transformation Service has an intelligent multi-tier caching architecture making repeat visits faster.

Gzip

Gzip compression is a feature of most web servers. You should enable gzip compression of, HTML, Javascript and CSS content.

Minification

Minification tools reduce the size of files by removing unnecessary comments, whitespace, etc. Minification tools typically minify Javascript and CSS content.

Concatenation

Concatenating or combining Javascript and CSS files into fewer files reduces the number of HTTP requests which improves performance.

CSS Sprites

CSS Sprites enable web developers to combine multiple images in a single image and use CSS to reference the images. This can significantly reduce the number of HTTP requests which improves performance.

Caching

Set HTTP cache headers, e.g. cache-control, so web browsers don't revisit the website to see if there is newer content. If you set a long expires then you should version the files.

General

In general

  • Reduce the number of HTTP requests
  • Reduce the number of libraries
  • Only load what you need and only when you need it
  • Serve static content from Cookieless domain so cookies not needlessly sent with every HTTP request