Welcome to TalkGraphics.com
Results 1 to 5 of 5
  1. #1
    Join Date
    Jan 2018
    Location
    El Cajon, CA
    Posts
    37

    Default 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)

  2. #2
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,708

    Default Re: gtmetrix and optimization

    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
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  3. #3
    Join Date
    Jan 2018
    Location
    El Cajon, CA
    Posts
    37

    Default Re: gtmetrix and optimization

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

  4. #4
    Join Date
    Jan 2018
    Location
    El Cajon, CA
    Posts
    37

    Default Re: gtmetrix and optimization

    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

  5. #5
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,708

    Info Re: gtmetrix and optimization

    Quote Originally Posted by tomoffinland17 View Post
    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
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •