Your page has no redirects. Learn more about avoiding landing page redirects.
Minify CSS - Your CSS is minified. Learn more about minifying CSS.
Minify JavaScript -Your JavaScript content is minified. Learn more about minifying JavaScript.
Prioritize visible content -You have the above-the-fold content properly prioritized. Learn more about prioritizing visible content.
Reduce server response time - Your server responded quickly. Learn more about server response time optimization.
50 / 100Suggestions Summary Should Fix: Eliminate render-blocking JavaScript and CSS in above-the-fold content Your page has 5 blocking CSS resources. This causes a delay in rendering your page. 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. Optimize CSS Delivery of the following:
Wouldn't having these be run by mysticseacaptain.com be faster? Also I notice that there are two large pauses when this new site is downloading. I see that all the javascript and css is available in the Export website. I guess I just have to select Export Options and uncheck use a "CDN...." - Our old site was much faster, but not responsive.
Leverage browser caching Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network. Leverage browser caching for the following cacheable resources:
http://www.mysticseacaptain.com/assets/css/styles.min.css (expiration not specified)
http://www.mysticseacaptain.com/…ssets/img/1853-Captain-Wheeler-House.jpg (expiration not specified)
Long list of images... How would I add that? This would help a lot! ---Perhaps it should be in there already?
Enable compression Compressing resources with gzip or deflate can reduce the number of bytes sent over the network. Enable compression for the following resources to reduce their transfer size by 37.2KiB (80% reduction).
Compressing http://www.mysticseacaptain.com/ could save 34.1KiB (81% reduction).
Compressing http://www.mysticseacaptain.com/assets/css/styles.min.css could save 3KiB (72% reduction).
How would I do this?
I have other optimization to do, to photos, but should these problems really be happening? Is there any easy way out of the problem? Thanks Rick
Can I just change these:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/css/lightbox.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css">
To this?
<link rel="stylesheet" href="assets/css/lightbox.min.css">
<link rel="stylesheet" href="assets/css/swiper.min.css">
Similar to
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
And then somehow download those CSS and place in the location? (they aren't in assets folder)
You can if you download them and add them to those directories yes. The only thing that it will hurt is updates to those CSS files, should they do any.
I personally do that for most anything I can so that it's not having to read things outside the server, which does speed many things up. I do it for anything scripts that include outside resources as well such as images. I put all that stuff on my server and have it found locally on the server rather than linking to external site servers. That's just my preference for things I guess. I'm sure there are other good reasons to use the CDN's for some things, but I don't know what they all are yet.
Jo Thank you I URL 'd the CSS and copied it into a file with the same name, then changed the links in the html. On the cell phone there are still some huge hangups downloading or something, and the first time, the images came up but the glyphicons left and right were missing and showing as big boxes. That glyphicon file is quite large, how is that handled? Is it normally quick?
How do you enable compression? maybe I should google that? Also how to leverage browser caching, maybe I should google that?
Still learning. Thanks.
http://www.mysticseacaptain.com/
PS: Poppup lightbox seems to be missing its forward and back icons.
I don't mess with the icons, because they are a built in system of BSS. I only do this for things that I add to a page that are outside of BSS, or CDN's for links to CSS and JS and such.
If you're trying to do the glyphicons outside of BSS you're making it harder on yourself since that function is built right into BSS, unless of course you've got larger package extensions of them via subscription or purchase of them that is. Then I would make sure the CSS represents the source location for them. I haven't messed with the icons manually in quite some time, and I don't ever think I looked at any of the files for them other than the images, so I'm unable to help there.
Some of the suggestions are probably related to the web servers configuration, in regards to things like the caching, expirations etc... Something you might not have any control over but you might be able to talk to your domain host and find out.
Good advice, I just noticed as it flashed by while uploading with filezillla, that it was pretty big, then the glyphicons seemed slower to load, maybe something did not write correctly, I will re -upload.
I don’t mess with the icons, because they are a built in system of
BSS. I only do this for things that I add to a page that are outside
of BSS, or CDN’s for links to CSS and JS and such.
Saj,
6 Reasons to Use a CDN–And 7 Reasons Not To
Two sides to every question. Very interesting.
We have a low traffic site with pretty good speed I think, but the CDN may end up being the best choice. I think I'll test and mess to learn more, then decide.\
Thanks!
Yes. The Bootstrap framework was/is developed by Twitter developers.
What you probably don't need though is the bootstrap theme CSS. I don't really see anything your using that actually uses it. In the BSS app click on the File menu and select Design Settings. Then set Bootstrap Theme to Bootstrap without Theme click save and check your project to make sure it doesn't look any different.
I am going to add this link about Responsive Design with Images which uses "Picture" and "Picturefill" which I found very interesting, since images are a large part of a website download. I don't believe some of the bootstrap components use "picture" yet, but it is quite flexible, allowing multiple sized images, etc.
I am starting believe TAB navigation is not picked up by search engines like Google, so this may not be a very good form for our website, and I may need to do the navigation over for best SEO. I hope not, but I am finding this new version of Google
This is a very good page for showing areas which need optimizing: https://varvy.com/pagespeed/
for our website it appears that bootstrap.min.css 121.2 kb is too big - How can this be fixed? Compression?
There is 1 Render blocking CSS files - https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css
And "above fold content" - whatever that is, reduce the amount of HTML needed to render above-the-fold content. Only about 51% of the final above-the-fold content could be rendered with the full HTML response It says I need to minimize HTML.
Also I need to - Optimize more photos - Enable Compression on the server - Take advantage of of browser caching keep-alive - Reduce the number of CSS files. - consolidate them.
Yes, I don't need bootstrap theme CSS . -Thank you.
I don't believe you need that CDN at all really. You must have added something to your site that added that, and you already have that file referenced in the head here:
My guess is that it's "Render Blocking" because it's duplicated and you have it referenced in your head and in your footer area. You need to get rid of the CDN, but don't do it without fixing whatever elements are relying on it first. Find out what you added to the site that is using that CDN and alter it's paths to the one that is already part of your file structure.
No problem Jo, I had to inspect his site to make sure what was going on as well. :) Gave me a pause for a moment because of the word twitter in it, because my site that I'm working on doesn't have the name twitter in it.
One thing that I noticed is that it doesn't look like he is using the swiper stuff at all in his site.
Never do that with responsive design actually. The less you specify as specific sizes, the easier you will find it to be responsive. Once you start using exact widths and heights you start losing the ability for the images to be responsive.
What you posted for that code is very old stuff. Widths and Heights are not added to image settings inline anymore. That would be something you would specify in your CSS if you need to do so. If you don't specify the sizes, it will automatically conform to it's container size if you set it to responsive. Be sure that what you are reading about is not outdated information. :)
Jo, I wondered about that, but the optimization website says to optimize the loading of the website, the dimensions of the images is required to permit the code to continue, while the images are downloading in the background!
Using: https://gtmetrix.com/leverage-browser-caching.html and put mysticseacaptain.com in the URL
From https://gtmetrix.com/reports/www.mysticseacaptain.com/j2DvjWI7
Specify image dimensions A (99) Images Medium What's this mean?
The following image(s) are missing width and/or height attributes.
https://www.mysticseacaptain.com/assets/img/BR1-NE.jpg
https://www.mysticseacaptain.com/assets/img/BR4-Wing.jpg (Dimensions: 1024 x 768)
https://www.mysticseacaptain.com/assets/img/BR6-Cupola.jpg (Dimensions: 1024 x 768)
https://www.mysticseacaptain.com/assets/img/Hallway-2nd.jpg (Dimensions: 1024 x 768)
https://www.mysticseacaptain.com/assets/img/Rear-Yard-Fog.jpg (Dimensions: 1024 x 768)
I have put 1024 x768 on all images from the OPTIONS except the ones above, due to efforts to optimize the loading of the website for phones.
I would very much like to understand why width x height is NOT required in responsive design to Optimize Mobile download speed.
Then I will remove all those dimensions that I put in (36)