Just launched a site bluesophy for which I am using a self-hosted instance to deliver HTML pages of my AngularJS app to google bots. Page speed insights from google are rather poor : respectively 33 and 27 / 100 for mobile and desktop. I know a couple of things I could do right now, but wanted to know if somehow using prerender.io could affect page speed load, or did someone face similar issue and how did they deal with it ?
Related
could anyone please help with my webbsite loading times?
Whilst desktop pagespeed ranks 99 the mobile version ranks 75 only.
https://pagespeed.web.dev/report?url=https%3A%2F%2Fwww.muscle-cars.eu%2F&form_factor=mobile
What could I do? I already use next/image and wepb, do I have to compress it more?
Yesterday I tried to remove Catamaran font from the website and it speeds up to 96, but it is very unlikely that removing 80kb font would help that much, I think there is something blocking up loading the font. I tried Google API and self hosted both similar result.
Thanks for help.
Here is the result of your website test, we can see that the mobile version only ranks 75.
I used chrome devtools to check this web page and found some issues to enhance your web user experience.
Your website gets the raw css and javascript files from the server. It's too big and will waste more time. You can reduce file size by using ugly javascript and css files when the page is first loaded.
Your website is getting too many javascript files on first load. I found more than 10 files to load. In mobile 3G networks, more time is wasted. So use webpack or other bundling tool to combine these files into fewer files.
You can reduce file size by using tree shaking javascript and css.
Your web page home page can use server-render teck, which renders javascript in server and sends whole html file to mobile browser.
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
Our team is starting new project with initial consideration of react-native as a framework to build on top of (Majority of us have been within React ecosystem for a while now).
We are also discussing PWA only based approach since support is coming to Safari soon and Chrome already has good one with a lot of apis available and Desktop PWA's coming soon.
I wanted to ask community about possible complications related to PWA only approach, here are drawbacks we thought of:
1) No presence / discoverability in App / Play stores
2) No access to certain api's like NFC... (but by the looks of https://whatwebcando.today in chrome, we will have access to all we need)
3) Smooth UX will be hard to achieve (although very possible to do 60fps)
4) Users are not too familiar with PWA installation / usage process, might find it alienating
5) A lot of knowledge required to get good caching / networking and performance experience (Most of this we do know from web app development already however)
Some advantages
1) No cuts taken by app stores for in app digital content purchases
2) Truly one codebase for all platforms Mobile and Desktop
3) Lighter in terms of weight on user's device
4) Full control of release process
5) Easy and fast updates
6) Our team will develop higher quality code with tooling they are already familiar with as opposed to learning native bits of react native.
Assuming go live for the project after 7 - 9 months, is PWA a viable way to go forward with?
Like most of us here, we are getting started with PWA as well and had some similar questions. Trying to answer yours with our PWA startup experience.
Spoiler alert : Its is possible to create Production ready, high performing, write once run anywhere apps in PWA today. Learn from people who have done it- Ali express and Twitter. Here is one best article on comparisons of different options that we have today.
Question : 1) No presence / discoverability in App / Play stores
Answer: PWA Apps can be packed as an app(like .apk for Android) and published in app stores. This is possible for all platforms(iOS, Android, UWP). Here is a handy tool to pack (https://www.pwabuilder.com/).
What it does is packs your site(URL) into a hosted web app if supported(UWP) or use Cordova as polyfil by creating a webview and wrap your app(iOS, Android). Hoping Android will soon give option to avoid this polyfil. Until then, we can wrap in Cordova, and still take advantage of PWA features(like service worker-offline caching. iOS supports service worker only from 10.3).
Off-course, putting in app store comes with the cost of app store revenue sharing. Still with the PWA "Add to home option", you can slowly get new user base bypassing app store. One good back door for increased revenue if you are in paid app space.
Question : 2) No access to certain api's like NFC... (but by the looks of https://whatwebcando.today in chrome, we will have access to all we need)
Answer: If you are wrapping your app in cordova (as in above solution- PWA builder), you can use cordova plugins for things that are not supported..say NFC. This closes all hardware access limitations. we can keep replacing with PWA way as the support starts to come in feature. That's essentially what "Progressive" in PWA :)
Question :3) Smooth UX will be hard to achieve (although very possible to do 60fps)
Answer: Yes, you can't beat the FPS of a native app. But with PWA, it doesn't matter for the majority of the app out there(exclude apps like games, heavily animated apps), considering service workers- caching and other PWA features, apps can load fast and smooth enough to not have any frame drops that a human eye can detect. You wouldn't need more than 60fps to achieve that. Here is some good explanation and you can find so many such articles if you google for why 60fps.
If you are targeting any specific hardware in a enterprise environment, you can test the device's FPS here in the latest version of browser that supports PWA (chrome is a good one for now).
Question 4) Users are not too familiar with PWA installation / usage process, might find it alienating.
Answer: As mentioned in the first answer, you can continue to have your PWA site as an app (hosted app) in app stores and extend the PWA benefits to the in a web browser as well. PWA app benefits for the in browser user as well(like offline capability) and the option of asking the user to "Add to Home screen" is an another level of benefit you get with PWA (to increase the user engagement).
Question 5) A lot of knowledge required to get good caching / networking and performance experience (Most of this we do know from web app development already however)
Answer: PWA builder link above also helps you generate "Service worker" which solves your caching with not much complexity. Yes, there will be a lot of best practices out there and things will be keep coming as PWA evolves. You don't have to have everything in place to start with though. You can start with a basic service worker and manifest file to add to home screen/pack it as an app for app store and you can keep adding more PWA stuff on top of it as you progress.
All of the above work is going to give the benefits that you have mentioned and its worth the errfort
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.
Options for server side rendering the ang apps
1 - pretender.io
Free for up to 250 pages per month
Here is a tut.: https://scotch.io/tutorials/angularjs-seo-with-prerender-io
2 - https://github.com/steeve/angular-seo
Open source and free
_escaped_fragment_ idea ie:
localhost/app.html#!/route becomes:
localhost/app.html?_escaped_fragment_=/route
At the server side, phatomjs picks up this translated request and returns a full
rendered html file for google to crawl.
However has anyone tried running a plain ang app with a site map? I am building an api onto Kirby CMS which has a nice site map functionality... but I don't know if this will be enough for seo...
It depends. Google will try to crawl ajax calls
https://developers.google.com/webmasters/ajax-crawling/docs/learn-more
However this can't be said about other search engines or crawlers.
Sitemap will not help you much, because it does not contain all content of your site. Sitemap is basicaly there to give crawlers map what they should crawl/index.