After putting some energy into optimizing my websites receipts-app.com, pdfify.app and holtwick.de I’d like to share my experiences/.
Defer Scripts
Putting defer into script loading tags will load the scripts when the DOM is ready and in the order they appeared in your HTML. Put them in the head so the browser gets to know about them early and can already start loading while the rest of the page is still to be loaded and prepared.
But be aware that JS object might not be available for inline scripts. For example if loading jQuery using defer the $ will only be available after DOM loaded! So best approach is to wrap inline script like this:
window.addEventListener('load', () => {
// Your code
})Inline CSS
The page should start rendering only when the CSS is loaded to avaiod flickering effects. It is hard to tell which CSS styles are really used by a page. Usually the custom CSS is not super large, so consider inlining it to avoid an additional request and have it ready eraly.
CDN
Even though you are not using a CDN (Content Delivery Network) for your website itself it can speed up if you use it for common CSS and JS like jQuery or Bootstrap. But if the rendering does not depend on JS code, it is also absolutely ok to serve from the same server as the page.
Remember the defer tip from the beginning, it will also work for those
Minification
Of course reducing the size of files is always a good idea for production sites. UglifyJS does a good job for JS and
If the resulting CSS isn’t to big it absolutely makes sense to integrate it into the HTML header, which will improve the “first meaningful paint” benchmark and thus giving the user the impression the page loaded much faster.
Image Optimization
Dropping image resource on ImageOptim will usually have good results on reducing their file sizes which also helps speeding up page load.
Using more modern image types like WEBP is also possible but requires more changes in the HTML like using <picture> element etc. and will not be supported by all browsers yet. The work might not we worth the benefit right now.
Lazy Loading
Not everything needs to be available on the first step. With some Javascript magic image loading might be a good thing to defer. But also 3rd party integrations like embedded YouTube videos or Disqus discussion groups don’t need to be loaded immediately. On receipts-app.com for example I provide an offline search, which also only loads if the user types some words. The user experience is usually still the same.
Google Analytics
Tracking etc. should not slow down you page loading. Put it just in front of the closing </body> tag.
Reduce Waiting on Server Side
While optimizing all the details of the page you might forget about the server side. If you see a big “Waiting Time (TTFB)” in your Network Inspector this might be due to things going on on the server.
For example this could be a PHP script connecting to a database. I recommend profiling the PHP calls, which is simple using XDebug and and IDE like IntelliJ. In my case I opened the database without needing to. Another quick fix was to open MySQL via 127.0.0.1 instead of localhost.
Don’t forget configure a caching policy for your site that makes sense. Also compress the outgoing traffic, especially the HTML.
Check the Results
To see if the optimizations had an effect you could e.g. use the following tools for measuring, just to name a few:
Static Website Builder
For my own projects I use my own static web site builder: SeaSite. It does all the repeating tasks for me and is easy to maintain. Read more about it in this blog post.
Published on October 25, 2018