Connection error because of CGSmartImage?

Gregor · Post by **Gregor** » Sun Feb 25, 2018 7:21 am

I've been working on the performance of my site http://www.uisge-beatha.eu the past weeks and noticed the first line of the 'file request' drill down was showing a connection error, and the first line did not show a return code and the second, however no furter explaination, beside I saw some cookie placed. The second line shows the same url and aretun code:200. I did the tests at Pingdom, and the result is shown in this link https://tools.pingdom.com/#!/da6TJo/htt ... beatha.eu/ I ticked the first line of the drill down and this is what the report showed"

Response Headers-1
DateSun, 25 Feb 2018 06:41:27 GMTContent-EncodinggzipX-Content-Type-OptionsnosniffX-Powered-ByPHP/7.0.27Transfer-EncodingchunkedConnectionkeep-aliveX-XSS-Protection1; mode=blockServercloudflareX-Frame-OptionsSAMEORIGINExpect-CTmax-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-c ... etext/html; charset=utf-8Access-Control-Allow-Origin*Cache-Controlpublic, max-age=3600 max-age=300, private, must-revalidateSet-Cookie__cfduid=dc3a05b60fc46023e4a7a672330795e2f1519540885; expires=Mon, 25-Feb-19 06:41:25 GMT; path=/; domain=.uisge-beatha.eu; HttpOnly CMSSESSIDe59408d4bf27=lebuhrq5t6r5hko8upisfq0304; path=/CF-RAY3f28adc3bea36dcc-SJCExpiresSun, 25 Feb 2018 07:41:26 GMT
Request Headers
Pragmano-cacheAccept-Encodinggzip, deflate, sdchHostwww.uisge-beatha.euAccept-Languageen-US,en;q=0.8User-AgentMozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36Accepttext/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8Cache-Controlno-cacheConnectionkeep-alive

I was expecting it had something to do with the server where my site is running. Had a long mail discussion with my hosting party, however they where not able to locate any issues on their end, besides they noticed a connection error and roughly 2 seconds wait time. To drill down the root cause, I checked a site of one of the forum member who happen to be hosting his site at the same hoster, and did not see a connection error. So it must be somewhere on my site.

After starting with a blank template, downloaded via cmsmadesimple, so it was not related to the design of my site, I noticed there was no 'connection error' and also the first line directly returned with a '200'. Here you find the result https://tools.pingdom.com/#!/d0dyu0/htt ... .eu/test-2

So it must be in my template. As a start I set the original template as active for the page, and removed all templates called from the main template. Although the page looked not as designed, there was no connection error. After that started to bring back the templates one by one and finally I could relate the CGSmartImage-tag to the connection error, to be precise this line of code:

Code: Select all

{CGSmartImage action=responsive}

The following url shows the result with the line of code being active https://tools.pingdom.com/#!/bPWnKq/htt ... .eu/test-2 (connection error) and this url with the line of code marked out https://tools.pingdom.com/#!/ccJtpG/htt ... .eu/test-2 {no connection error). It still same seconds 'wait time' I can't explain, however it shows a better performance.

The part of the head containing that line of code looks as follows:

Code: Select all

{$page_description = $page_description|default:"{$capturedcontent|strip_tags:false|strip|truncate:300|default:''}" scope=global}
    {$last_modified = $last_modified|default:"{modified_date format='%e-%m-%Y'}" scope=global}
    {$page_modified = $page_modified|default:"{modified_date format='%e-%m-%Y'}" scope=global}
    {$page_image = $page_image|default:"{$theme_url}/Main_Image_Uisge-Beatha.jpg" scope=global}
    {$page_title = $page_title|default:"{title}" scope=global}
	{* end copy *}
{/strip}
<!DOCTYPE html>
<__html lang="{$page_lang}">
  <head>
    {CGSmartImage action=responsive}
    {metadata|strip}
    {strip}
    {include file='cms_template:Google_Tagmanager_Head'}

The setting for CGSmartImage are:
Calguys Smart Image Toolkit -> Responsive -> Enable Responsive Images: yes
Calguys Smart Image Toolkit -> Responsive -> Assume responsive cookie enabled: yes

The system info:

----------------------------------------------
Cms Version: 2.2.6
Installed Modules:
AceEditor2: 1.05
AdminSearch: 1.0.4
AkismetCheck: 0.2.1
CGBlog: 1.15.5
CGExtensions: 1.60
CGExtensions: 1.60
CGFBApp: 1.0.9
CGFeedback: 2.1.1
CGSimpleSmarty: 2.1.8
CGSmartImage: 1.22.2
CMSContentManager: 1.1.6
CMSMailer: 6.2.14
Captcha: 0.5.5
CmsJobManager: 0.1.2
Comments: 1.9.2
DesignManager: 1.1.4
FileManager: 1.6.5
FilePicker: 1.0.2
FormBuilder: 0.8.1.6
Gallery: 2.3.2
Gbook: 2.2.6
HitCounter: 2.1.2
JQueryTools: 1.4.0.3
LinkMgr: 2.2
MenuManager: 1.50.3
MicroTiny: 2.2.2
ModuleManager: 2.1.3
Navigator: 1.0.8
News: 2.51.3
Printing: 1.1.2
Search: 1.51.3
SitemapMgr: 1.5.3
ThemeManager: 1.1.8

Config Information:
php_memory_limit: 128000000
max_upload_size: 1000000000
url_rewriting: mod_rewrite
page_extension:
query_var: page
auto_alias_content: true
locale:
set_names: true
timezone: Europe/Amsterdam
permissive_smarty: true

