Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
You are not logged in.
Pages: 1
Hello,
When I test my site on the Google Speed page, I get this recommendation:
Eliminate JavaScript and CSS codes that block the display of content above the waterline
Could someone explain to me what that means, and what I have to do to make things better?
Thank you in advance.
Philippe
Offline
Hi Philippe, it means that the pages attempt to load JavaScript and CSS before the page is displayed to the user. The page then can only be displayed once those resources are loaded.
Offline
Hi Philippe,
Don't worry too much about Google's speed advice; some of it is utterly daft, or in direct conflict with necessary practices. For an example of the latter, Google suggests loading all Javascript in the page footer rather than the head, which is fine, and it's what we usually do. But for Wordpress to work properly, jQuery typically needs to be loaded in the page's head, even if other scripts go into the footer. So this will throw a complaint from Google's test. Also, third-party plugins will frequently load scripts in the head rather than the footer, whether there's good reason to do so or not, so ...
With Backlight, we put script in the footer unless we have good reason to do otherwise.
As for loading CSS, that needs to be done in the head. Period. Whether Google's stupid test likes it or not. The head is where it belongs, and some older browsers simply need it to be there. Backlight is built primarily for modern browsers, but we're not so far gone on future-gazing that we're going to put our CSS anyplace else.
Offline
Thank you for your answers, so I will leave as it should be.
Philippe
Offline
My two cents on the results. Some of the penalties are due to design decisions that we have intentionally made.
For example, not setting cache expiry headers. This means that for each page load a call is made to the server to check that the resources have been updated. This is a lightweight check that is far faster than loading the full resources for each page load whether they had changed or not. So we're getting the bulk of the benefit of resource caching without the need to do a hard refresh or clear the browser cache to see updates. This is helpful when using Designer and especially so when using auto-refresh.
There are however other findings in the speed test that will be helpful for us to look into.
Offline
Thank you Ben for these details!
Philippe
Offline
I have found that https://gtmetrix.com/ is an excellent site to see what is going on, especially page loads, etc. It is free and I use it often. Here is a look at my site: https://gtmetrix.com/reports/garylittle.com/k6qOoVWc. It gives you quite allot of information when you go to the tabs.
Offline
Thanks for the information.
I also use GTmetrix, which I find quite a lot too.
Here is for example the result for my site:
https://gtmetrix.com/reports/phoneographie.com/T6PutDZk
Philippe
Last edited by PhilippeH (2016-11-19 01:52:44)
Offline
I have found that https://gtmetrix.com/ is an excellent site to see what is going on, especially page loads, etc. It is free and I use it often. Here is a look at my site: https://gtmetrix.com/reports/garylittle.com/k6qOoVWc. It gives you quite allot of information when you go to the tabs.
Hi Gary,
I don't see the not 'Enable gzip compression' in your statistics. Did you implement their recommendation? Thanks!
Daniel Leu | Photography
DanielLeu.com
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com
Offline
In my testing, Backlight scores highly in GTmetrix for all categories other than image sizes and caching.
I can't see any way to have LR produce the smaller images that GTmetrix creates for the 'optimized version', without reducing visual quality considerably.
Caching for static files is very much host-dependent. On Bluehost, you can improve the score by adding the following to the .htaccess file at the top of the site, and the .htaccess Backlight setting (followed by updating album files):
<IfModule mod_headers.c>
# WEEK
<FilesMatch ".(ico|gif|jpg|jpeg|png|flv|pdf|js|css|swf)$">
Header set Cache-Control "max-age=604800"
</FilesMatch>
</IfModule>Offline
I'm not at Bluehost, but the code works fine for me, thanks Ben!
On the other hand I can not take advantage of the compression gzip, the shared server on which I find myself, does not allow it.
Keep-Alive, I do not know what it is?
Philippe
Offline
What do you think a CDN like CloudFlare, to improve the display speed of sites?
Philippe
Offline
I would advise against Cloudflare or any other CDN for Backlight. This has caused issues with other customers.
Are you experiencing slowness on your site?
Offline
No, I do not encounter any slowdown on my site.
But since the search engines privilege more and more the speed of the sites, I wondered the question.
Philippe
Offline
It's important to keep in mind that Google's page speed tests are based only on a set of guidelines, and those guidelines are in many ways rather narrowly applicable. For example, they suggest inlining CSS, "If the external CSS resources are small ..."
Such a suggestion might work for a single-page website or web-app, but is actually quite a daft thing to do if your site is loading multiple pages, those pages all referencing the same stylesheet. The point of external stylesheets as always been that the browser should cache them, therefore not have to reload the stylesheet for every page, which speeds up page loads subsequent to the first. So if I have 100K of styling loading for five separate pages, then it's faster to have that in a external CSS file that gets loaded on the first page, then pulled from cache on the other four. If that 100K of styling were inlined in each page, then I'd be loading a total 500K of styling browsing the site, rather than the 100K file that gets cached, then needn't be loaded again.
But Google's page speed test only looks at a single page out-of-context, so it will always mark us down for it.
So as we've said, while the page speed test can provide some helpful insights toward making improvements, it should not be taken entirely as gospel.
Offline
Thank you Matthew for all this information.
I am not too worried about posting my site, as the pages are displayed fairly quickly. Even if Google speed gives me results a bit heavy, and advises me to compress even more images. I think we should not go too far so as not to damage the quality of the photographs.
Philippe
Offline
I suspect that GT Metrix will never give you a good score on image sizes generated by Lightroom. Their lossless image compression produces smaller images than Lightroom exports. Even if you reduce the quality in Lightroom, GT Metrix's algorithm will be able to produce smaller images with the same visual appearance.
Producing retina thumbnails also reduces the score further, since these are scaled in the page (e.g. a 200x300 jpeg scaled to display at 100x150). A poor score is something you have to live with if you want sharp thumbnails on retina displays.
Offline
In my time, I have largely found such tests and suggested optimizations to be entirely at odds with the very concept of image galleries on the Web, which are by necessity quite heavy. The Web is a text-based medium; images have always been second-class citizens, considered to be supplementary to text, rather than the main event unto themselves.
Offline
Pages: 1