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 speed.web.dev, or actually you would like to check the website with the chrome browser. In the chrome browser, there is already the tool Lighthouse.
Just go inside dev tools F12 and choose the tab ‘Lighthouse’, 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.
The general things to check out to increase the performance
- Ensure your website and JavaScript bundles are compressed 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.
# 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]\.";
-
For the very first time of loading the page, deliver only vital files and assets. 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.
-
Use a content delivery network (CDN) to load resources faster. For example, whole libraries like bootstrap can be loaded through CDN or only their minified styles.
<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" />
-
Images must be with the appropriate resolution. 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.
-
Make sure you are using one font or at least the minimum fonts needed. Consider having some basic font and not very unique font, because loading unique font also takes time. Use
font-display: swapin the style file, to make sure that at least the default font will be used if the required font is not loaded. -
Decrease analytic tools on your website, 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.
Even More
For better SEO 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.
If your website is SPA, 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.
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 <meta> tag with appropriate attributes.
<meta name="prerender-status-code" content="404"></meta>
As well as for 301 or other specific codes
<meta name="prerender-status-code" content="301">
CSS and JS files 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.
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”