By Richard on Monday, 07 April 2014
Posted in General Issues
Replies 6
Likes 0
Views 1.2K
Votes 0
I am doing some final page speed checks before going live and GTMetrix for the blog page is showing Grade F (0) for 'The following images are missing width and height attributes' and the list applies to auto resized (in Blog Images section of Default theme) EasyBlog Front Page and Module images as well as the resized size of EasySocial Avatars in a Leaderboard module in the right hand column.

How can I (easily) make sure the width and height attributes are added to all auto resized images (from the initial large image I upload to EasyBlog media) and the Leaderboard module? I assumed this would be part of the auto resize process in the component, but is there something I need to do as well to fix this?

There is also a possible 13% average reduction possible by optimizing the images

It is a Purity 3 website with Bootstrap 3 running on Joomla 3.2.3 on SiteGround with Supercacher, Dynamic and Memcache, CloudFlare CDN, GZip, JCHOptimize and ETag/Expires headers/Addoutputfilterbytypedeflate in .htaccess, so all pages (including this blog page) have an A Grade speed of 90+, but I would like to remove this issue as it is one of the last problems on page load.

Any thoughts on how to fix it?
Hello Richard,

Sorry for late reply to this,
I have read the content from your post thread, it seems like you have mentioned 2 issues at above,
Can you elaborate your question with more details, and include a screen shot of what you are referring to (that was very helpful to make it more clearly)? Please advise.
·
Tuesday, 08 April 2014 00:02
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Arlex,

I have placed the site back online in case you need to see it (I am only working on access to categories in admin so will not be using the front end until tomorrow so not a problem) and have 2 screencasts and 2 images for you.

Images

1. The first image is of the settings in the default theme image area, where I use a ratio of 1.6:1 for the original image and reduce pro rata for each of the smaller sizes. It is these smaller sizes that do not have height and width attributes when auto reduced by EasyBlog from the original size of 1040x650

2. The second image shows the addition of opengraph and chat buttons at the bottom of the screen for logged in users only (from JCBConnect and JSocialChat).

Videos

There are 2 screencast videos (links in the site details area of this post).

1. The first is when logged in and is about 4 minutes long, showing the blog page with 5 reduced blog images and the EasyBlog, EasyDiscuss and EasySocial reduced images in the modules in the right hand column. The video moves to GTMetrix, showing a full recording/analysis of the blog page for a logged in user, including the list of auto reduced image files that do not have width/height attributes and are not fully compressed as well as a couple of other minor errors in files loaded to the blog page.

2. The second video is when not logged in and is slightly longer, following a similar visual route with the GTMetrix analysis showing a slightly faster load, probably due in small part to no opengraph or chat bar but more likely because the Forum Categories, Latest (Forum) Discussions and Latest (Forum) replies are not appearing in the page when not logged in. I checked the Forum page and the Classic Layout Blog categories I use do not appear when not logged in, only when logged into the site. I only noticed it during the video and thought I should mention it in this post. The GTMetrix part of the video is very similar to the logged in video and you could skip through it, although it does take a closer look at a couple of the other load issues in the Page Speed list.

It is obviously important for the auto reduced images to have width and height attributes (as well as the 'alt' description) but there is nowhere for this to be easily added in the front end and page load is affected, what does EasyBlog do in this automatic process?

One final thing, the original image is 1040x650 and larger than the main image size at the top of each blog post. I made them this size so that I could use them in a slideshow later on, but if it is a requirement for the original image to be the same size as the main blog image (so that only the smaller sizes are auto reduced) that is fine, I can upload a smaller original image to fit exactly into the width/height of the main image in the blog. I know using a bigger image than necessary can impact on load speed but wasn't sure if it mattered as EasyBlog was auto reducing them before putting them on the page.

I hope the above is helpful to you in solving the problem, if you need anything else let me know and feel free to access the site if required, details are below along with the 2 screencast videos.

I am logged into the site so you can also chat to me using the site instant chat if you are logged in and have a question.
·
Tuesday, 08 April 2014 02:18
·
0 Likes
·
0 Votes
·
0 Comments
·
Not sure if this has been missed..............?
·
Friday, 11 April 2014 00:18
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Richard,

I'm really sorry that missed up this post here,
Thanks for take your time to explain what your meaning on this, honestly i looked with your 2 video link and inside display the result, i'm no much ideas to make it to be best result.
Hope you understand.
·
Friday, 11 April 2014 01:45
·
0 Likes
·
0 Votes
·
0 Comments
·
Thank you for the reply Arlex, it seems to be more of a problem with the core EasyBlog code in relation to images, not a situation unique to my site, so I agree there is nothing you can do on my site at the moment to fix it.

The key part is this in my first post:

How can I (easily) make sure the width and height attributes are added to all auto resized images (from the initial large image I upload to EasyBlog media) and the Leaderboard module? I assumed this would be part of the auto resize process in the component, but is there something I need to do as well to fix this?


The width and height values for EasyBlog images are available in media manager and the theme admin (for reduced images) when uploaded within the EasyBlog component but are not being picked up for effective page loading with the main and resized images of Blog entries.

The alt title tag is visible on main and all resized images and obtained from the blog title for SEO, but if the core EasyBlog code allowed the actual size of resized images to be available for faster page loading it would solve this speed problem.

I can only assume this is the case from the GTMetrix analysis, perhaps the problem could be corrected in a future update?
·
Friday, 11 April 2014 02:19
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Richard,

Sorry for late reply to this,
Regarding this GTMetrix analysis result, we can't easily to make width and height attributes is showing in current system, because you can imagine when you load your Easyblog frontpage including a lot of images file, there should be need to have a proper fix to control all of them, when the browser load that time, so the browser no need to reflows and repaints again.

I'm sorry for make you inconvenience in currently, we will try to using the best way for add proper fix in the future.
·
Friday, 11 April 2014 17:58
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post