Front-end Optimization — 4 Tips to Improve Web Performance | Inoxoft

Front end: definition and stats

Users define front end as a user interface (UI) they can interact with. Developers have the other explanation for front end and define it as both UI and programming tools or techniques that make UI fully functional. The goal of front end is to make user experience (UX) as smooth as possible, mostly intuitive, and non-complex to use. The deal is, front-end web development is not as easy as it may sound. Basically, it includes the client-side development, where HTML, CSS, and JavaScript for a website are produced and enable ‘user — website’ interaction.

To understand better what we’re dealing with, front end consists of such elements as:

  • app page layout
  • graphics
  • audio and video
  • text content
  • UI buttons, links, toolbars, navigation bars
  • input areas, form fields, text areas
  • user flow
  • user personalization (references, themes, customizations)

According to the 2020 Survey by StackOverflow, there were 54.9% of front-end developers among the respondents. And, based on the State of Frontend 2020 report, the biggest number of front-end developers were located in Eastern Europe, Western Europe, and North America. With the popularity of front end, the number of developers will significantly increase annually.

What’s a Web Performance?

Web performance is a measurement of website work and potential user experience (UX) on this website. For example, the following questions are critical in ‘userwebsite’ engagement:

  • Does the site load quickly?
  • Can users start interacting with the website quickly?
  • Is there feedback for a longer time to load (a loading spinner)?
  • Are scrolling and animations smooth?

How to optimize your Web performance?

There are the 4 most common tips for your performance optimization. Thus, your website should comply with the following criteria:

These are the most important criteria that have important front-end performance subsections to consider.

Small and Simple

  • Reduce the Bundle and Assets Size

A bundler or the static module bundler is also called a webpack and it is used in JavaScript app development. Processing your app, the webpack builds a dependency graph, mapping all the needed modules for the app and generating bundles.

Usually, webpack carries out bundling and separate tasks running simultaneously. However, there are webpack plugins both the bundler and the task runner use. What’s more, these plugins may be used in tasks outside webpack. E.g. build directory cleaning or build deployment.

Despite being the primary assets for JS apps, the module bundler can be taught how to transform JS assets like HTML, CSS, and images. By teaching the bundler it will be possible to manage the number of HTML requests within the app and use the other assets like Pug, Sass, and ES8. Also, webpack may use npm packages.

Everything in your app will run smoothly until the size of the webpack bundle increases. Here, the load time of your JS app will be longer than needed. So, you need to know several ways to keep it small. For example, on Medium it is suggested to:

1. Use Scope Hoisting

Scope hoisting is the smarter way to add modules to the bundle and make JS execute in the browser faster and minimize the size of the bundle. To do this, add webpack.optimize.ModuleConcatenationPlugin() into the plugin section of your webpack.config.js file. However, it needs the latest version possible.

2. Prefer Webpack of the latest version

Webpack has a great feature — it removes all the white spaces and lines that are odd. Also, it informs packages not to include the debug code. To make use of Webpack, create webpack -p — mode=production and you’ll get UglifyJS minification enabled and NODE_ENV set to production.

3. Use Lodash-webpack-plugin

It becomes a great asset in JS app development if you already use lodash, but if you don’t — try it out, especially the lodash-webpack-plugin. This will reduce your bundle size significantly by removing all the lodash features you aren’t using in production.

To do this, the dependency npm command should be installed. How? Use the line npm install lodash-webpack-plugin -save — dev. The webpack.config.js requires the module on top LodashModuleReplacementPlugin = ​require​(​’lodash-webpack-plugin’​); and add new LodashModuleReplacementPlugin in the section with the plugin of the webpack.config.js.

4. Use Bundle Analyzer Tool

When webpack generates the bundle, you can hardly read it, for it’s vague. However, with the bundle analyzer tool, an interactive treemap will be shown to see this bundle visually. For example, you can use this bundle analyzer tool or click here to use this one.

5. Perform Tree Shaking

Tree shaking is the name of the process that allows removing the dead code from the bundle. This code is not used anywhere so it has to be eliminated. To shake the tree, you can use ES6 module syntax import { connect } ​from ”react-redux”​; , update .babel.rc presets: [[​”env”​, { ​”modules”​: ​false​ }] ], and use webpack of the latest version.

6. Do Code splitting

With the help of webpack, the bundle can be split into several smaller parts. This way, you can upload only the needed parts per page. You can do it as synchronously as asynchronously, which might be even better than the first option. To understand how code splitting is carried out, read it on official webpack pages.

  • Vector graphic SVG

Scalable Vector Graphics (SVG) is the 2D vector graphics and the XML markup language that describes it. In the other words, it’s an open web standard based on text, which describes UI images (logos, icons) rendered at any size that works together with CSS, DOM, JS, and SMIL standards. SVG images (logos, icons) that are described in XML text are searchable, indexed, scripted, and compressible — basically, any drawing software or text editor can edit these images.

