Easy Question, I hope.

Kellemora · Post by **Kellemora** » 09 May 2015, 03:16

Hi Yogi

First the Good News, hi hi...
Every Page on my Authors Website is now 100% Mobile Friendly.
This is based on the individual page tests at the Manual Entry Test.
I was notified Google will be crawling my site and sending me an update.
WHY?
It looks like I was selected for Verification, Ta Da!
And along with it comes a special crawl.

OK, now for my question. I think this one you may have an answer for.
Before I Minified each of my pages, I got W3C passed with zero errors, yay.
After I Minified, every single page had exactly four errors.
They were easy to track down, but a PITA to fix in the Minified version.
Before bothering you, I've been checking on-line for over an hour.
Now I could EXPERIMENT and TRY what I think may work, but I've already locked myself out of uploads twice today.

Here is an example of the working lines, before Minify.

Code: Select all

	<link rel="Shortcut Icon"
		type="image/x-icon"
		href="../favicon.ico" />
	<link rel="icon"
		type="image/png"
		href="../favicon.png" />

OK, now for a copy of the same two lines after Minify, and before I fix the problem by hand.

Code: Select all

<link rel="Shortcut Icon"type="image/x-icon"href="../favicon.ico"/><link rel="icon"type="image/png"href="../favicon.png"/>

And here is a copy after I fix the problem.

Code: Select all

<link rel="Shortcut Icon" type="image/x-icon" href="../favicon.ico"/><link rel="icon" type="image/png" href="../favicon.png"/>

Minify is closing up the white space before the words "type" and "href."
So I have to go through ALL of my pages and add the FOUR white spaces back on each page.

The only thing I found on-line, adding double double-quotes did not look like it would work at all, so I didn't try it.

Code: Select all

<link rel=""Shortcut Icon"" type=""image/x-icon"" href=""../favicon.ico""/><link rel=""icon"" type=""image/png"" href=""../favicon.png""/>

Now by my way of thinking, which is USUALLY WRONG, hi hi...
It seems to me doing what I tried below should have worked, but W3C tosses 16 errors if I try. I already knew that using  would not work in the <head> area within a <link>

Code: Select all

<link rel="Shortcut Icon" /* */ type="image/x-icon" /* */ href="../favicon.ico"/><link rel="icon" /* */type="image/png" /* */ href="../favicon.png"/>

It's not a big deal to go back in and add the spaces each time I make a change to a page, as long as I remember to do it.
But I'm thinking, you have mentioned escape codes and possibly may know what I'm supposed to use here, if anything. Heck, it might turn out to be something as simple as adding a semicolon?
But I thought I would ask before spending another two hours trying all the possible combination of things.

Oh, I do have one other question. Google Chrome in WebTools has an AUDIT feature which lets me know which <style> or CSS lines I'm using which are no longer needed. This is great as I removed the unused ones.
However, is there a Tool which works in Reverse. Instead of telling you which ones are NOT used, a tool which tells which ones ARE USED.

I'm asking because when I do an AUDIT, it says I am not using 96% of bootstrap-min.css Plus it tells me which ones have generic names instead of the proprietary names. I also have the JS and JQuery lines in my header as well, which may only be being used on the one page with the buttons, and maybe even not there.
As I have time, I will cancel out those two JS folder files and see if something stops working.
Seems silly to load such a HUGE CSS when I'm probably not using anything but ROW on a couple of pages.

Have a great evening Yogi!

TTUL
Gary

yogi · Post by **yogi** » 09 May 2015, 13:49

I'm not on solid ground here because I have not had to do the same thing that you are trying to do and have no direct experience. However, that won't stop me from handing out free advice.

The first notion to cross my mind was to question the need to minify. I've never dealt with sites as large and complex as the ones you are constructing so that perhaps the extra spaces and comments do make a difference in your case. Browser loading time with all your extras in the code will be longer, but the unavoidable propagation delay in network transmissions would far surpass the time it takes to read a few hundred spaces and lines of embedded (but non-functioning) comments. I appreciate the elegance of perfect code and apparently Google does too which is why they are going to audit you. But to my way of thinking a Google audit is about the same as one from the IRS. Who needs it?

Given the need to minify I can see why you are encountering problems. The minification utility you are using is not perfect. In fact it's missing the mark in a big way by gouging out that critical space in front of "type." The quoted spaces idea messes up the syntax in the <link> tag so that's not a good idea on general principle. The comment notations that you are trying to use !-- --! and /* */ are not appropriate in this instance. Those things are for adding comments, which means it's telling the rendering engines to ignore anything between the markers. Thus if the notation works at all (and I doubt that it ever will) you are telling the browser not to look at the space you are inserting.

