Image optimization on mobile

  • Resolved alx359

    (@alx359)


    4 years ago

    PageSpeed (PS) gains are massive thanks to PP! But PS is still complaining about some images, especially affecting the mobile score, which says aren’t being lazy-loaded nor resized properly. The phast prefix /phast.php?service... is in there, so not sure what may be so much different with those images.

    Here’s a screenshot of that test.

    Anyway, noticed that some of those single-out images are thumbnails loaded as backgrounds:

    <div style="background: url(https://www.domain.com/wp-content/plugins/phastpress/phast.php?service=images&src=https%3A%2F%2Fwww.domain.com%2Fwp-content%2Fuploads%2Fim-item-customer-2018-150x150.jpg&cacheMarker=1597860352-14553&token=727abd7e774e5d9c); border:0;" class="badge-inner bg-fill">
</div>

    *

    In an unrelated note, wouldn’t it be meaningful to make the phast.php references a little bit shorter? IMHO, for an image-heavy adaptive site (Flatsome-themed), getting the whole path repeated over and over is just adding more gratuitous bulk to the HTML, and despite of GZIP mitigation, memory consumption still increases at the end points, especially sensible for weaker devices like phones.

    For example, instead of getting a mouthful like this for one image (1814 symbols):
    <img src="https://www.domain.com/wp-content/plugins/phastpress/phast.php?service=images&src=https%3A%2F%2Fwww.domain.com%2Fwp-content%2Fuploads%2Fa4-madonna-and-child-y18-510x726.jpg&cacheMarker=1597860366-203043&token=0d6935f2e4ed8e91" data-src="https://www.domain.com/wp-content/plugins/phastpress/phast.php?service=images&src=https%3A%2F%2Fwww.domain.com%2Fwp-content%2Fuploads%2Fa4-image-y18.jpg&cacheMarker=1597860352-260420&token=27bc7f1f2fbc7d5b" data-large_image="https://www.domain.com/wp-content/plugins/phastpress/phast.php?service=images&src=https%3A%2F%2Fwww.domain.com%2Fwp-content%2Fuploads%2Fa4-image-y18.jpg&cacheMarker=1597860352-260420&token=27bc7f1f2fbc7d5b" srcset="https://www.domain.com/wp-content/plugins/phastpress/phast.php?service=images&src=https%3A%2F%2Fwww.domain.com%2Fwp-content%2Fuploads%2Fa4-image-y18-510x726.jpg&cacheMarker=1597860366-203043&token=0d6935f2e4ed8e91 510w, https://www.domain.com/wp-content/plugins/phastpress/phast.php?service=images&src=https%3A%2F%2Fwww.domain.com%2Fwp-content%2Fuploads%2Fa4-image-y18-211x300.jpg&cacheMarker=1597860373-37286&token=188b716888b60974 211w, https://www.domain.com/wp-content/plugins/phastpress/phast.php?service=images&src=https%3A%2F%2Fwww.domain.com%2Fwp-content%2Fuploads%2Fa4-image-y18-351x500.jpg&cacheMarker=1597860366-99860&token=3357053f773a7774 351w, https://www.domain.com/wp-content/plugins/phastpress/phast.php?service=images&src=https%3A%2F%2Fwww.domain.com%2Fwp-content%2Fuploads%2Fa4-image-y18.jpg&cacheMarker=1597860352-260420&token=27bc7f1f2fbc7d5b 700w" class="wp-post-image skip-lazy" alt="a4 image y18 ~ domain" loading="lazy" title="a4 image y18" data-caption="a4 image y18 ~ domain" data-large_image_width="700" data-large_image_height="996" sizes="(max-width: 510px) 100vw, 510px" width="510" height="726">

    Perhaps getting something a little bit leaner, like this (1473 symbols):
    <img src="https://www.domain.com/wp-content/phast.php?service=images&src=%2Fwp-content%2Fuploads%2Fa4-image-y18-510x726.jpg&cacheMarker=1597860366-203043&token=0d6935f2e4ed8e91" data-src="https://www.domain.com/wp-content/phast.php?service=images&src=%2Fwp-content%2Fuploads%2Fa4-image-y18.jpg&cacheMarker=1597860352-260420&token=27bc7f1f2fbc7d5b" data-large_image="https://www.domain.com/wp-content/phast.php?service=images&src=%2Fwp-content%2Fuploads%2Fa4-image-y18.jpg&cacheMarker=1597860352-260420&token=27bc7f1f2fbc7d5b" srcset="https://www.domain.com/wp-content/phast.php?service=images&src=%2Fwp-content%2Fuploads%2Fa4-image-y18-510x726.jpg&cacheMarker=1597860366-203043&token=0d6935f2e4ed8e91 510w, https://www.domain.com/wp-content/phast.php?service=images&src=%2Fwp-content%2Fuploads%2Fa4-image-y18-211x300.jpg&cacheMarker=1597860373-37286&token=188b716888b60974 211w, https://www.domain.com/wp-content/phast.php?service=images&src=%2Fwp-content%2Fuploads%2Fa4-image-y18-351x500.jpg&cacheMarker=1597860366-99860&token=3357053f773a7774 351w, https://www.domain.com/wp-content/phast.php?service=images&src=%2Fwp-content%2Fuploads%2Fa4-image-y18.jpg&cacheMarker=1597860352-260420&token=27bc7f1f2fbc7d5b 700w" class="wp-post-image skip-lazy" alt="a4 image y18 ~ domain" loading="lazy" title="a4 image y18" data-caption="a4 image y18 ~ domain" data-large_image_width="700" data-large_image_height="996" sizes="(max-width: 510px) 100vw, 510px" width="510" height="726">

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Albert Peschar

    (@kiboit)

    Hi @alx359,

    The issue is that this background image is not lazy loaded like other images, because PhastPress does not support lazy loading for background images (yet). For background images in inline styles this is not too difficult to implement, so I might have a go at that in the next few months. For now, I would suggest either manually making this image lazy loading, using an <IMG> tag instead, or ignoring the issue for now.

    Regarding shorter URLs: I see your point. I don’t think that a difference of a few bytes in URL length will have a measurable impact on performance, even on mobile devices. It is on my to-do list to make it possible to optimize images without changing the URL.

    –Albert

    Thread Starter alx359

    (@alx359)

    Hi Albert,

    Noticed two different image optimization syntaxes applied on the same image, but on differently configured websites (i.e. WAMP on localhost, and live on ubuntu+CloudFlare). Why’s so?

    For example:
    localhost:
    <img data-src="https://www.domain.com/wp-content/plugins/phastpress/phast.php/c2VydmljZT1pbWFnZXMmc3JjPWh0dHBzJTNBJTJGJTJGd3d3LmV2aXRhd29ya3MuY29tJTJGd3AtY29udGVudCUyRnVwbG9hZHMlMkZhNC1tYWRvbm5hLWFuZC1jaGlsZC15MThfX2ZyLTI0N3gyOTYuanBnJmNhY2hlTWFya2VyPTE2MTI0NjMxODItMjcyMjUmdG9rZW49Y2Q4YzJjNWY2NGY4MTQxYg.q.jpg" src="https://www.domain.com/wp-content/plugins/phastpress/phast.php/c2VydmljZT1pbWFnZXMmc3JjPWh0dHBzJTNBJTJGJTJGd3d3LmV2aXRhd29ya3MuY29tJTJGd3AtY29udGVudCUyRnVwbG9hZHMlMkZhNC1tYWRvbm5hLWFuZC1jaGlsZC15MThfX2ZyLTI0N3gyOTYuanBnJmNhY2hlTWFya2VyPTE2MTI0NjMxODItMjcyMjUmdG9rZW49Y2Q4YzJjNWY2NGY4MTQxYg.q.jpg" class="show-on-hover absolute fill hide-for-small back-image lazy-load-active" alt="image fr ~ domain" loading="lazy" width="247" height="296">

    live:
    <img data-src="https://www.domain.com/wp-content/plugins/phastpress/phast.php?service=images&src=https%3A%2F%2Fwww.domain.com%2Fwp-content%2Fuploads%2Fimage__fr-247x296.jpg&cacheMarker=1597860373-27225&token=efd1bac1274d8c53" src="https://www.domain.com/wp-content/plugins/phastpress/phast.php?service=images&src=https%3A%2F%2Fwww.domain.com%2Fwp-content%2Fuploads%2Fimage__fr-247x296.jpg&cacheMarker=1597860373-27225&token=efd1bac1274d8c53" class="show-on-hover absolute fill hide-for-small back-image lazy-load-active" alt="image fr ~ domain" loading="lazy" width="247" height="296">

    Thanks.

    Thread Starter alx359

    (@alx359)

    Nevermind, sorry. Skimmed through the forums and found the post about PATH_INFO and Remove query string from processed resources=ON that enables the former syntax with no query strings /script.php/some/data/here.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Image optimization on mobile’ is closed to new replies.