gtmetrix and optimization

Hello, I read the article:https://www.sculptex.co.uk/optimizin...gle-pagespeed/. I was using gtmmetrix to see about optimizing images on my website created by Xara Wed Design Premium. I used one of the templates on Xara. When done, it creates a .web file for the website, .htm files, .xml file and a folder index_htm_files. Is it possible to replace the index .png files with the optimized picture I saved from the results of the gtmetrix scan? How would I do this? The sculptex article was confusing for me.
Thanks for any help,
steve (not tom)

Steve, the problem with the Sculptex approach is when you make changes to your design you have to rework all the optimised images again (and again).

Have a look inside the index_htm_files/ folder and count up the number of PNGs you have.
If it is from a Xara template, I would suspect that for a NavBar for a 10-page site, you will have over 200 PNGs for that alone and this does not include Variants.
I use CSS NavBars that have no images at all.

The next trick to consider is the Naming of images.
For important images, I Name them filename="meaningful_name".
This has three benefits. Firstly, with Fast Publish, the image doesn't get replaced with a new one so (browser) caching can start to work: Scupltex's "leveraging browser caching" in the .htaccess file. Secondly, it helps SEO, another Google ranking chore. Finally, if the same image appears in multiple locations, it is a single HTTP call with multiple presentations in the browser.

If you are still keen on optimising images, will the Xara Optimise all images function not suffice?
Alternatively, you could optimise locally, upload to an images folder on the server and use a simple Placeholder (<img src="images/meaningful_name.png" width="100%" height="100%" />) for each image.

Acorn

Thanks a bunch for your insight. I'll work on that and let you know.

Hi Acorn,
I was wondering about the CSS NavBars. Can I use that instead of the Navigation Bars I used from the Xara templates? And, how would I do that?

Thanks,
Steve

Quote:

---

Originally Posted by tomoffinland17

Hi Acorn,
I was wondering about the CSS NavBars. Can I use that instead of the Navigation Bars I used from the Xara templates? And, how would I do that?
Thanks, Steve

---

Steve, I would learn how to create the CSS NavBar first then worry about replacing the Xara-designed one.

A CSS NavBar has two parts: a nest of unordered lists and CSS styling.
The first goes into a Placeholder HTML code (body) and the second (CSS) goes into the Placeholder HTML code (head).

The Placeholder is usually just a black rectangle the width of your expected NavBar.

I use https://cssportal.com/css3-menu-generator/.
Use the Menu Options to change the NavBar to match what your design requires.
All this is the styling. Copy & Paste the resulting CSS Code into the Head between <style> and </style> tags.

The harder part is the HTML code. I use Notepad++ (free) and paste the HTML code there and change the editor language to HTML.
The menu labels are between the <a ...> </a> tags and you create top menu and sub-menus as wide and as deep as you care.
This design only covers for a top menu label and its sub-menu; there are no sub-sub-menus stylings.

All the #s have to be replaced with address links.
The trick here is to use the filename with htm extension for each replacement: <filename>.htm equates to Xara's <filename> in its menu generator.
You finally copy the changed HTML code and paste into the Body.

You have to estimate the width of the Placeholder from its generated image.
You have to set the Placholder to Repeat across pages.
You may have to create other CSS for Variants.

Have a go, it is very satisfying.

Acorn