1.6 seems like a good update that fixed a number of issues, but it dropped my Google page speed score by 20 points immediately- it appears that the practice of resizing images dynamically is considered very bad practice to Google (and they are the ones that really matter) so how can I get the theme to actually display the portfolio images in a native size rather than doing it with a resize in the browser?
Install 1.6 Update and Page Speed score drops by 20 points!
9 posts from 2 voices- Started 2 months ago by rlmilton
- Latest reply from Devin
- This topic is closed
- This topic is not a support question
-
Devin
ModeratorHi rlmilton,
Nothing was changed in that regard with 1.6 actually. The only time the theme re-sizes images is for column in portfolios and such. In those cases, if you have a specific column width that you are using across the whole site you could change the portfolio image size in functions.php to fit exactly that specific column width instead of using the largest (2 column) and shrinking down.
Regards,
Devin
Posted 2 months ago # -
Devin
ModeratorActually, now that I re-think it that wouldn't really work because the larger image is still needed for the responsive layout. As far as I know there isn't anything that can be done. The theme needs to use image size that is larger than the actual column width so that it keeps everything looking good.
I really don't know why the speed score would drop 20 points like that because there was no change at all to how that is handled in the most recent updates. Its been the exact same way since the initial release.
Posted 2 months ago # -
Well, I think it is pretty clear that it is the image being resized. Probably bad practice for the design to work this way in terms of these scores - the Page Speed overview indicates only one "High Priority" issue on the site (I have already implemented extensive server and browser caching as well as minifying JS, HTML and CSS) - the one issue Google indicates is "Serve Scaled Images"
Here is the list:
Serve scaled images
Properly sizing images can save many bytes of data.
Suggestions for this page
The following images are resized in HTML or CSS. Serving scaled images could save 678.6KiB (71% reduction).
http://visionhouse.pro/.../Screen-Shot-2012-10-18-at-11.14.25-AM... is resized in HTML or CSS from 465x346 to 231x172. Serving a scaled image could save 193KiB (75% reduction).
http://visionhouse.pro/.../Screen-Shot-2012-10-18-at-11.48.10-AM... is resized in HTML or CSS from 465x346 to 231x172. Serving a scaled image could save 190.9KiB (75% reduction).
http://visionhouse.pro/.../Explainer-Video-with-3D-animation1-46... is resized in HTML or CSS from 465x346 to 231x172. Serving a scaled image could save 76.9KiB (75% reduction).
http://visionhouse.pro/.../Screen-Shot-2012-10-17-at-6.01.15-PM-... is resized in HTML or CSS from 465x346 to 231x172. Serving a scaled image could save 30.4KiB (75% reduction).
http://visionhouse.pro/.../ccdi-465x346.jpg is resized in HTML or CSS from 465x346 to 231x172. Serving a scaled image could save 28.3KiB (75% reduction).
http://visionhouse.pro/.../Screen-Shot-2012-02-02-at-8.31.51-PM-... is resized in HTML or CSS from 465x346 to 231x172. Serving a scaled image could save 25KiB (75% reduction).
http://visionhouse.pro/.../4900_JuiceDrop-465x346.jpg is resized in HTML or CSS from 465x346 to 283x211. Serving a scaled image could save 22.2KiB (62% reduction).
http://visionhouse.pro/.../Screen-Shot-2012-02-01-at-10.26.32-PM... is resized in HTML or CSS from 465x346 to 231x172. Serving a scaled image could save 20.5KiB (75% reduction).
http://visionhouse.pro/.../BlogPostPromoteSEO3-465x346.jpg is resized in HTML or CSS from 465x346 to 283x211. Serving a scaled image could save 20KiB (62% reduction).
http://visionhouse.pro/.../Logo2010blk_06ref1.png is resized in HTML or CSS from 576x121 to 284x59. Serving a scaled image could save 19.3KiB (75% reduction).
http://visionhouse.pro/.../Screen-Shot-2012-02-02-at-7.35.39-PM-... is resized in HTML or CSS from 465x346 to 231x172. Serving a scaled image could save 16.5KiB (75% reduction).
http://visionhousestudio.com/.../Logo2010blk_06ref1.png is resized in HTML or CSS from 576x121 to 350x73. Serving a scaled image could save 16.1KiB (63% reduction).
http://visionhouse.pro/.../logo-overlay_03.png is resized in HTML or CSS from 192x160 to 160x133. Serving a scaled image could save 15.3KiB (31% reduction).
http://a0.twimg.com/.../LukeMilton_normal.jpg is resized in HTML or CSS from 48x48 to 36x36. Serving a scaled image could save 3.4KiB (44% reduction).
http://b.vimeocdn.com/ps/325/203/3252037_75.jpg is resized in HTML or CSS from 75x75 to 60x60. Serving a scaled image could save 763B (37% reduction).Posted 2 months ago # -
Devin
ModeratorIt may be bad practice for trying to get a faster page load, but unless you want your mobile viewers to see stretched and pixelated images, the larger thumbnails have to be loaded in.
Otherwise, you would need to do a page refresh to call in the other size of images for the mobile users. This effect is done throughout all of Kriesi's themes and is pretty much the standard for any theme that is responsive.
Take a look at what is to be considered the gold standard for proper wordpress technique and you will see the same design and code in use: http://twentythirteendemo.wordpress.com/
Regards,
Devin
Posted 2 months ago # -
Yes, I think this is all evolving... I know a similar issue comes into play when trying to prepare a site for Retina displays. One method uses scaled images for regular resolution displays and then the native size image for HiDPI. Another (better) method uses a script to load the actual size that is required based on the user agent rather than scaling. I guess that approach could be adopted someday, but it would really only be a mobile version and not truly responsive.
Thanks for the help.
Posted 2 months ago # -
Devin
ModeratorJust remember google page score and really all of its web dev tools, while great, are not to be considered infallible. By its very nature, web technology can not be consistently scored using a single scale.
The fact that html5 was so widely in use before becoming official is a great testament to the validity of these kinds of things.
As far as this specific issue, it will probbaly not be changed for Angular. In a future theme, who knows, but for now Kriesi will most likely not being going backwards and revising the code for how portfolios and slideshows are constructed.
Regards,
Devin
Posted 2 months ago #
Topic Closed
This topic has been closed to new replies.
Create a new thread and tell me what problems you are encountering and what you want to know. 
There is no step 3 :) 
