When your web app is live, it’s definitely worth checking how search engines will like it. The better solution will be to use profilers for the website. The profiler will help to find the bottlenecks of your site and highlight what actually makes it slow. It could be one of the other web tools to clarify the website speed like page , or actually you would like to check the website with the chrome browser. In the chrome browser, there is already the tool . speed.web.dev Lighthouse Just go inside dev tools F12 and choose the tab ‘ ’, and you can verify how your application works for Desktop or mobile devices. These tools help to find the problems and also provide suggestions for better performance. Lighthouse The general things to check out to increase the performance before responding to the user's request. Typically on the server, there is a particular web server program like Ngnix, Apache, and others. There are several settings to set up compression. You are required to enable compression for the particular formats of the files and specify the file size which after compression will be applied. Ensure your website and JavaScript bundles are compressed # Nginx sample
gzip on;
gzip_vary on;
gzip_min_length 1024;
gzip_proxied expired no-cache no-store private auth;
gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/x-javascript application/javascript;
gzip_disable "MSIE [1-6]\."; . It’s better to load images or CSS related only to the page that the user requested. As well as Javascript code, if your bundle of JS is big enough because of the variety of libraries, try to split JS code to load modules where required. For the very first time of loading the page, deliver only vital files and assets . For example, whole libraries like bootstrap can be loaded through CDN or only their minified styles. Use a content delivery network (CDN) to load resources faster <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.2/css/bootstrap.min.css" 
integrity="sha512-CpIKUSyh9QX2+zSdfGP+eWLx23C8Dj9/XmHjZY2uDtfkdLGo0uY12jgcnkX9vXOgYajEKb/jiw67EYm+kBf+6g==" 
crossorigin="anonymous" 
referrerpolicy="no-referrer" /> . To be more lightweight decrease resolution where possible and compress images. Sometimes if there are a lot of images you will probably need a different format like AVIF, WebP, etc. Images must be with the appropriate resolution . Consider having some basic font and not very unique font, because loading unique font also takes time. Use in the style file, to make sure that at least the default font will be used if the required font is not loaded. Make sure you are using one font or at least the minimum fonts needed font-display: swap , if there are many. (Google, Bing, and e.t.c). In case there are multiple tools search engines will wait until all scripts will be loaded, so the website could be too clumsy. Decrease analytic tools on your website Even More For better purposes, the website itself must be fast-loaded upon the first load. As well first render is very important to show all content to the user in a timely manner. It makes the site cuter in eyes of search engines, as a result, the site will increase its position in the search. SEO If your website is , you can actually try server rendering. It means that the HTML document will be ready for presentation on the server side, and no need to change the document via javascript on the client side when it is loaded. Or the other path to use a service to prerender pages, I used prerender.io for the small web app that has only about 20 pages. But the service itself allows 250 pages for free usage. SPA https://prerender.io/?embedable=true If you will use it, you will also require properly propagate different status codes for the pages. For the page with a 404 error - Not found, we will be needed to add a tag with appropriate attributes. <meta> <meta name="prerender-status-code" content="404"></meta> As well as for 301 or other specific codes <meta name="prerender-status-code" content="301"> are manipulating the website DOM after it is loaded to the client. The first render depends on these files. For example, regarding the CSS, if you have media queries or other manipulations with the sizes, try to decrease them. The media queries increase the time, especially for old mobile devices to render pages. The JS files may have a lot of asynchronous queries that also negatively affect rendering. CSS and JS files Delivering only the required and minimum information to the client on the first load is vital. If you are curious about more details and what to do to increase the website speed, I believe this article from “Digital funnel” also will be helpful. https://digitalfunnel.ie/how-to-increase-website-speed/?embedable=true The principal thing after you implemented the web application is to deliver it with all desired metadata for the search engines and in the end to have a low size. As it is very important for search engines, imagine how it’s critical for the potential client of your website to get your site quicker. As Google says: “Faster sites encourage people to stay longer”

Apache

Google

Timely

Where is Your Deep Object in the Query?

Simplify Your Server JS Tests

Nominated for 2022 - HackerNoon Contributor of the Year - Redux

Nominated for 2022 - No No No Nodejs

Nominated for 2022 - HackerNoon Contributor of the Year - Coding Skills

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Nominated for 2022 - HackerNoon Contributor of the Year - Api

Too Long; Didn't Read

What to Do After You've Deployed Your WebApp

What to Do After You've Deployed Your WebApp

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Build a Solana Crowdfunding App using React

13 Tips For Choosing the Right Hosting Provider

The System Design Cheat Sheet: Cache

5 Tips for Website Image Optimization

6 Critical Flaws That Can Crash Your Website or App Under Load

A Guide to Paying Less For AWS CloudFront

Build a Solana Crowdfunding App using React

13 Tips For Choosing the Right Hosting Provider

The System Design Cheat Sheet: Cache

5 Tips for Website Image Optimization

6 Critical Flaws That Can Crash Your Website or App Under Load

A Guide to Paying Less For AWS CloudFront

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps