My site is failing page-speed for mobile. I’m using Foundry 2 and Alloy. I’m getting this error with Alloy. Turning Alloy off on the page resolves the error.
My site is now getting de-indexed from google because the design is failing on mobile. I’m using media group and I can’t replace all of the png files or control all aspects of the js loading behavior.
Any thoughts on how to resolve this?
https://pagespeed.web.dev/analysis/https-www-daydreamtechnologies-com/kcsdk2rvnf?form_factor=mobile
What page on your site is throwing this javascript error? I ask because I’m on your newsroom page, which is an Alloy blog, and I don’t see the error, as seen in the screenshots below. I also don’t see it on your home page either.
Home Page: CleanShot 2023-08-31 at 15.00.34@2x.png - Droplr
Newsroom page: CleanShot 2023-08-31 at 14.59.09@2x.png - Droplr
If it is on another page, please let me know.
Additionally Alloy does not contain r["context"].toLowerCase in any of the many files that make up Alloy, so that is a bit puzzling to me: CleanShot 2023-08-31 at 15.15.35@2x.png - Droplr
Did you try what Isaiah asked you to do over on his Discord channel? If not that is probably a good place to start since that changed recently, as he stated, and I’m assuming you’re just now getting this problem, and Alloy hasn’t changed in quite some time.
That said, if you have done what Isaiah suggested, and you’re still having an error, I will need you to point me to the specific page with the problem as well as send me a copy of your project file.
Please provide us a copy of your project file, along with a link to the live site if available. This is the file you open in RapidWeaver to edit your site. I’ll also need a copy of the following Alloy folders from your server:
Create a ZIP file containing these files. After creating the ZIP file, upload it using a service like Dropbox, WeTransfer, Droplr, or a similar service to create download link for us. Paste that download link in your reply.
As for you PageSpeed test – many of the items outlined are merely tweaks they’re suggesting to speed up your site. Like use smaller, lightweight image types. Instead of PNGs I’d definitely use JPGs. You also need to size the images so they’re not larger than they’ll be used on the page, and compress them with something like TinyPng.com as well. Many of your images are quite large, nearing 500kb to 1mb for some. These are mostly what I’m seeing in your report and are things you have to address on your end.
Adam, the error only shows up in the Safari browser, and not in Chrome, Firefox or Edge.
It is partly due to a bug in Safari while processing the structured data on Alloy blog pages.
The structured data is still valid as can be seen by using the structured data validator: Schema Markup Validator
However, you can see the exact same error on the Foundry Blog page: From the Forge Blog
There is a fix for this error that requires a change to the blog post structured data template.
Just remove the square brackets and semi-colon (lines 13 & 35) so that the structured data is no longer an array object.
The brackets are there to make the structured data valid JSON. If Safari is still reading it as valid, since it is valid of course, then I think we’re good as-is then. I don’t want to go out of my way to make something invalid to please Safari.
You don’t need square brackets for valid JSON unless you’re creating an array. The second screenshot above without the square brackets is also valid JSON and does not create an error in Safari.
Since the “error” being shown in the inspector is a Safari glitch, and the Structured Data for the page is functional and valid, even with this Safari bug, I don’t think I see a reason to change the Structured Data.
The javascript error being reported does not appear to originate in Alloy or Foundry as far as I can tell. When I load the blog page on (Newsroom | Day Dream Technologies) in Safari’s Privacy Mode I get no error on the page (screenshot: https://d.pr/i/6sDKrl).
I am guessing that the error could be originating from the cookie consent, as I do get the error showing in Safari’s inspector when I visit the page with Safari’s Privacy Mode disabled.
@jason_ddt Could you remove whatever you’re using for cookie consent from the page and republish it as a test? When you remove it, be sure to remove all Stacks addons relating to that cookie consent, then do a Republish All Files. Let us know if the error goes away or not.
The error is created by the square brackets, which are generated by the structured data template in the AlloyBlogEntries Stack.
I’ve created a simple HTML demo containing two pages; one with square brackets, and one without square brackets. The structured data was copied directly from the Official Alloy Blog.
https://demo.rwpro.dev/jserror/index.html
https://demo.rwpro.dev/jserror/noerror.html
You are correct that the error doesn’t show up in Safari’s Privacy Mode, and although it has no effect on the page, users should be able to create pages that are error free, even in Safari. Perhaps just add it to your todo list for the next time you update Alloy.
Thank you both for tracking this down. I really appreciate it. My biggest concern is with bots successfully seeing our content and related search engines scoring the site positively on mobile performance.
I haven’t keep close tabs on when errors appear, this error seems more recent and aligns when my use of Privacy Center and the recent update of Stacks. I’ve clicked “update” on a few other stacks I have in RW, not sure how to easily list the plug-ins the site uses from RW, I assume that’s something you can see with your experience.
I know I use Foundry 2.4.5.0 (Carl suggested Update applied), Alloy 3.3.2, Stacks 5.1.2, Foundry Theme 1.0.3, custom CSS, and pre-connect resources for each page.
Point being, this typeError is recent (last 3-4 months). I wish I could be more specific.
I do not know if this error in safari is causing any other issues with meta data access, or overall performance. I’ve bee working to tune the site with pre-connects, but I can’t change how JS runs (async vs …)
I’m struggling to get traction with search and I suspect the sites mobile performance for them is poor. For me, from my iPhone with out local cache loads fast in my mind.
If this glitch isn’t tripping up other systems trying to read my site, I’m not stressed.
Thank you both again.
Jason,
The error only occurs on pages where you have blog posts, and won’t affect your site in any way.
Now that you’ve fixed the errors in your pages head section, you can go the Google Search Console and request for your site to be re-indexed.
You home page is 3.3MB in size. As mentioned earlier by Adam, if you want better pagespeed numbers, you should convert PNG files to WEBP format and decrease the size of the large images.
Squoosh is a great way to compress and convert images for your site.
Hi again @jason_ddt –
Did you do like I suggested above in my previous post? If not give it a shot and let us know if it helped at all.
@elixirgraphics I just re-published the site after removing the “Privacy Center” plug in from the site. I cleared cache and reloaded the site. Received the same error on alloy pages.
LMK what else I can try.
re: images. I’ve converted many to web, however I’m not sure how to do that with Foundry and Media Groups… they all seem to get converted to PNGs.
Ah well, just wanted to give it a shot since it was not occurring when using privacy mode in Safari. As has been stated, the error that the Safari bug is showing is causing no problems to your site, or page ranking. You’re fine there.
Foundry doesn’t convert images. Its code doesn’t have any way to do so. The thing tipping me off to the problem is that you mention Media Group. This is a Foundry 2 tool. Foundry 2 does not have a WebP feature. This means you’re dragging a WebP image into the Media Group tool, and RW nor Stacks can use WebP images natively. Since you’re using Foundry 2 you’ll need to stick to JPG images instead.
Thank you for that clarification. It’s sometimes difficult to attribute any given behavior to a stack or plugin with RW. I am using the media group, and I think I ran into transparency limitations with jpg. I may have missed something.
If media group can’t handle jp2 is there a suggested stack to get the same functionality?
If you need a transparent background your choice is going to be PNG or GIF. Whichever you choose be sure to compress them before using them.
Thank you for that. Any suggestions on how to address preconception and fetching of js and css files with Foundry?
Chrome is telling me I have several blocking rendering performance. I’ve tried preloading and preconnections. Google wants me to async the js, I’m not sure how to accomplish this.
Do you have recommendations on what js and css should be in the project level vs page?
You’re not going to really be able to affect those things. RapidWeaver and Stacks load things to particular places within the page structure, which are not changeable by yourself or by Stacks addons like Foundry. These things should not cause much of a difference in your page from what I’m seeing in your page speed test.
