FEO focuses on reducing file sizes and minimizing the number of requests needed for a given page to load.
Perceived load time is considered because its impact on the overall user experience, while the actual load time is often used as a performance benchmark metric.
Front end delays comprise up to 80% of your website response time.
Time To Frist Byte (TTFB)
- From an actual load time perspective: is the duration it takes for the browser to parse the first byte after downloading the HTML file.
- From a perceived load time perspective: is the duration it takes for the browser to parse the first byte after downloading the HTML file
Only perceived TTFB impacts user experience.
Improve website responsiveness
Reducing HTTP requests
When loading a web page, a browser has to open a separate TCP connection for each HTTP request made, which is equal to the amount of page elements it’s required to download.
The problem is that there is a limit to the number of concurrent connections a browser can open to a single host. This limit exists to protect a server from being overloaded with a high number of HTTP requests.
As the maximum connection threshold is quickly reached, various FEO techniques are employed to minimize the number of individual page elements. One of the most common is resource consolidation—the practice of bundling together multiple smaller files.
File compression
gzip is the most popular file compression choice. It can shrink a code file by as much as 60 or even 80 percent.
Cache Optimization
HTTP cache headers play an important role in the way browsers parse a website, for they determine which content items are cached and for how long.
Caching is storing your static files, which tend to be your largest ones, outside of your server—either on visitors’ local drives or a nearby CDN PoP. This can vastly improve the website’s load speed.
Code Minification
Minification trims code to its barest essentials, often reducing it by half before compression.
CDNs have the capacity to completely automate code minification. As an on-edge service, already serving much of a site’s content, it’s very easy for CDNs to minify all JavaScript, HTML and CSS files on-the-fly, as they’re being sent to visitors’ browsers.
Gzip AND Minify: While minifying and gzipping code may seem redundant, combining both methods offers the best results.
Image Optimzation
Caching and compression are the two most common image optimization methods, with caching being the more effective of the two. This is because, unlike code files, all image formats are already compressed.
Another image optimization technique is to replace some of your regular (raster) images with their vector counterparts.
You should use vector images whenever you can.
Performance auditing tools:
- Lighthouse
- Chrome DevTools Network Panel: load timings; resource sizes and number of requests for HTML, CSS, JavaScript, images, fonts and other files.
- Chrome Task Manager: if your site constantly uses significant CPU or more memory than other apps then you may need to fix memory leaks, task running or resource loading problems. Make sure to test your site on devices representative of your users.
- WebPagetest: performance for different locations and connection types, caching, time to first byte, CDN usage.
- Pagespeed Insights: load performance, data cost and resource usage, including Chrome User Experience report data highlighting real-world performance statistics.
What should be investigate:
- HTTPS: every site should deliver all assets over HTTPS.
- Server settings: your web server or CDN should use compression correctly, use HTTP/2, and include appropriate headers to enable your browser to cache resources.
- Script elements that can be moved to the bottom of the page and/or given an async or defer attribute.
- JavaScript and libraries that can be removed.
- Unused CSS and unused JavaScript.
- Images that can be saved with higher compression or smaller pixel dimensions.
- Image files that would be smaller saved using a different format, for example photos saved as PNGs.