Header Logo and company name only partially displayed in preview mode.

[Acorn]

Hi Acorn.
I went and looked at the video link thar Egg Bramhill kindly provided for me. In the video he says hit "Reply to Thread", whereas previously I hit "Reply", which is the first button under your instructional message. This time I will follow the video instuctions as set out. Hopefully this will send the website page....I'm crossing my fingers !
Simon.

Simon, I typed up from memory so sorry I misled you.

Your problem is exactly as i guessed in my first Reply.

You moved the Page background rounded Black Rectangle from origin.
It shows as:


The two negative values should be (0, 0).
You also should never work with the Page background unlocked, as you can move it in error.

In passing, your landing page is far too wordy, few will read; Google will flag the font size as too small. You have a fair few typos to correct. Purple prose on purple will flag up poorly in Google's Accessibility.

You could improve the site's download and performance by not using a Shadow on the Page background Rectangle.
Your biggest gain will be to tick Web Properties > Website > Other > Shapes as SVG. This alone gives a three time speed gain on loading the page. Useful if your other 16 pages are similar.

Acorn

[Egg Bramhill]

That's the way to do it. Success!

[Acorn]

That's the way to do it. Success!

The Fat Lady's still got to sing.

Acorn, a deconditioned older adult

[bwood]

Your biggest gain will be to tick Web Properties > Website > Other > Shapes as SVG. This alone gives a three time speed gain on loading the page. Useful if your other 16 pages are similar.

Acorn

That’s a vital tip Acorn. I’m going to try it on melfortmuseum.org. Too many pics and notoriously slow.
Thank You.
Bill

[Acorn]

That’s a vital tip Acorn. I’m going to try it on melfortmuseum.org. Too many pics and notoriously slow.
Thank You. Bill

Bill, you have to be a lot more forensic in your analysis. Look at the total site download: https://www.melfortmuseum.org/index_...s/xr_files.txt.

Take your NavBar:

• It appears on 19 pages and has 22 images @ ~1k each. Although duplicated, each has its own filename so just your Navbar is half a megabyte of wasteful cache storage and downloads. You could rework as Text & CSS into a few kBs.
• It should be Sticky.

Your index page:

• Has two videos. This is a killer for YT downloads and delays. Hide until needed. At least, set the IFRAMEs to lazy loading.
• Similar for the Map.
• These two above are effectively loading three separate HTML pages before your can complete.
• Pop-up photos create two images, the thumb & the pop-up. I would use a image filenamed large image on its own pop-up layer and a smaller copy on the MouseOff layer. The trick is to turn the thumb into a Placeholder with an <img> tag for the image filename. Add a link to the pop-up and you only use one image, instead of two. You also avoid the need for invoking the HighSlideJS library.

Buttons and bottom logo:

• Best served as SVG and not images.
• Logo should be Sticky top, SVG and used as your site favicon.

Other pages:

• Similar treatments...

You'll probably half your downloads and speed things up.

Acorn

[Egg Bramhill]

Totally agree with Acorn on this. I've done a mock up of your home page and as it's the landing page I've removed the google-map and the two videos to their own pages. Some other suggestions:

Don't use Xara's navbar, they create hurendous amount of images with to many requests back and forth to the server. My example home page has 19 images in total. My links only link to #.

Get in the habit of naming your images, it stops Xara continuously renumbering image names, gives a meaningful alt title etc and if you do a 'Veiw Image Info' you can see what your images are named and it's far easier to find and view than looking at image2158.jpg. Also good for accessability viewers.

Give your website & webpages meaningful names, not just index.html

Fill in website & web page descriptions, it helps with seo and looks better on web search pages..

Use a favicon. The one I've used isn't great but I included it just to show the difference.

You'll probably half your downloads and speed things up.

In fact better than that. See attachment showing speeds from Page Speeds Insights of your site and my demo site.

The video loadings on the mock up pages take just under 2 seconds for desktop and nearly 8 seconds for a mobile. Simarly the google map takes 1 sec on desktop & 4 secs on a mobile so including them all in your own home page can lead to a 18 second page render. There are further methods of speeding up the youtube video loading but I haven't looked at this.

MOCKUP SITE

[Acorn]

@Egg, thank you for validating my suggestions with a demo file and website.
I hadn't even considered the SEO side as it doesn't impact performance but it is one of the other facets to getting a site spot on.

The techniques we are both describing are: image filenaming, favicon generation, page pruning, lazy loading and Xara NavBar avoidance.

Acorn

[bwood]

Thanks Acorn and Egg for the suggestions. I am thinking of reworking the nav bar for sure. The Yt videos I’m already in the process of reworking.

@acorn. Regarding lazy loading. Is that a tag I put in the placeholder code?

-Bill

[Acorn]

Thanks Acorn and Egg for the suggestions. I am thinking of reworking the nav bar for sure. The Yt videos I’m already in the process of reworking.
@acorn. Regarding lazy loading. Is that a tag I put in the placeholder code?
-Bill

Bill, some YT LL detail: https://www.talkgraphics.com/showthr...516#post656516.

Acorn

[bwood]

Acorn and Egg. I continue to decide what kind if nav bar I want, and prefer a sticky up arrow to the sticky nav bar, but adding lazy loading to YT and the map offers some excellent results on desktop. Still working on mobile.
Also the addition of meta data, and favicon gives me some great results.
Thanks for the push