How to Fix & Optimize for Google Mobile.

I don't know what you're reading, but these days we never put full dimensions of images in my HTML. If I have to show dimensions at all it is almost always just the width and it's done in the CSS not in the HTML anymore. If you add dimensions in your HTML or your CSS that give full width and height of images, they will not be responsive. Just sayin'. Whatever you're reading is not correct.

Dimensions are definitely not required for any code to load. If you're having some issue with that then you have something incorrectly added. Adding the dimensions used to be the way to do things and used to be required prior to Responsive design. now almost all sizing is done via the Columns and Rows that your images are added to so that they conform using various margin structures and floats. Because of this, that means that your images will resize themselves in the layout, and the only time I worry about how large it is and make smaller ones to swap out with them is if the images are large to start with (such as backgrounds of Headers, Body, and sometimes just a large image). Although very large images will usually scale nicely, if we replace them with smaller ones, it's less drain on our users with smaller devices.

Hope that helps some.

Jo, I have added width and height dimensions in the OPTIONS area of every image, and the site listed above no longer says that rendering is being held up, and the site is still very "responsive".

It does not seem to have any negative effect, improves pagespeed, and the Optimization of website loading, and is still responsive. Of course I know less than half of what you know about BSS and I am just explaining my experience with this BSS website, so far. https://MysticSeaCaptain.com

If I really should remove these attributes, I'll do so, but they don't seem to hurt anything and are what the testing website said to do to improve the first page loading.

Thanks.

I've also put my site through Google's page speed tester and got low marks: 61% for mobile and 72% for desktop

https://developers.google.com/speed/pagespeed/insights

Top of the list (ie worst) is:

Eliminate render-blocking JavaScript and CSS in above-the-fold content

It tells me I need to optimise delivery of several CSS files like:

https://cdnjs.cloudflare.com/…strap/4.0.0-beta.2/css/bootstrap.min.css

and provides a link to a page explaining how to achieve this:

https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

So why can't Bootstrap Studio do this automatically?

Other things mentioned on Google's site test:

Leverage browser caching

Enable compression

Minify HTML

What concerns me is that Google marks down sites that perform badly. When I tested somebody else's website which had been built with a subscription based website builder it scored 97%! Why doesn't Bootstrap Studio achieve scores as good as this?

Does anybody have any advice for improving a site's score with Google's page speed test? I have managed to build a decent looking website with Bootstrap Studio but I am a real novice.

Thanks, Alex

You can do the minify in BSS, it's in the settings of your project. I don't use it because it causes issues with some of the elements I use externally, but I would imagine for basic code pages without a lot of bells and whistles externally set up it would work well.

Thanks Jo, yes I did minify the CSS and javascript but it seems Google wants the HTML minified too.

However the main thing that I think Google doesn't like is the "render-blocking JavaScript and CSS in above-the-fold content". Apparently one should ELIMINATE these.

Google says on my site's page speed insights report: "None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML."

So I wander why BSS is producing code that causes websites to be slower than they could otherwise be.

Thanks, Alex