A colleague showed me Lighthouse on the Chrome browser. I have a single page application (SPA), and I'm able to run it against the base URL of my application.
However, all subsequent screens are rendered by client-side JavaScript without a change to the URL in the browser.
How can I test the rest of my site?
The only way is to switch project to server side rendering, like Angular Universal
update: found this issue https://github.com/GoogleChrome/lighthouse/issues/5187
If you can't switch your project to server side rendering as Alexey Semerenko said, you can consider using another testing tool like Sitespeed.io which allows you to define user actions as a script to browse every pages of your application.
After your test you will gather the same kind of metrics.
Related
Server Side Rendering (in Nuxt, but I think this is fairly universal) has been explained to me as:
When using Nuxt SSR, you request an URL, and get sent back a
pre-rendered HTML page. After loading, the browser starts the
hydration code, at which point the static page becomes a Vue SPA application.
I presume (perhaps incorrectly) that regardless that you are now in SPA mode, if you request a new page (eg. you are on "blog/ten-blue-things" you follow a NuxtLink to "blog/ten-red-things") the browser sends a new request to the server for this page, and effectively break SPA-mode? Or am I wrong?
I really hope the answer is that it does not make a request. In my scenario all the required data is very likely already available, and if not the page would make an API call to get anything missing to dynamically render the new page "blog/ten-red-things". Fetching a pre-rendered page after the first fetch is wasteful in my scenario where everything is already on the client (to clarify this further, this is a PWA offline-first app; I'm adding SSR for the SEO and social sharing of pages).
However, I also wonder that if it indeed does not make a request, does that (generally?) hold true for crawlers as well? I'd rather they DO make a separate request for each page in order for them to get the prerendered SEO-friendly version of the URL. If a crawler has js enabled, it may execute the hydration code, and then what?
Can anybody clarify this perhaps?
Does it matter for this anwser if instead of SRR we employ ISG (incremental static generation)?
It does not break the SPA mode, once you've SSR'ed and hydrated, the app stays as SPA. You can notice the fact that you don't have any "page reload" because you're doing a vue-router client-side navigation (as to oppose to a regular a link navigation).
The rest of the app will still be SSR'ed properly, you will not go back to the server meanwhile (as to oppose to Next.js).
They are several ways to debug all of this thanks to some devtools + trying to disable the JS/inspect the source code. But yeah, crawlers will properly parse the SSR'ed content.
PS: you can also choose what kind of rendering mode you want for a given page so if you want some to be SPA-only, you can. The rest could be SSR'ed (during initial render) + SPA after the hydration.
SSR or ISG will not make any impact regarding crawlers/SEO.
It works differently from SSR of course, but the rendering part will be the same regarding the markup. Only the "freshness" will be different.
When viewing a web application as a user, what are some reliable ways to determine if the app is a single page application (SPA)?
Depending on the framework used, the URL might make extensive use of hashtags. IF you click on navigation links, etc and the URL looks like http://somesite/#/some/route, then it is using hashtag-based routing and is a SPA. Angular 1.x did this for a while. However, newer routing engines use HTML5 features that make the route look like a normal URL: http://somesite/some/route. This URL would be indistinguishable from a non-SPA site. In that case, the only way to tell it is a SPA is to look at the javascript code (Does it use a SPA framework) and/or network traffic (when you click a link does it get the whole page, or just some JSON needed for the current view).
I m developing a Single Page Application (SPA). So, I use to refresh the page's HTML's content dynamically using Ajax requests.
I'd like to register to the DoubleClick for Publishers program, but I m wondering if my SPA is able to integrate advertising due to its dynamic content loaded without refreshing the page.
I saw this link: https://support.google.com/dfp_sb/answer/3058726
So I assume it's ok. But I'd like to be certain before starting using DFP. Could someone confirm please?
Then, sometimes I m using external html pages that I still load using Ajax. Should I consider writing the advertising banners JavaScript inside these external views, or directly inside the master page of my app?
Last question: How can I manage users having an adblocker software installed? Am I allowed to detect the presence of an adblocker software using JavaScript and then execute some specific code for this kind of users?
I'm working in a SPA and working with DFP successfully. Here is my feedback to your questions:
So I assume it's ok. But I'd like to be certain before starting using
DFP. Could someone confirm please?
Yes, you can refresh the banners using the method you are refering in the link you shared
Then, sometimes I m using external html pages that I still load using
Ajax. Should I consider writing the advertising banners JavaScript
inside these external views, or directly inside the master page of my
app?
To load them externally will bring you to lower performance results. You can control everything from the main page and you will have better results.
Last question: How can I manage users having an adblocker software
installed? Am I allowed to detect the presence of an adblocker
software using JavaScript and then execute some specific code for this
kind of users?
This is something I have not started to work on it but you can detect (like forbes.com is doing on it website) and there are also projects on dealing with this.
I am trying to simulate a cross origin site. Meaning I shouldn't be able to make ajax request from site A to site B since the browser will not naturally allow me to do so because of their cross-origin policy.
What are the tools I can use in this regard? Or are there any hacks?
What I've tried so far: I've opened a visual studio solution. It has two asp.net web form projects. One web project (say A) simply hosts a form with a file input control and a submit button. The other project B has a simple aspx page, which contains an iframe which loads site A inside of it.
I ran project B, and, in the browser console window, I did something like this:
var ifr = document.getElementById('myiframe');
console.log(ifr.contentWindow.document.body.innerHTML);
The console window displays the markup of site A's page which is loaded in the client's iframe.
Clearly I've failed. But is there I way I can do it on one machine.
Well, a bit of digging shows that you can achieve this feat is by modifying your hosts file (C:\Windows\System32\drivers\etc\hosts) as mentioned in the post below:
How do i map http://localhost:8080 to http://mysites in iis7?
I'm searching for a framework that could allow me to emulate user browsing session.
A typical session looks like:
Browse to home page, get session
Be redirected to current page
Click on some link
Get connected
Submit a form
and co...
I would like to be able to define this session using API calls.
What frameworks would you recommend to be able to run this setup? It should be run headless (not inside the browser), to be able to execute via Hudson.
Language does not matter, python of java would be great.
Thank you,
Maxim.
There are multiple frameworks which can do this. Check out:
https://github.com/axefrog/XBrowser
http://htmlunit.sourceforge.net/
and the answer to this question:
Alternative to HtmlUnit
Have a look at htmlunit
Its even got decent javascript support, its Java based.
Support for the HTTP and HTTPS protocols
Support for cookies
Ability to specify whether failing responses from the server should throw exceptions or should be returned as pages of the appropriate type (based on content type)
Support for submit methods POST and GET (as well as HEAD, DELETE, ...)
Ability to customize the request headers being sent to the server
Support for HTML responses
Wrapper for HTML pages that provides easy access to all information contained inside them
Support for submitting forms
Support for clicking links
Support for walking the DOM model of the HTML document
Proxy server support
Support for basic and NTLM authentication
Excellent JavaScript support
take a look at Selenium WebDriver with Xvfb.
this post shows an example in Python:
'Python - Headless Selenium WebDriver Tests using PyVirtualDisplay'