I have used the chrome profiler to identify the Layout shifts on our website and discovered that the Google One Tap banner is causing a significant layout shift (> 0.1) on mobile (Image of profiler showing layout shift). I have also added a Performance Observer using layout-instability API to identify the component causing the CLS, and it also indicated the same.
I have tried changing the position of the one-tap using data-prompt_parent_id, but this is ignored on mobile web browsers as mentioned in the developers guide.
You might try to re-test, recent improvements have been made to reduce or eliminate layout shift and improve the CLS score for Core Web Vitals.
Related
For to optimize a website for WEB Vitals of google, one of the most common causes of a poor CLS is:
Images, Ads, embeds, and iframes without dimensions
And the web component? How we can create a web component that no trigger cls? With a placeholder? With fixed dimensions?
Any suggestion?
Can you try testing your site in Chrome Canary? Several CLS bugs were recently fixed that incorrectly attributed layout shifts to web components in the first frame they were rendered.
I always recommend measuring Web Vitals in Chrome Canary in order to get the most accurate results.
Also, FYI, if you want to follow changes and bug fixes for each of the metrics, you can do so here: https://chromium.googlesource.com/chromium/src/+/master/docs/speed/metrics_changelog/README.md
Due to Bootstrap upgrade, there has been lots of changes in the CSS in all pages of the web application that I'm working on. This application is also mobile optimized. So I have the task the checking the UI of all pages of our application accross most browsers - IE8,9,10,11 , chrome, firefox, ios and android devices(phone, 7 inch, 10 inch).
Right now, I'm opening the existing version(old bootstrap) and the updated version(New bootstrap) of my website in 2 tabs, and switch back and forth between them to find out any UI issues like alignment and color change and text size.
Is there a better way of doing this?
Yes there are somewhat solutions to it, which make cross-browser and multiple device testing easy. Some of them are:
Ghostlab: allows synchronized testing which means if you click or scroll in one browser it happens across all browsers. It has many other features but is only for Mac.
Grunt also allows for synchronized testing. Check this article
you can do cross browser testing within a browser using online services such as
Last thing I would mention is xip.io just check it out!!!
Chrome DevTools are awesome for this purpose. They allow you to override settings for different devices by Developer Tool>Settings>Overrides you can override following to emulate
User agents
Device metrics
Device orientation
Touch events
CSS media
I have developed a mobile site using Icefaces-mobile framework in that I want to search the things based on area zoomed in on the mobile screen, for this users can zoom in/out & navigates the area but the problem is after doing zoom in/out/navigations 4 to 6 times browser becomes unresponsive. I think it must be problem with browsers capability of handling/execute the javascript(correct me if I m wrong).
I have generated latest API key for map using some standers steps given by google on their forum.
Thanks in Advance.
The stock Android browser does suffer from serious limitations, and it could be device performance limitations, as the previous poster mentioned. But you should also be careful that you're not inadvertently causing a memory leak in your own JavaScript. Are there DOM updates from Ajax interactions being generated during this? Check the Android LogCat messages to see the ICEfaces/ICEmobile logging which will show the updates. Check to ensure that if you're custom function is being re-run that you're not causing a memory leak there. If not, I doubt there's an issue with the GMap code and it's likely just a device limitation. Perhaps also put your gmap code in a separate HTML page without ICEmobile and see if you still have the problem.
Im trying to implement a mini browser in adobe air. The browser should work in the same ways as a mobile phone browser, i.e. fit the width of the website to a certain width(specified within the html component) and leave the height to be scrollable.
I have managed to do a mini browser by using the scaleX,scaleY properties of the mx:HTML component however these make the websites look unreadable.
I have also tried setting the css3 zoom property, and that works fine, but it only zooms out certain elements, therefore messing up the site layout.
My question is: Is there a way to make a mini web browser which shows the full content of the website?
Thanks for your help
Air browser cannot be scaled without have an horrible look (no anti-aliasing).
A few years later but here is what I ended up doing:
The requirement was to show the full website that person B was looking at so that person A could guide them through the site. Due to all the limitations of the Adobe AIR Browser we ended up using IECapt (http://iecapt.sourceforge.net/) within an external process to capture the screenshot and send it back to AIR.
This is all well and good, but IECapt is quite out of date as well so recently we have started to look at the using Chromium (http://www.magpcss.net/cef_downloads/) as an ANE within our application and with that we can alter the zoom and dimensions of the page while still being able to keep it up-to-date.
I have a modified version of a flex calendar found Here, and though it looks alright on most computers I've seen, there is a problem on two of the three servers here. Because of the way Citrix is setup here, I need to have it functional on all of the servers.
When it loads, everything is stretched out vertically, and the numbers are missing on the date boxes. If you mouse-over the flex buttons, they jump to the right size, but there is still rendering errors.
The modifications I made had no effect, because the servers give the same results on both my version and the demo version hosted online. As far as I can tell, the servers are identical (IE version, Flash version, etc.)
How can I get it to display normally?
Initial View
After Mouseover
Usual Demo
Demo in bad server
Edit: On the server that renders it improperly, Firefox renders it fine, but Firefox cannot be used for other (unchangeable) reasons.
From the images it appears this is how the SWF appears in the Browser of each server - one good and one bad. Not how the SWF appears in any browser while being hosted from each server.
Sense it is the browser display that is not working correctly I would assume it is a rendering problem with the browser and not the server.
1.) The problem could come from JavaScript being disabled in one of the browsers and the view being taken from the embed tag. Check to ensure that it looks the same with JavaScript both on and off.
2.) The height being 100% could also be messing it up in the browser. Try setting the height to a specific value (800px) and see if that corrects the problem.
3.) Make sure that the browsers are the same. Is one IE 7 and one IE 8? If they are the same, check the version number to ensure that all updates are the same for each.
4.) View the site from another computer that is connected to the server.
Number 1 and 2 would be my best guess as a way to troubleshoot.