[Support request] Mobile Friendly Test – Page Loading Issues

Home Forums Support Mobile Friendly Test – Page Loading Issues

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #914884
    Andrew

    I consistently receive mobile-friendly issues in GSC:

    1. Text too small to read
    2. Clickable elements too close together
    3. content wider than screen
    4. I can revalidate in GSC and my pages always pass but then get flagged again days/weeks later.

      My Question: If they always eventually pass, can I isolate this to a page loading issue? or inconsistency in Google’s mobile-friendly tool?

      I’ve optimized my site with Autoptimize per your instructions. I’m also using Async Javascript and W3 Total Cache. Do you have any other suggestions? I’m desperate.

    #915211
    David
    Staff
    Customer Support

    Hi there,

    Having tested the site i can’t see any issues that would cause these errors.

    Google sets each site a quota for the number of requests it is ‘willing’ to make. And the error you’re seeing is generally caused when this quota is exceeded. The other factor being that requests are taking too long to complete. I am not sure how quotas are set, or whether they are variable and things like shared hosting ( on the same IP ) could effect this.

    Overall the art is to reduce the number of requests being made.

    A couple of things i noted when testing your site.

    1. Make sure you caches are clearing properly – currently you have a cached CSS file that is 404’ing. Which is eating up one of your requests.

    2. Are there things you could do without:

    For example
    a. your site loads two FontAwesome fonts for what looks to be just some social icons. Maybe an alternative plugin that only requests one or uses SVG icons.

    b. The post carousel at your footer, theres only room for 4 posts to be displayed but the other 4 off screen are still being requested. Maybe reduce the number or look for an Ajax loading carousel if you really need it. It also requests a separate font for the carousel arrows ( yeesh…) – so maybe a different plugin would serve you better.

    In GP 2.3 which is currently in Alpha phase we have made some more optimizations that will remove another 2 requests.

    Hope this helps

    #920116
    Andrew

    Thanks for the suggestions. I’ve already implemented a few of these and drastically increased my page speeds.

    What concerns me more than anything is still the font loading issue which I feel is continually producing the Text too small to read error on a continual basis. Thus, I continually fail mobile friendly tests.

    I tested the site again in GPSI and I get Ensure text remains visible during webfont load under the diagnostics section. You can see the screenshot below.

    Would solving these issues remove the continuous text too small to read error? If so, any suggestions to resolve?

    screenshot
    Screenshot

    #920430
    David
    Staff
    Customer Support

    Thats great 🙂
    So this warning: Ensure text remains visible during webfont load– Browsers whilst waiting for a font load will use a fallback font, one if its built in system fonts. But those fonts are Icons so there isn’t a real fallback for them, hence the warning. In the GP Theme 2.3 which is currently in alpha we have implemented a SVG option for our icon fonts, so one less requests and no more warning.

    Can’t do much about the FA icons unfortunately.

    If you’re consistently getting Text Too Small to read the the likelihood there is a small font on the page. So the post excerpt is only 15px, might trigger it and the read-more for the top stories is 11.2px, more than likely to trigger it. Maybe increase them to a minimum of 17px.

    #920857
    Andrew

    Thank you again for the helpful response! I targeted each of these elements using
    @media (max-width: 655px) in my CSS and set them to font-size: 1.1em. This now has all of my fonts rendering in a minimum of 15.4px.

    Do you still recommend bumping this up more to 17px? Is that Google directive?

    #920870
    David
    Staff
    Customer Support

    Google is really rather vague on this – but they use 16px in their material design as a base and there lighthouse report uses it as a benchmark

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.