After you’ve read about Why Should We Care about Website Performance? I’ve come up with a list of potential optimizations:
- Cleanup Code
Remove comments, remove unnecessary HTML, JS and CSS.
- Combine and Minify Assets (JS and CSS)
Combine the JS files and libraries into one JS file and minify. The same for CSS to reduce number of requests.
- Load CSS on the <head> and JS just before </body>
Loading CSS first, prevents additional repaints and reflows, and will make the page look much better from the beginning and JS in the end to allow for the page to be rendered without being blocked while loading the scripts.
- Try to load scripts as asynchronous
This way, the page rendering won’t be blocked and triggers the Document loaded event (e.g., $(document).ready()), much sooner. All social media plugins and analytics should be loaded asynchronously.
- Make use of sprites whenever possible
This way we avoid excessive number of requests. Each request has costs from DNS Lookup, SSL negotiation, content download. If the image is small enough, the cost of DNS and SSL is higher than the asset itself.
- Cache
Make an effective use of cache. Enable caching for assets, DB queries, templates / pre-render templates, but also implement Cache Busters to allow invalidating the cache when the assets are updated. One preferred URL fingerprint is /assets/9833e4/css/style.css, as some of the other solutions might have problems with proxies and CDNs (e.g., some CDNs ignore the query string parameters).
- Download assets from cookieless domains
It may save a lot of time, since the cookies are sent for every request and may be as much as 4Kb of overhead per request.
- Download assets from multiple subdomains / CDNs
e.g., static.domain.com, static1.domain.com, etc, as browsers usually have a limit on how many concurrent connections they establish with each domain, which means, the first set of assets, needs to be downloaded before starting new connections.
- Consider using Google CDN for common libraries
Google CDN is usually very fast, and physically close to the client. And the client might already have the asset cached.
- Enable Compression
Enabling compression (e.g. GZIP) to make the file size much smaller to download. With jQuery ou can get a gain of 88% when compared to the original size – jQuery (273K), Minified (90k), Compressed (32K).
- Remove inline scripts and styles
Move them into files to make them cacheable. *Depending on each specific case.
- Serve adequately sized images
If we only need a 50x50px image, just serve that image. Don’t rely on the browser to resize, as it will still download the full size image.
- Optimize images
Remove unnecessary data from images (strip irrelevant information), compress, and if it is a JPEG, make use of the progressive version, as this will make the image start appearing sooner.
- Prevent excessive redirects
Each redirect costs time, so avoid unnecessary redirections.
- Consider using Nginx for serving static content
Nginx is very fast and optimized to serve static content.
- Consider using techniques like lazy loading
If the content is not important for SEO or another reason, consider triggering the load, only after the page is served.
- Consider hosting images, web server and database server in a different machines
This reduces the load on each server, which translates in faster response times.