Boost your Front end app
1. Design for performance
2. Minify CSS and JS
3. Broken Links and Broken SRC / HREF attributes
4. Use webP for images
6. Lazy Load CSS and JS
Design for Performance
Good content, layout, images, and interactivity are essential for engaging your
audience, but each of these elements have impact on page load time and the
Minify css and JS
Minification removes unnecessary characters from a file to reduce its size,
thereby improving load times. When a file is minified, comments and
unnecessary white space characters (space, newline, and tab) are removed. This
improves response time since the size of the download is reduced.
Broken Links & src / href attributes
You may expect a browser to do nothing when it encounters an empty image SRC
tag. However, this isn't the case in most browsers. Safari will make a request to
the actual page itself. This behavior could corrupt user data, waste server
computing cycles generating a page that will never be viewed, and in the worst
case, cripple your servers by sending a large amount of unexpected traffic.
Use webP for Images
WebP images can be substantially smaller than images of other formats:
sometimes they are up to 25% smaller than their JPEG counterpart. WebP is
overlooked a lot and not often used. At the time of writing, WebP support is
limited to Chrome, Opera and Android (still over 50% of our users), but we can
degrade gracefully to JPG/PNG.
The browser comes across a @font-face definition in CSS that points to a font not
available on the user’s computer, it will try to download this font file. While the
download happens, most browsers don’t display the text using this font. At all.
This phenomenon is called the “Flash of Invisible Text” or FOIT.
Lazy Load css and js
Generally speaking we have an approach of loading in assets as soon as possible.
We eliminate render blocking requests and optimise for the first view, leveraging
the browser cache for repeated views.
We don't have a server side language, just a static Apache web server. But an
Apache web server can still do server side includes (SSI) and read out cookies. By
Apache, we can boost front-end performance.
Since we depend heavily on browser caching for repeating views, we need to
make sure we cache properly. Ideally we want to cache assets (CSS, JS, fonts,
images) forever, only invalidating the cache when a file actually changes. Cache is
invalidated if the request URL is unique.