I have a problem loading my website NextJS - reactjs

I have an application developed in NextJS and deployed in Vercel. The problem I have is that Vercel's performance analytics give me very low results and I don't understand why.
The images are compressed, could it be some component rendering issue? The page is very simple, the only interaction there is a contact form that sends an email.
Could someone give me an idea of ​​what can happen?
The website in question is: avocat-asmaekirimov.com
This is Vercel's score:
enter image description here
I have tried to solve it by compressing images, optimizing the CSS but it is not such a big application

share the website url please so we could check in more details.
try to change your server on vercel (https://vercel.com/docs/concepts/functions/serverless-functions/regions)
there are many senarios that ccould make this happened. so please provide more information

Related

Why my static React website is freezing in localhost?

I created a static React website, there is no database, no node.js, no login system. It is a simple company website with many SVG images and a lot of CSS work. I made it with Bootstrap 4. But when I try to run it on localhost it freezes many times. I am unable to figure out why the website is hanging, also it takes time to load all the SVG images.
Can anyone tell why does it freezes?

Host React app and Wordpress in one domain

Respected Developers
I have an issue in web hosting. First of all, I would like to sorry you in advance as you may not be able to understand well because of my inexperienced English.
I have already prepared built react app and landing page of WordPress.
What I want to do is when I type in the browser just like https://myapp.com, it goes to my WordPress landing page, then that landing page will have some links to the react app.
So, WordPress page is only for the first encounter of my site, and all the contents will be shown by react.
Godaddy domain name has already been bought.
All left is to host 2 different apps to one domain. How can I do it without fail?
Could you please tell me how to do it? I will be happy if someone helps me with the good opinion.
Thanks in advance.

Page not mobile friendly error when testing on google mobile friendly test

I test my site url on google mobile friendly test. It showing me page is mobile friendly but some times it is showing me that page is not mobile friendly. So why it is happen. Please help me out for this. I added some codes in htaccess but not getting positive thing. Site in wordpress.
URL : https://www.example.com/test/
This could happen when the google mobile bot is not able to fetch and render the page correctly for the mobile platforms.
If you test this in your search console, you can see the errors for the static assets not getting loaded for mobile. It could happen due to a variety of reasons based on your Wordpress website configurations and plugins.
If you are not using google search console, make sure you use it to figure out the actual cause of these issues.
Check out this detailed blog for the fix relates to static content delivery - Fix Page not friendly issue

AngularJS application problems appearance in Google search

I have a personal project which consumes my free time and effort for about a year without significant profit. I have problems with it appearance in Google and would really appreciate to get help here.
This project (http://yuppi.com.ua - similar to craiglist in US) is WEB-based AngularJS 1.2 application that uses PHP rest API hosted on GoDaddy. And in order to make this application popular it have to be very visible in internet and very searchable in Google and users have to be able to share pages via social networks or skype.
According to Google specification, google crawlers doesn't run javascript to get content of a web page before index, so I've added _escaped_fragment_ page that displays content of web page without javascript. For example:
Page: http://yuppi.com.ua/#!/items/sub/18/_
Dirty : yuppi.com.ua/?_escaped_fragment_=/items/sub/18/_
This dirty page will be redirected here where google will see content.
http://yuppi.com.ua/server/crawler_proxy/routee.php?path=/items/sub/18/
So basically I have two versions on HTML file for that page. One version is the one that available to users, which has styles, a lot more HTML tags etc. And the second is the version for Google crawler - very light-weight without any styles. And I am expecting to see clean link to my site in Google, not dirty.
So, If to search all links to a web site in Google you will see that one of the links displays it's "dirty" state.
Another problem is sharing links in Skype.
When I send a link to someone, I am expecting that this link will be transformed to thumbnail image but it is not happens. Instead I see ungly link to my web site.
Please help me to understand how to make happy everyone: users, google crawler, GoDaddy and me.
I was encountering the same problems last year with a big project and we ended to use : https://prerender.io/.
It's a prerendering system that work with a phantomjs browser to detect bot request and render a full html template. It does also instanciate a cache service to not render again a template that haven't change.
Hope it help's.

Weird Content of Facebook share/like button preview from angular app

I have an issue with share/like button from Angular app. I finally made it working correctly with links but share/like preview if completely wrong. I tried XFBML.parse(), switching to html 5 mode, etc.
There are two complete enigmas:
1. I got "Given URL is not allowed by the Application configuration..." despite adding all possible variants to fb app setting.
When share preview appear - it has "Angular", but I never added it anywhere.
Here is the link
Would be grateful for any ideas...
Thx
The Facebook Scraper only looks at the HTML code your server delivers, it does not execute any JavaScript.
So if you want to share different articles, you need an individual URL for each article, that delivers the relevant meta data when requested from the server.
You can find some more explanation and hints on how to implement this in this article, http://www.michaelbromley.co.uk/blog/171/enable-rich-social-sharing-in-your-angularjs-app

Resources