Web page test

[behzad]

There are number of online web page test that gives you xara performance results/score. What is the best one that is used? How should we deal with the results. I know many are not relevant with how xara outputs its content.

Here is one result from webpagetest.org

[Spamiky]

[ukDalek]

My web designer 19 site


A well known high uk street clothes retailer site

[Egg Bramhill]

Much of the things that mark down your page is often beyond simple control:

For example: Loading js files:

By default, references to external JavaScript files will block the page from rendering while they are fetched and executed. Often, these files can be loaded in a different manner, freeing up the page to visually render sooner.

• /index_htm_files/highslide.js
• /index_htm_files/roe.js
• /index_htm_files/replaceMobileFonts.js
• /index_htm_files/prs4.js

And again loading css files:

By default, references to external CSS files will block the page from rendering while they are fetched and executed. Sometimes these files _should_ block rendering, but can be inlined to avoid additional round-trips while the page is waiting to render. Sometimes, such as with stylesheets that are only used for loading custom fonts, inline or async CSS can greatly improve perceived performance.

• /index_htm_files/xr_fonts.css
• /index_htm_files/highslide.css
• /index_htm_files/xr_main.css
• /index_htm_files/custom_styles.css
• /index_htm_files/xr_text.css
• /index_htm_files/xr_all.css
• /index_htm_files/ani.css

I remember there was a thread on here re lazy loading.

Images outside the critical viewport can be lazy-loaded.When images are lazy-loaded using loading="lazy", when they scroll into the viewport, freeing up early load for other tasks.

• index_htm_files/town-cryer.webp
• https://htrsm.co.uk/index_htm_files/map-pointer@2x.webp
• index_htm_files/friends-button.webp

Here's one I don't know how to work-around:

When fonts are loaded with default display settings, like font-display="block", browsers will hide text entirely for several seconds instead of showing text with a fallback font.

• "xr2_Gill Sans" bold normal
• "xr5_Gill Sans1" bold normal
• "Open Sans Extrabold" 800 normal
• "Open Sans" normal normal

Accessability....

Axe found 4 accessibility issues: 1 critical, 3 serious,

This should be fixable:

Iframe has no title attribute nor aria-label attribute

Xara has no ability to include a 'title' nor 'aria-label' to links:

Links must have decernable text.

I use object to load my animated svg's. I was unaware these required an alt tag

<object> elements must have alt tags

Just my thoughts on these issues

[behzad]

Yes gang, it is all xara and most likely out of our control unless your a xara wizard like acron

[Egg Bramhill]

There's this excellent thread by sculptex:
LINK

[behzad]

Yes seen that, however many things have changed with google and their ranking. SEO is an ever changing situation and one that I thought Xara said they will keep up with, but....

[bwood]

There's this excellent thread by sculptex:
LINK

Thanks Egg. I have book marked. Upon reading I now understand why so many pay for an SEO service. There’s a thread from @acorn on optimizing if I recall. If memory serves making your own nav bars helped optimization. A few other things as well. I have a site which is extremely picture heavy and notably slow. I can certainly fix the carousels etc, but js is new to me. Html and css I do know.

[behzad]

@bwood, the whole purpose of xara was to not have a user worry about all that seo and optimization stuff. It was suppose to be easy to build websites. Although on surface it may seem but the coding and all that stuff that makes for a better website beneath is missing and not optimized and I doubt it if Xara cares. So if your not like a few wizards on here then you and I are out of luck.

[Acorn]

bezhad, a naïve user will add tons of sliders and hires graphics and create a dog that performs badly.
I ignore SEO as a direction as you need to get performance and Accessibility right before worrying about SEO.

SEO is just juju, used to fret people out.

Xara provides, but doe not dictate, simple concepts that should always be followed:

• Website/Page Title, Description, Keywords - simply match to the content of your site or page, an abstract or guide to what is been presented.
  
  • Keyword creation is all about selling your site: 'best XYZ in AZ'. look at other similar sites' usage 'cos that's who you are up against. Limited SEO benefit but shows you care.
  
  
• Paragraph styles - use Heading 1 to 3 to give your pages a flow and structure.
• Alt text - needed for every major image. My No. 1 for screen-reader users.
• Image filename - use for every major image; better that Xara giving your photo a number.

Three major improvements with XPro+ and almost XDPXv19 are WebP images, self-hosted Google Fonts and Shapes as SVG.

• Image download sizes and time are greatly reduced.
• The Fonts improvement is most to meet GDPR but self-hosting also stops third-party http calls (to Google), saving more time.
• SVG code becomes part of the HTML in the page and so fewer http calls.

The quickest way of checking your website is to use the browser built-in tools (F12) and then the Lighthouse tab to generate report.

If you are worried about Variants:

• Use 1440px Main, 720px Variant and Scale to fit width.
• Ensure buttons are bigger than 48px square.
• Set font sizes larger than you think comfortable.
• Do not mix Variants with Transition websites unless the graphics are trivial.

Simple techniques:

• Design your most complex page first - use Guidelines and symmetry, but break for impact and effect.
• Use two or three fonts at most.
• Avoid hero images at the top - use information to get the viewer to read; in that time the downloads can catch up.
• Set a waterline - above which the viewer need not scroll to find important information.
• Set Theme colours early - use client images for Palette from Photo experimentation.

Things to avoid:

• A site of just graphics - unless it is for an artist or photographer showcasing.
• Minimise animations - Xara's offerings are limited.
• Keep sliders off the site landing page.
• Squeezing your entire Main into the Variant - Xara's Responsive design is far superior to an Adaptive one, I just do not like how it has been implemented.

Acorn