Recently in Google Search Console, I noticed that I have 86 poor URLs on my website (www.wired2golf.com). In my search console, it says that the issue is caused because these URLs have a LCP of more than 4 seconds on mobile. This issue is only evident on mobile. Everything is find on desktop.
For most of these URLs, I believe the LCP is the featured image at the top of the post:
Image here
Am I correct in assuming that the feature image is to blame for the slow LCP? And what alterations would I need to make to these feature images to reduce the LCP for each of the affected URLs?
Thanks,
Ivan
Related
Please help me if you have iphone 12 pro ...
My boos (and some of his customers) has an iPhone 12 pro (ios 14.3) and I don't and yu can't install any apps in iphone simulator so debugging this becomes a nightmare.
This problem is specific to Google's app on iphone and does not happen anywhere else!
copy this link and open it in the google's app https://intaker.co/debug.html, tap on one of the links. The site won't load property, it seems that the screen size is not correct (it's very small)!! the loading widget is displayed on the corner and then everything is squished in the corner ... But now if you refresh the same page or rotate the phone the page renders properly!!!
Has anyone seen anything slimier to this? Do you have a solution?
UPDATE 1 : I put a fixed 100% width/height div in the page hopping to force it to grow but no luck
UPDATE 2 : If link comes from the same domain this problem does not happen!!! try the links in here https://intakerclientqa1.azurewebsites.net/debug.html they point to the same domain
UPDATE 3 : This is only happening when using this app https://apps.apple.com/us/app/google/id284815942
UPDATE 4 : Even after updating the device to 14.4 this is still happening, this is how the site is being rendered :
This happens only the first time and only when arrived from a external link, it works fine if :
link is typed/pasted in the browser
page is refreshed
device orientation is changed
I will try my best to explain. I am using my Chrome browser to emulate iPhone 5 and look at different websites. The website displays in a frame which corresponds to the iPhone 5 frame as shown below:
This all works but I want to see the scrollable content too without scrolling. In other words I am interested in taking a single screenshot of the complete page without scrolling. Is there anyway I can do that?
This isn't iPhone specific, but Google's PageSpeed API offers the ability to view a screenshot of a particular live website in "mobile" and "desktop" mode. It's not an exact indication for a particular device, but it's handy to get a general feel for how a website shapes up on mobile and also handy if you are looking at many websites.
I needed this for something I'm working on and wrote a plunk using Angular here: http://plnkr.co/edit/c7fAFx?p=preview. In the end it's just making the following GET call, and using slightly modified results to display an image.
https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url=<your-website-url>&key=<your-api-key>&screenshot=true&strategy=<mobile OR desktop>
You'll need to register a Google API account and grant it access to the PageSpeed API. Not sure if it's what you are after, but might help.
after visiting a website for a long time, and leaving another open during that time, it seems that the layout of the first, appears on the second. It happens mainly when using chrome, but once the issue appears on chrome, it is as if it stays in memory, and happens in firefox too. I read about memory leaks, but I am not sure that this is the issue, and if I am the only one that has it. I mainly see it happening on the website that I am working on which is why it is an issue, but it happens on the black bars of facebook, and another website called jeuxvideo.com . (This is the template my website uses: http://themes.alessioatzeni.com/html/brushed/).
Here is an image showing the issue, where the layout of youtube overlays another website (the transparent grid you can see over the rest of the website):
http://i.imgur.com/FQW7Jin.jpg
Is this a bug with chrome? Because I have looked everywhere and it doesn't seem that anyone else has this issue, or maybe it is just my computer?
This is probably image persistence, where the colours in the monitor get "stuck" temporarily after being on or off for a long time. The fix would be to upgrade the monitor.
You could confirm this by taking a screenshot while the problem is happening. If you don't see it in the screen shot (try moving the screenshot around the monitor when you see the problem, do the affected areas of the screen move too? or are the artefacts stuck in place?) then the problem is with the hardware.
On this page, the images look fine on desktop but are white/not found on mobile devices. I have no idea why this is happening. I'm just calling an img tag but it says its not found on mobile even though it is there
I have checked your files, #MrVimes is correct your should finish your html which will help validate better on slower devices.
However the problem is purely down to size of the image. Chrome Dev tools shows me that they are massive in size, Enable emulator and select iPhone 5 and see what happens. It is just taking a long time to download.
Try using Picturefil.js to serve smaller images or make them smaller in your software application.
This was the picture I got from Google Dev Tools (which is free and amazing):
Also I noticed that your need to change the way the images are handled in CSS, if you open dev tools:
Position:center
Is not valid, maybe set it to relative or static depending on how you want your page structure to look.
I also saw you may want to update your header with this css:
z-index: 99999;
This will make your header appear on top, as the z-index changes the layers of the html elements (much like the fillings in a sandwhich)
sorry my friend but this is false COMPRESSSING THE IMAGES TO 50KB the big images won't appear because your cache browser is full you have to empty your history/cookies/cache of the browser
IOS DEVICE SUPPORT 32 MEGAPIXEL SIZE OF IMAGE IN SAFARI
take a look here for maximum image size and resolution support Apple IOS developper
to delete your cache just go to "Setting=>Safari=>Cleare cache=>clear cache" and that's it
Note: Check the avaible space on your IOS DEVICE should be greater then 50MB
You have to Enjoy the technologie by let the images greater then 1.5mb and works in both of computers/devices
I am running into a random issue in a website that I am working. This website contains many images and some images are 1Mb in size or bigger. The site also uses some CSS3 tricks, like 3D rotations.
Since I added this 3D CSS stuff, I noticed a problem in Google Chrome where some random areas in the website are not rendered.
This is a screen-shoot of how the site should be rendered, the green lines are because I've enabled the "Composited render layer borders" on chrome://flags:
And this is how it get rendered when the issue happens:
This white squares appear randomly and they can disappear or reappear in another place if the scroll the website. I also noticed that this problem is more common in lower-end computers so I my guess is that somehow Chrome is running out of GPU memory.
Why this problem happens? and is the any workaround for it (besides disabling the 3d CSS)?
In case it helps, this is the website:
http://colocation.cubo.cc/cheetos/masterbrand/
Update:
I raised a issue for the Chrome team.
I couldn't reproduce this problem in the Chrome Canary.
It was a Chrome Issue, and its fixed now:
http://code.google.com/p/chromium/issues/detail?id=121779
I can only congratulate the Chrome team for pushing bugfixes so fast, I wish IE was like this.