Mobile website problems and Xara?

[MarkyW48]

Hi. Long post here with several questions and explanations. I’m not good at regularly updating my website. Or even checking in on it and seeing how I’m doing on Google search, etc. So I just did that recently and found a few problems.

A couple months ago I upgraded from my previous version of Xara Web Designer Premium v.11 to the current version 18. Version 11 gave me problems uploading my site, but v.18 works well.

So then I did a few Google searches with different search terms like I have done in the past (though as I said, not often). Normally I come up pretty good, somewhere on the first page generally. This time, only once or twice on the bottom of the first page, other searches I was nowhere on the first several pages.

I did a bit of searching and reading online and found that Google will give you a hit in search results if your mobile site load speed is slow. I went on my Google Search Console and checked PageSpeed Insights and found that my mobile site rated a 40, which is POOR and I think my desktop was 82, Needs Improvement.

0-49=POOR, 50-89=Needs Improvement, 90-100=GOOD.

More searching and reading. I found a post by someone here asking about webp for images, and I asked a question, too. So I implemented that on my site and uploaded it and it helped a little, not as much as I thought it might.

More searching and reading. Found that it helps to compress your site using gzip or similar, and read that code needs to be put in your htaccess file. So I contacted my web host and they did that. That helped a good bit more. But still slow.

One thing that PageSpeed Insights said was loading slow, and I saw it myself when I would use my phone to pull up my page, was that the Facebook “Like” button was loading slow. So – I decided to delete it on all my pages. That helped.

Currently my mobile site has a rating of 65 and the desktop of 95 (which does vary a bit if I rerun the test). Getting better.

PageSpeed Insights says that there are some more problems that can possibly save almost 2 seconds by Eliminating Render Blocking Resources and almost a half second by Reducing Unused JavaScript.




I would imagine those are files I need and should have. Could the Render Blocking Resources and Unused JavaScript be because I just opened the .xar file of my website made in version 11 in version 18 and then uploaded it? Do I need to make up my website from scratch in version 18 to not have those problems maybe?

My business is picture framing, photo restoration, and my own art photography, so it does have a good number of images on it. But I want to put more on it to show more of what I have. Will that make things even slower? Also, I have less stuff on my mobile variant overall than on my desktop variant. But yet, my desktop speed is pretty good and the mobile is the one that’s slow.
My website is www.wolframes.com if checking it out would help.

There are some other things it says could be helpful, but that don't really affect the speed rating. I may ask about those later.

Thanks for reading. I just don’t know about all this crazy stuff.

[Egg Bramhill]

Hi Mark, I don't know why there is such a big difference in the scores between your Main & Mobile sites.

Just quickly here are some immediate thoughts.

Reduce server requests. Don't use Xara's navbars, they create numerous small images. Do you really require Google Anylitics? Give your images meaningful names. Use Alt text as well. Perhaps think about not using HiSlide for pop-up larger images, but use Pop-up Layers instead. Place Expires Headers within your .htaccess files....

Example:

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 week"
ExpiresByType image/jpeg "access 1 week"
ExpiresByType image/gif "access 1 week"
ExpiresByType image/png "access 1 week"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES CACHING

The above needs to include image/webp as well when you're using them.

[strativab]

Thanks A Lot

[MarkyW48]

Thanks Egg.

The caching thing was one of the things that was mentioned to help the site, although it said it wouldn't have an effect on the performance score. But it will help actual people that go to my site. So I already put that in my htaccess file.

Concerning the other things you mentioned: when you say "reduce server requests", is that related to the next thing about "don't use Xara's navbars"?
And what do I use if I'm not using their navbars? Right now I have the navbar on the desktop variant going down vertically, which I don't really like. But when I tried putting them across horizontally, because I have 12 pages, they went right off the edge of the page, which makes them useless. I was thinking of doing a drop down "site menu" like I have on my mobile variant. Do I just put large text across the top (or where ever) and link each to the corresponding page so it acts like a menu without being a navbar?

Concerning Google Analytics, besides knowing if anybody is actually coming to my site, it gives some info on search terms used, etc. So I would like to keep that.

I did start to give my photos separate names a good while back, but never did them all. I'll have to get on that. It would be nice if Xara just kept the file name that I gave the photo when I saved it to my computer.

When I saw the "HiSlide" mentioned in the PageSpeed Insights report, I was wondering what that was. So it's for the pop-ups I have on some of my photos, huh. For that, I'm just checking the box in the "Web Properties" > "Image" to have a pop-up and then you type in the pixel size you want it to be. I'll read up on how to make a Pop-up layer to use that instead. I don't think I have now, and don't think I need to have pop-up photos for the mobile variant being that the screen size is small. That will probably be best only for the desktop variant.

One thing I found as I was looking around my site in Xara, I put some code in the "Body HTML" box on the "Web Properties" to use Open Graph Tags for Facebook and Pinterest... and Google+. Google+ hasn't been around in a while. I think I'll remove all that, at least for now, just in case it's doing something. I did see in the new version of Xara, it does have a separate tab on the "Web Properties" box for "Open Graph" info. Maybe later.

Thanks again for your help.

[Egg Bramhill]

Just my thoughts, no expert by any manner. Other members will join in and correct/clarify matters further I hope.

The caching thing was one of the things that was mentioned to help the site, although it said it wouldn't have an effect on the performance score. But it will help actual people that go to my site. So I already put that in my htaccess file.

The big issue with using expires is you need to understand how often you're going to update your site. In development stages it could be hourly but once the site is mature it may be weeks/months before you republish the site, so the expires period need amendment...

I think it will effect performance but I can't test that.

[Acorn]

Concerning the other things you mentioned: when you say "reduce server requests", is that related to the next thing about "don't use Xara's navbars"?
And what do I use if I'm not using their navbars? Right now I have the navbar on the desktop variant going down vertically, which I don't really like. But when I tried putting them across horizontally, because I have 12 pages, they went right off the edge of the page, which makes them useless. I was thinking of doing a drop down "site menu" like I have on my mobile variant. Do I just put large text across the top (or where ever) and link each to the corresponding page so it acts like a menu without being a navbar?

I did start to give my photos separate names a good while back, but never did them all. I'll have to get on that. It would be nice if Xara just kept the file name that I gave the photo when I saved it to my computer.

When I saw the "HiSlide" mentioned in the PageSpeed Insights report, I was wondering what that was. So it's for the pop-ups I have on some of my photos, huh. For that, I'm just checking the box in the "Web Properties" > "Image" to have a pop-up and then you type in the pixel size you want it to be. I'll read up on how to make a Pop-up layer to use that instead. I don't think I have now, and don't think I need to have pop-up photos for the mobile variant being that the screen size is small. That will probably be best only for the desktop variant.

Mark, just to assist on these three points.

If you are not using the sub-menu aspect of the Xara NavBar, it is better to just use plain text for your button links.
If you enable Website link colours, you can get a rollover effect for little effort.
Equally, you can create a hamburger vertical menu with the links on a pop-up layer.
No images are created and it is tight, fast and clean.
You can embellish effects with simple CSS additions (read https://www.talkgraphics.com/showthr...-image-Buttons).

V18.5 now comes with a button 'Use photo filename' in Web Properties > Image > Image.

You have no control over the name of the HighSlide pop-up image.
If you are no needing a slideshow then a pop-up layer is preferable.

You are thinking correctly by avoiding pop-ups and the like in your mobile version, you are providing a better viewing experience.

I have been looking at your website (https://wolframes.com/)
Most of the blocking actions are hard to overcome but you can lessen a few:

• You have 62 font styles mixing Times New Roman, Arial & Uncial Antique. Try and lose the TNR. Use Paragraph Styles; these will keep your site changes tidy.
• Avoid the Rubber Band animation on the Menu items, it does nothing for your site. People will expect clean, straight lines from your work; make the site reflect that perception.
• Do name all your large images.
• Some images have HighSlide to the same width! Try and replace with pop-up layers.
• Definitely lose the Xara NavBars.
• I would combine pages about you and your business into one page and keep the others as your added-value ones.

I have not found your overall Performance to be as drastically as low as you have indicated.
I use Browser > F12 > Lighthouse to check.

I bet Egg could make a wizard, in-frame, animated wolf moon logo for you! The slide in from right does little.

For your photo showcase, the trick is to have some spread out over your other pages but they need to share the same filename.
I can explain how best to do this.
Then when a visitor gets to your showcase page, a number will have already being loaded and cached so the delay in this image-heavy area is not readily apparent.
You would present these frequent flyers closer to the top so the visitor has very little delay as it is all happening underneath.

Acorn

[Egg Bramhill]

Concerning the other things you mentioned: when you say "reduce server requests", is that related to the next thing about "don't use Xara's navbars"?

Yes but not completely. When you publish a Xara created site it also creates an index_htm_file folder , which holds all the page assets. Some you can't control. For example in the screengrab bellow you can see there are numerous css and js files that we mere mortals can't reduce into single files, we're stuck with that.

On the other hand Xara's navbars create two images for every button in the navebar, so if you've ten buttons each has it's own mouse-off/mouse-over image, which is 20 images and the browser has to request these individually straining the requests on your web server.

In modern browsers rectangles don't create a graphic so don't require server requests to render them. However if you create Grouped rectangles + text, Xara AUTOMATICALLY CREATES A BITMAP, CAUSING GREATER server requests, which use of the navbar does.

So we can't add all those css files into one as much as we'd love to.

[Egg Bramhill]

And there's Acorn two minutes ahead cross-posting explaining it far more succinctly than ever I could

[Acorn]

Mark, as Hallowe'en is beckoning, I played around with your Logo.

Wolf.xar

I hope you like what happens when you hover on the wolf.

Acorn