In that other thread I mentioned using a backslash \ ahead of a character in order to prevent the javascript interpreter from recognizing a reserved character. It was an apostrophe in your case which is a valid javascript element that you wanted to be part of your plain text. What you are trying to do in the above <link> is just the opposite. You want the minifier to recognize the space character and leave it alone. It turns out that the escaping of characters in HTML involves a little different technique than is required by javascripting. In HTML code you might use something from THIS TABLE in order to get the minifier to understand exactly what you want. I don't have a means to test if my suggestion will pass through the utility, plus I can't say it will work inside a link tag. Nonetheless, here's my idea:

Code: Select all

<link rel="Shortcut Icon"&#32;type="image/x-icon"&#32;href="../favicon.ico"/><link rel="icon"&#32;type="image/png"&#32;href="../favicon.png"/>

The space character happens to have a name so that this alternate code might be easier to remember.

Code: Select all

<link rel="Shortcut Icon"&nbsp;type="image/x-icon"&nbsp;href="../favicon.ico"/><link rel="icon"&nbsp;type="image/png"&nbsp;href="../favicon.png"/>

In any case it's a hell of a lot of trouble to go through just to fool the minification engine.

Also, you bring up a good point about using a semicolon. That's a great delimiter in CSS styling, but that's not what you are doing in the <link>. You are pointing to where the style is located and thus the semicolon is out of place inside the tag.

I know that I lifted some coding from bootstrap to give you an example, but bootstrap-min.css is a framework and the code I borrowed was intended to be used inside that framework. All I was suggesting is to abandon the framework and just use the coding you can steal from it instead.

The moral of this story is that perfection has it's price. In my work the price is not worth paying.

Kellemora · Post by **Kellemora** » 09 May 2015, 19:52

Hi Yogi

Thank you!

I do know using   does not work, tried that. But I forgot about the numeric equivalent   so will give it a try.

Does sorta seem dumb to Minify the html when I have a monstrous boostrap.css going along with it.

Many websites I am visiting, not only are they using Minify, but they are encrypting their html files as well, making them unreadable. Or perhaps this is what a zipped html file looks like?

Also, as you said, loading a minified page does take longer than one which is not minified, but then you move around in it much faster. Google would also prefer we zipped the html as well, which I probably won't do, because it adds an extra process at the receivers end to unzip it.

bootstrap.min.css is 117.3kb and I'm only using the equivalent of 4.6kb of that file.
My whole website, counting all the html pages is less than 350kb, and most of the individual pages are less than 8kb.

If I could figure out which lines ARE being used in bootstrap.css by all pages, I could truncate it down to a 5kb file named something like castrated.css hi hi...

The hard way would be to remove everything Audit says is not used, page by page, one at at time, then compare what is kept from each page and merge them all into one file then remove the duplicates. This would be one heck of a lot of work.

One fellow suggest another way of doing it, by making a copy of what should be removed from each html page call. Then comparing those pages and only removing those which are common to all 50 some odd pages. This too sounds like a lot of work, hi hi...

Which is why I asked if there was a program that names the ones being used, rather than the ones not being used.

Now that I have my pages to the point Google took note of them, now they are talking about added microdata for a couple of pages in my website, namely the pages about books. They included a link in their message to me which took my straight to a schema creator designed just for authors books I filled in the blanks and copied the code it generated to study. Now I'm wondering what will happen when I add the code to the page it belongs on. Doesn't look like it would be hidden from appearing on the page. I'll know more after I try it.

I have no idea why or how they decided to offer suggestions to me, it's not like I'm popular or anything.
Perhaps they know I'm an old geezer struggling along trying to figure out how to do things?
I have another thought too. I've not seen very many Google Searches where the link came up as Mobile Friendly yet. So perhaps those of us who are using their tools to test our pages is being monitored by humanoid eyes, hi hi...
It appears being Verified on Google is not the same as being Verified on Twitter, it's just a normal process on Google is all. Funny Google+ says my name first name is not allowed and don't exist, and Google Search has me covering four pages.

Thanks for your thoughts and ideas once again Yogi.
Much Appreciated.
And I should be over the hurdle now and can get back to writing once again.

TTUL
Gary

yogi · Post by **yogi** » 19 Jul 2015, 12:56

Gary - your post about web site hosting was promoted to a topic of it's own:

Web Site Hosting Service : viewtopic.php?f=19&t=328

bfchat.brainformation.com

Easy Question, I hope.

Easy Question, I hope.

Re: Easy Question, I hope.

Re: Easy Question, I hope.

Re: Easy Question, I hope.