Php Information:
phpversion: 7.0.27
md5_function: On (True)
json_function: On (True)
gd_version: 2
tempnam_function: On (True)
magic_quotes_runtime: Off (False)
E_ALL: 32767
E_STRICT: 2048
E_DEPRECATED: 8192
test_file_timedifference: No time difference found
test_db_timedifference: No time difference found
create_dir_and_file: 1
memory_limit: 128000000
max_execution_time: 300
register_globals: Off (False)
output_buffering: 4096
disable_functions:
open_basedir:
test_remote_url: Success
file_uploads: On (True)
post_max_size: 1024M
upload_max_filesize: 1G
session_save_path: /tmp (0700)
session_use_cookies: On (True)
xml_function: On (True)
xmlreader_class: On (True)
check_ini_set: On (True)
curl: On

Performance Information:
allow_browser_cache: On (True)
browser_cache_expiry: 60
php_opcache: On (True)
smarty_cache: Off (False)
smarty_compilecheck: Off (False)
auto_clear_cache_age: On (True)
Server Information:
Server Software: Apache
Server Api: litespeed
Server Os: Linux 3.10.0-714.10.2.lve1.4.79.el7.x86_64 On x86_64
Server Db Type: MySQL (mysqli)
Server Db Version: 10.1.24
Server Db Grants: Found a "GRANT ALL" statement that appears to be suitable

Permission Information:
tmp: /home/efacti/public_html/uisge-beatha.eu/www/tmp (0777)
tmp_cache: /home/efacti/public_html/uisge-beatha.eu/www/tmp/cache (0777)
templates_c: /home/efacti/public_html/uisge-beatha.eu/www/tmp/templates_c (0777)
modules: /home/efacti/public_html/uisge-beatha.eu/www/modules (0755)
uploads: /home/efacti/public_html/uisge-beatha.eu/www/uploads (0775)
File Creation Mask (umask): /home/efacti/public_html/uisge-beatha.eu/www/tmp/cache (0777)
config_file: 0444
----------------------------------------------

Have said this, I'm kind of stuck how to solve the connection error (including wait time) and still use the big advantages of CGSmartImage. Am I overlooking something?

Please let me know.

It makes no difference switching of the cookie assumption.

Post by **velden** » Sun Feb 25, 2018 11:17 am

Just telling a little about CGSmartImage (what I know about it) and responsive images.

CGSmartImage is a module which does server side image processing.
To determine the width and height (and dpr) of the visitors device/screen it uses a little piece of Javascript.

BUT javascript is a client side feature which is fired AFTER CGSmartImage has done it's work. Calguy solved this using a cookie and a page reload. Note this is typically done exclusively on the very first visit of the site from a specific device/browser/user

Code: Select all

Visit the site -> CGSmartImage module -> check if cookie is set ->
  - Cookie IS set -> CGSmartImage reads information about device/screen and does its magic
  - Cookie is NOT set -> piece of Javascript is inserted in the page head section (see below) -> page is served -> Javascript is executed, reads device/screen information and writes this to a cookie -> page is reloaded -> (now above steps repeat but cookie IS set)

Note that for services like pingdom it can be difficult/impossible/not implemented to accept cookies/actually run the javascript/do the reload etc etc. So it may give unexpected/unreliable results.

The piece of Javascript I found in my <head> section (again, only on the first visit when the specific cookie doesn't exist yet):

Code: Select all

<__script__ type="text/javascript">
if(document.cookie.indexOf('cc0470f3bb0bfed00dc299936b0f16a37e')<0){
  var _ex=new Date;_ex.setFullYear(_ex.getFullYear()+1);
  var _d={};
  _d.width=screen.width;
  _d.height=screen.height;
  _d.dpr=window.devicePixelRatio;
  document.cookie="cc0470f3bb0bfed00dc299936b0f16a37e="+JSON.stringify(_d)+"; expires='+_ex.toGMTString().'; path=/;";
  if(document.cookie.indexOf('cc0470f3bb0bfed00dc299936b0f16a37e')>=0){
   window.stop();
   window.location.reload();
   }
 }
</__script>

Not saying CGSmartImage is causing you troubles but it might me useful information to know about.

Gregor · Post by **Gregor** » Sun Feb 25, 2018 6:49 pm

Thanks for the update Velden. Understand the process.

By looking at the drill down of the page load, this first initialisation of the cookie takes around 3 seconds before the rest of the site starts to load. That is what triggered me.

deactivated010521 · Post by **deactivated010521** » Wed Feb 28, 2018 2:43 pm

In the past I have used CGSmartImage using the:

Code: Select all

{CGSmartImage action=responsive}

setting but was not completely statisfied with the way optimizations are handled.

You can remove CGSmartImage action = responsive and use the other (default) actions.

I have switched to the w3c compliant <picture> tag, to handle responsive images.

See:
https://responsiveimages.org/
http://scottjehl.github.io/picturefill/ (polyfill for legacy browsers).

It comes down to measuring the image width on different breakpoints and let CGSmartImage scale an image (with different width) for every breakpoint.

See also a helper UDT that can be used for automation:

https://github.com/FrontEndStudio/cmsms ... lement.php

If you have a lot of different breakpoints CGSmartImage has to do a lot of work scaling images on different sizes but this is only for the first request and a server side process so pretty fast.

Gregor · Post by **Gregor** » Wed Feb 28, 2018 4:40 pm

Thanks Arnoud.

I looked at the responsiveimages demos page, do I understand it correctly that for each size you need to have an image in place??

The photo's in my blog post resize nicely as was as the pictures in the photo album, however the header and gallery on the home page don't, and it was at these subjects I found out the responsive-tag was of no effect.

Will have a look at your UDT.

CMS Made Simple Forums

Connection error because of CGSmartImage?

Connection error because of CGSmartImage?

Re: Connection error because of CGSmartImage?

Re: Connection error because of CGSmartImage?

Re: Connection error because of CGSmartImage?

Re: Connection error because of CGSmartImage?