Image rendering problem

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 7 years, 10 months ago by Jan Dembowski.

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?

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

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

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;
?>