Image rendering problem

  • Resolved gbengalex

    (@gbengalex)


    9 years, 5 months ago

    From the day when I installed abovethefold plugin I noticed that frequently when a user hits my homepage they see content texts but not the post thumbnail images or the video frame images. Often you have to refresh/clear browser once or more times for the images to render. Naturally this has increased my bounce rate. I have disabled third-party plugins one-by-one to isolate the culprit and only when I disabled abovethefold is the issue resolved. It is a great plugin but is this a known issue and is there a solution, maybe in the settings?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author optimalisatie

    (@optimalisatie)

    9 years, 5 months ago

    Hi gbengalex,

    I am suspecting that the problem is related to critical CSS (is the problem visible in the quality test?) or by a (complex) javascript render problem. It would be best to first check the critical CSS as that would cost less time.

    The problem with async loading javascript is the following: when loading scripts async the moment of execution will differ per visitor, sometimes the download is fast and the execution is before the HTML is completely loaded, sometimes the execution is after the HTML (and other scripts) are loaded. In this complex situation problems and conflicts may occur.

    Most problems can be solved by reducing complexity. For example, when scripts are combined into 1 file there is less risk of conflicts between scripts. If there is a problem with the moment of script execution it is possible to use a dom-ready callback (for example jQuery(function($){ ... });) to control the moment of execution.

    Some scripts may not be async compatible by default, for example many Google API scripts such as Google Maps and Google AdSense do not support async loading. In that case the script could be excluded from the javascript load optimization or modified to support async loading. For example, Google offers an async version for Google AdSense:

    https://support.google.com/adsense/answer/3221666?hl=en

    I hope that this information is helpful!

    If you find a solution we appreciate it if you share it in this topic.

    [ Signature moderated ]

    • This reply was modified 9 years, 5 months ago by Jan Dembowski.
    Thread Starter gbengalex

    (@gbengalex)

    9 years, 5 months ago

    Thank you Jan. I did not activate critical css because when I visited https://jonassebastianohlsson.com/criticalpathcssgenerator/ and got to Step 2 (FULL CSS TO EXTRACT CRITICAL CSS FROM) I had no idea which css file on my site is to be copied in there. Please any idea what Step 2 is asking for?

    Thread Starter gbengalex

    (@gbengalex)

    9 years, 5 months ago

    I figured it out … but now the criticalcss.com server is down and throwing errors. Will keep trying and update.

    Thread Starter gbengalex

    (@gbengalex)

    9 years, 5 months ago

    I added critical css but saw no difference at all in speed and performance

    Thread Starter gbengalex

    (@gbengalex)

    9 years, 5 months ago

    I got the full css and then minified it on cssminifier.com into the following. Is that it?

    <?php
    // setup the URL, the CSS and the form data
    $url = ‘https://cssminifier.com/raw&#8217;;
    $css = file_get_contents(‘./public/s/css/style.css’);
    $data = array(
    ‘input’ => $css,
    );

    // init the request, set some info, send it and finally close it
    $ch = curl_init($url);

    curl_setopt($ch, CURLOPT_POST, 1);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

    $minified = curl_exec($ch);

    curl_close($ch);

    // output the $minified
    echo $minified;
    ?>

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Image rendering problem’ is closed to new replies.