Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 months ago.
Improve this question
At present,97 URLs are affected by CLS issue more than 0.25 (desktop) and
85 URLs affected by LCP issue: longer than 4s (mobile) on our website.
Website - www.sopact.com to look into it.
How can we fix these issues?
Thank you in advance.
Run some of the affected pages in Page Speed Insights. Select desktop as that is your biggest problem area. The tool has a "Show audits relevant to" option where you can select CLS. The report will then show only issues related to causing Layout Shifts on desktop devices.
Expand each issue to get more details on what is causing the issue and sometimes what to do to fix it.
If you want to dig deeper the Chrome browsers Performance tool can provide a lot of details. It also lets you throttle your browser so you can more easily see the layout shifts happening.
If you enable screenshots you can hover along the screenshot row to see how the page changes as it loads. Make sure you start hovering at the point the new page is loading as the initial part shows the previous page before it is replaced.
I have the feeling in your case you have elements that are off screen expanding your main div as they load, and causing it to shift. The Page Speed Insights lists some element that could be adjusted so that they don't expand the div as the load. e.g. define their height in advance.
There is a page test tool which tells you more about your CLS rating:
https://www.webpagetest.org/
I am not sure if this tool is somehow related to Google, but in my case it outputs the same CLS rating.
If you have a close look you will recognize that this tool is not able to do parallel loading. And I assume this is same for the module which Search Console uses. Real world browsers load files in parallel which shortens loading times drastically. This one does not - so you get loading times of several seconds for bigger pages. Well, fonts are loaded after CSS and images. In my case the delayed loading of fonts (several seconds later) caused the problem.
To improve the loading time in a sequential environment you can use certain preload technologies.
<link rel="preload" href="/fonts/anyfont.woff2" as="font" crossorigin />
The tag above will advice the browser (and Google's tool) to load the font upfront. When it is loaded in your CSS later, it will already be available in the cache.
Related
URL: tinyurl.com/36utmdnc
In Google Search Console, I am seeing thousands of errors for Core Web Vitals, particularly the CLS in Desktop mode. I've made a number of changes, such as removing all ads, tweaking the CSS, HTML and other code. I've been making changes for a year actually, but I've really tried tackling this problem over the past 2-3 months, since "Page Experience" is showing a big reduction in "good URLs" and I believe it's now affecting my traffic volume from Google Search. It's been weeks now and the CLS is not changing in Search Console. I've tried validating for a couple of months now.
The example URL above (a product page) has a CLS score of 0.33 according to Google Search Console / Core Web Vitals. It seems all of the errors are on my product pages like the example above. I've ran tests in PageSpeed Insights, which shows a CLS of "0". I understand the reports shown in Google Search Console are from "Chrome User Experience report", which is different than PageSpeed Insights "lab setting".
Here are things I've done:
Opened Chrome Developer Tools and clicked the checkbox for "Layout Shift Regions", which flash blue during a layout shift. Also checked the "Core Web Vitals" to enable to overlay that adds up CLS throughout the entire browsing experience.
Opened the Network Tab and throttled the speed down to "very slow tests" and carefully watched for layout shifts while the page loads slowly.
Carefully read the guides on web.dev/cls/ , ran Chrome's LightHouse test, ran tests on various sites like webvitals.dev/cls , defaced.dev/tools/layout-shift-gif-generator/ , webpagetest.org/webvitals, etc.
Manually tested using different screen resolution widths/heights using Chrome Developer Tools (800px width, 1400px width, 8000px height, etc).
Asked tech-savvy friends/users to also check and help identify the CLS.
I can't find anything that could cause a large CLS of 0.33. The number of CLS errors in Search Console is staying steady, going up and down by about 100 URLs every day, but the same example URL above has been stuck there for months. So I was hoping someone with knowledge could find it or identify the underlying issue.
Thanks
I cannot see a CLS score of 0.33 for that page, and agree that testing it myself shows very little CLS.
You are correct that PageSpeed Insights is lab-based, but it also shows the field-based data at the top, and in this case it is saying it does not have enough field-based data for this URL and so is displaying the origin-level data for all the pages for your site.
Google Search Console also shows field-based data, but groups pages it thinks might be similar and gives them all the same CLS scores. This is done at a bit more lower-level grouping than the whole origin so it may group all your product pages together for example, if it has data for some of them.
This page for example has a hover effect that gives a huge CLS when it's used - though can't quite see why as finding it difficult to trigger manually in dev tools.
It is possible those pages are the ones with the actual CLS issue and they are being lumped in with your good page under the product pages group. I would investigate if you can reduce the CLS on that hover effect.
Separately, I notice you are lazy loading your images but not specifying width and height on them. This can lead CLS if the images are not loaded by the time that area scrolls into view for example this test when linking to a bit at the bottom of the page. It is recommended to always include image dimensions on lazy-loaded images (and in fact on all images!) to avoid this. This could be another reason for your high CLS, which is not as evident in lab-based tools that typically only load the top of the page without lazy-loaded content.
I also recommend you read the Debugging Web Vitals in the Field and also the more advanced Measure and debug performance with Google Analytics 4 and BigQuery for additional information as to how to answer why your field-based metrics may be different than what you can observe.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I am trying to use SelectPDF.ConvertURL() on my local machine. When I run this convert I get a PDF that has sizing issues with checkboxes. Checkboxes are too large and not appearing as they appear in the HTML Page
BUT when I go to the http://selectpdf.com/demo/html-to-pdf-converter.aspx and give it the URL for my HTML test document it renders correctly. URL for document is: http://dev.TitleClose.com/BlankLoanEstimate.html
I am using the exact code that is given on the selectpdf.com/demo page.
Any ideas or advice is appreciated
You might need to set a different web page width. Try this sample:
http://selectpdf.com/demo/convert-url-to-pdf.aspx
For an A4 page, the corresponding web page width (to keep the font size) is 793px. More details about the content resizing here:
http://selectpdf.com/docs/ResizingContentDuringConversion.htm
add in your CSS #mediaprint the sames propierties that you have in you css. that's work for me.
#media print {
…
}
I have a very large (as in feature-rich) responsive website. It consists of over 150 different UI pages, and so far both rendering and performance on mobile are fine (I'm using an iPhone5 to test, and occasionally other devices).
Except for one page, which I am coding now. Here's the temporary dev URL:
http://www.jungledragon.org/apps/jd3/daylight
On Mobile Safari, this page performance extremely poorly:
- It takes several seconds to load, much slower than all other pages
- Once loaded, a touch scroll can take 5-10 secs to do anything
- Mobile Safari as a whole becomes non responding or close to it
I'm trying to troubleshoot the root cause of the issue, but no luck so far. I cannot reproduce this on any desktop browser using a small viewport, not even on desktop Safari. On the desktop, I've inspected several web debuggers to check for any long-running processes, but found none.
Some explanation on what the page does:
It will try to detect your current location (using alerts I discovered this takes little time)
Based on your current location and the current date, it will calculate the sun times for the day. This too is nearly instant
Based on the suntimes, it will dynamically generate a table, and then finally show it on screen
Here's the what I am seeing in detail on mobile Safari:
The server response is fine, the page loads quickly and shows the site header soon
Next, the content body is blank and stays blank for several seconds (which I cannot explain)
Finally, the suntimes table renders.
This completes the page, yet as of this point, the page as well as the browser are extremely sluggish, scrolling takes forever, and Safari controls are nearly irresponsive. It looks and feels as if the browser can crash any moment.
Based on my research so far, and given fine performance in all other pages on the site, I'm totally in the dark on what causes this.
Edit: Using BrowserStack I did some more tests:
iPhone 4S: no issues
iPhone 5S: no issues
Galaxy SII: no issues
HTC One X: no issues
iPhone 5: same issue as above
So I'm not seeing the issue on any desktop browser, and on no mobile device except for the iPhone 5 (iOS7).
Edit2: adding more findings and explanation based on comments received:
The issue does not seem animation-related. For this I have a number of proof points. A simple proof point is the page does not do any visual rendering that is much different from any of the other 100+ pages on the site which have no performance issue.
The 2nd proof point can be explained by understanding what is going on in this specific page. What happens is this:
The system will detect the current user's time and location. For now assume that the user actually allows location sharing. Using a simple alert, I've been able to proof that location detection is not the bottleneck.
Based on the user's time and location, the daylight periods are calculated. This is done by using the Suncalc JS library (https://github.com/mourner/suncalc).
The Suncalc library returns an array of daylight periods for the given date and location. I render that array as a table with colored background rows. That is all.
Rendering a table with 12 rows and different background colors is not likely to cause such enormous issues. My theory therefore lies in step 2 being the root cause. The Suncalc library has a lot of advanced math in it. I am thinking (without evidence yet) that either my mobile processor is horrible at those kind of operations, and/or the specific calculation for some reason cause a peak in memory usage (or even a leak).
As an additional proof point: once the page is loaded on mobile, use the right arrow next to the date to navigate to "tomorrow". Again you will see the extremely bad performance. During that step, there is no network activity, no location detection, nothing, just calculations and some very simple rendering. This validates my theory that perhaps the issue lies in the calculation.
Sadly, it looks like native Javascript profilers on that platform are non-existent. You may also want to try the Javascript Microtime function referenced in this answer. You will need to seed your script with calls at points where you think the bottleneck might be.
Just ran this through Chrome remote debugger (https://developers.google.com/chrome-developer-tools/docs/remote-debugging) on my S3, and it looks like Modernizr's cancelZoom function (showing up in jd3_0006.js) is getting called recursively too many times or by too broad a selector. I've uploaded the profiles into dropbox: https://www.dropbox.com/s/kubxk44smm6qqkx/jungledragon_debug..zip
You can import them into Chrome's debugger on the "Profiles" tab.
I believe your performance problem centers around the use of navigator.geolocation.getCurrentPosition() in your runMap() function
if (urlDate != null) {
urlPos(latitude,longitude);
} else {
if (navigator.geolocation) {
$(".img-loading").show(100);
navigator.geolocation.getCurrentPosition(successPos, errorPos{maximumAge:600000,timeout:10000});
} else {
errorPos('');
}
}
Consider using watchPosition() instead with a callback which will not halt processing of the script thread. You can cancel the watchPostion() update by using clearWatch()
So I've played with this some more, and ran the "Timeline" feature on Chrome (load this file into your chrome timeline tool: https://www.dropbox.com/s/2vpl6z1ntuk3aqj/TimelineRawData-20140328T105820.json), and it looks like this might be your main problem.
Your scripts and libs (including loading Google Maps and jQuery) are getting evaluated AFTER parsing the HTML and running Google Analytics because they are at the bottom of the body, not head. Unless you have a very good reason to do that, I would recommend moving those to the head.
There seems to be a separate problem with scrolling, but perhaps it will be resolved by this change.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
Can anybody help me that how can i set PRINT and save as PDF icon(functionality) in TYPO3 pages ?
Thanks...in advance..
There are many examples in Google and I think that you should browse them, to find the one the best fits your needs.
In general 'historically' print version was suggested to be build with new PAGE cObject which typeNum is set to 98 (of course that's only suggestion) in general going this clue, you should find many examples and other resources by searching in Google for typo3 typeNum 98.
When you'll create alternative PAGE object (and maybe also use modified template for it) you need also add on your webpage a link which be the same as the current URL but with additional param &type=98, when user will click it TYPO3 will open the alternative version of the page. So you can add to this a JS in header which will also start system's print dialog.
You can also search the extensions repository and find something for placing the print button if you are unfamiliar with TypoScript.
PDF rendering is similar from point of view of the frontend, however most probably you need to use some additional lib, so it will be best to search for ready to use solution from the repo.
In general PDF version could be tricky, therefore from my experience I can say that nowadays it's sometimes better to avoid the PDF icon at all or use linking to some external service. Of course all depends on your needs. Remember that there are many programs which are able to create PDF's so if it is not required maybe it's no worth of its effort.
Finally take a look at the AddThis widget it can be also used for easy adding of icons for printing and online PDF creation, additionally you can also send invitations via e-mail, or even share the link on the hundreds social portals. And what's most important installing this is just like adding view lines of HTML code vie TypoScript.
I have a problem regarding fixed positioning that works on desktop(as expected), but doesn't work in any of the responsive testing tools in which i tested.
The site in question is this one: http://www.claytoncheung.com/
The problem is with menu div, it is set to position:fixed. Please don't ask why it is not set to absolute, i will only say that it can only be set to position:fixed. The reason is the limitations of the CMS that i use, i lost two days on various jQuery solutions to insert the menu dynamicaly, but unfortunately due to limitations in CMS none of these solutions worked.
The problem is that it is a multi language site, and the menu is not an ordinary one, since it is a one page site, so i am left with position fixed.
I tested the site in these tools:
http://www.responsinator.com/
http://mattkersley.com/responsive/
http://iphonetester.com/ and many more, but in all of them the menu doesn't take fixed position relative to the viewport, but to the parent element.
Please if anyone would take a look at the site to see how it should be and then try some of these tools to see the problem, or even better to check live on iPhone, which unfortunately i can't do.
If anyone could close this question, the problem was with my media queries, not with position fixed. After two days it just came to mind this moment.