With the help of SVG, images (logos, icons) can be rendered at any size, but the quality will remain the same. This allows you to keep images (logos, icons) in smaller sizes and ensures better image loading to improve your website performance.

Smart and Techy

  • Lazy loading

Lazy loading is a development strategy that identifies non-blocking resources and loads them in case of special requests. This way, the critical rendering path length is shortened and reduces the loading time of the page. Lazy loading usually happens during interactions with a user (scrolling or navigation) but has the potential to happen anytime. Sounds smart and convenient!

Lazy loading is applicable to:

  • Code splitting (JS, CSS, and HTML can be split into smaller parts)
  • Script type module in JS (type=”module”)
  • CSS Optimization (a render-blocking resource that renders processed content only with CSSOM)
  • Fonts (preload web font resources <link rel=”preload”>, the CSS font-display property, and the Font Loading API)
  • Images (Loading attribute, Polyfill, Intersection Observer API, Event handlers)
  • Atomic Design

One of the ways to keep things smart is to adhere to atomic design. The name of this design revolves around atoms not just to be catchy. An atom, as you probably know, is the smallest particle that you cannot break further into pieces. Everything in the world is made of atoms, which bond together to make molecules, molecules bond further and we obtain organisms that are more complex. The components are being merged together until we get all matter existing in our universe. But how is it applicable to design? Pretty easy!

User Interfaces are broken into smaller components. In the other words, every small component is breakable into fundamental building blocks of an interface you can work with. This is the core of the atomic design. It covers all the methodology used to create design systems. These are atoms, molecules, organisms, templates, and pages.

Using the atomic design, the UI you build in front-end apps can be easily modifiable. In case there are changes to be made, you can do that only by altering specific components.

Why is it smart? For it allows better website optimization. The Software Engineer at IBM, Carlos Parreño Bonaño, states that atomic design allows creating better apps with better architecture that are:

  • Modular and Scalable
  • With Unduplicated code
  • Consistent
  • Tested and Reliable code

In performance, the atomic design adds to:

  • accelerated loading due to less code size
  • state transitions by re-rendering specific components

Seamless and Smooth

To make web performance seamless and smooth, it’s a good idea to use Web Workers for big calculations or rendering big data. According to a Medium article, Web Workers eliminate the single-threaded flaw of JavaScript. So, Web Workers make the loading of heavy processing from the main thread easier and gain the UI running performance in the main thread. Web Workers improve the performance of UI responsiveness and are divided into:

  • Shared Workers (eliminates multiple requests between the web apps under the same domain)
  • Service workers (enhance PWA functionality)
  • Worklets ( lightweight, highly specific, enable to hook into various parts of the browser’s rendering process)

Measure Web Vitals

Front-end performance optimization is one of the keys to producing a successful website performance. Hence, web vitals are the measuring points you should consider to improve and enhance web performance.

Web Vitals is mainly a Google initiative that wanted to give guidance and promote a better user experience on the web. According to web.dev the core web vitals to remember are:

  • Loading — Largest Contentful Paint (LCP)
  • Interactivity — First Input Delay (FID)
  • VisualStability — Cumulative Layout Shift (CLS)

To remain appropriate, the positive web loading time should be no more than 2.5 seconds from the initial start of page loading. What concerns interactivity, users should experience the first input delay of no more than 100 ms. And, the stability of the web pages is considered appropriate, when the cumulative layout shift is 0.1 or less.

Tools to measure LCP, FID and CLS are:

And it’s not just a one-time measurement, it should be an occasional front-end performance testing and web performance optimization.

Final Thoughts

Website development is not an easy task. To ensure your front-end website is up-to-date and successful among its users, you should perform an occasional front-end performance check with the help of web performance optimization techniques. Such things as loading speed, interactivity, and stability are the key performance optimization factors that impact your website loading, user engagement, and user satisfaction. If you are in search of commitment, clear code, and fast performance resulting in a website that meets your expectations, makes business lucrative — let’s talk.

Originally published at https://inoxoft.com/blog/front-end-optimization-4-tips-to-improve-web-performance-inoxoft/ on March 30, 2021.

We are an international software company of experts driven by the desire to add value using the latest technology and business approaches > https://inoxoft.com/

Love podcasts or audiobooks? Learn on the go with our new app.

NPM commands

A must have tool for React-Native developers to upgrade their apps

Understand Life Cycle Methods in React.js

4 phases of a Component’s life cycle

Going epic with Redux Observable tests

How to Handle Network Connection in Your React Native App

What is a React Virtual DOM? What problem does it solve?

Partially-applied (or curried) functions could obfuscate the JavaScript stack trace

Creating Multi-select Dropdown with Checkbox in React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Inoxoft

Inoxoft

We are an international software company of experts driven by the desire to add value using the latest technology and business approaches > https://inoxoft.com/

More from Medium

Cloning of Expedia Website

Build a Gatsby Blog Post Filter

Basics of React.js

How to add comments to your blog ?