Lay Theme Forum

@arminunruh Hi Armin.

I'm sorry to be bothering you with this - its just so mysterious.

I'm in Germany , Berlin - gigabit connection
Using Chrome
On Mac Chrome has no issues - even when displaying a mobile view
Phone is a modern mid-tier device -Pixel 4a
n.b. the page speed test link also simulates a mid-tier android device

"Enable YouTube pause video when leaving slide (adds extra YouTube Script)" - already unchecked.

To me, it looks like it must be a difference between the android and apple platforms. But i'm not technically qualified to diagnose whats going on...

@joeclarkx The REALLY puzzling thing (for me at least) is that a desktop window resized to mobile size doesn't have any performance issues...

Does that indicate that something changed with the mobile version of chrome?

@arminunruh thanks. I'm not sure how Digital Ocean could help?

I'm still really struggling with this. Load time for mobile is truly awful.

I tried PageSpeed Insights:

https://pagespeed.web.dev/report?url=http%3A%2F%2Fcorneliabaltes.com%2F&form_factor=mobile

It's clear that mobile it performing much worse than desktop. There are several suggestions but I have no idea how, or if I can, implement them.

e.g.

-it seems like the first image carousel is causing a 4.2s delay on mobile, but playing with the lazy load setting has no effect.

-the youtube element included with laytheme causes a 2.97s delay

-etc

The weird thing is that mobile used to run great for this site.

I've tried all the normal troubleshooting steps. I would really appreciate it if anyone has suggestions about how I could implement anything from the PageSpeed Insights link - or any other suggestions at all!

Just updated and the list view of the news plugin is broken:

Title will not show - only excerpt

Have switched to a column view with one column as a temp fix. This doesn't allow for the horizontal separators though

@arminunruh I'm sitting in Berlin too... The host is digital ocean... Mega strange that you are getting a different result

@joeclarkx just tested on iOS - on an older ipad - and page load is still several seconds... So I guess it's not an Android/Chrome thing

@arminunruh For me the initial page load is still incredibly slow- I'm on Android

@arminunruh Thanks for looking at this.

I have one youtube video on the page using a youtube element. Is this script you mention something that shouldn't be there?

Re: carousel lazy loading- I have this enabled. Has an update maybe broken it?

@joeclarkx Been looking at this again and it does seem like the carousel might be breaking lazy loading on mobile.

This is a very image heavy homepage so its a big deal.

FWIW this only happening on my actual mobile - not when the viewport is resized on desktop...

@joeclarkx Coudl it be that lazy loading is not working on mobile?

I should have also mentioned that this issue appeared recently...

Hi! http://corneliabaltes.com/ loads much slower on mobile: several seconds

I've been through all the tips to speed up the site - including checking turning off custom code and disabling plugins.

It looks like it might be the carousel plugin? Disabling this did fix the page load issue, but as much of the content is in carousels, i'm not 100% sure this is the problem- just a coincidental fix.

What else can I check or change?

Hi, I tired to add a "Next news' Button as shown in a recent Reel.

http://corneliabaltes.com/news/

See the news footer. Clicking it does nothing. Have I implemented it wrong? Or is a broken?

I'm noticing this is an issue for me too. Is this still on the list?

@fabiandraxl ME TOO

Hey Richard

Thats a great resource. I have already had a look at it and implemented what I could.

As its one particular page that I'm struggling with I'm inclined to think its some code that needs troubleshooting. I parked it for a bit, but I'll have another look. I'm guessing it may be the instagram embebd.

Best
Joe

Hey

Thanks so much for the reply.

Actually the home page is intentionally set to white as an overlay.

The problem I have is the that only the News page is loading slowly. Very Slowly. I have started wondering if the problem might be the instagram embed. Thats the only thing that makes it different to any of the other pages...

Hi, I'm using a script to give randomised page colours.

I have a problem with safari specifically- and only on one page

http://corneliabaltes.com/
The 'News' page takes maybe a minute to return a coloured background. This is a problem as all text elements and menus on the page are white.

The script is:

<script>
const colors = ["#FF7575", "#D69D00", "#FF5347", "#1BDA91", "#00ABF5", "#F38816"];

window.onload = () => {
  const colorToSet = colors[Math.floor(Math.random() * colors.length)];
  document.querySelector("body").style.backgroundColor = colorToSet;
};

I don't have the technical chops to even begin troubleshooting this. Any ideas?

I have already purged cache and also tried installing jetpack CDN...

Thanks!

Hello

In the full screen slider, as well as

"Give elements a max-width and max-height and center them"

I would find it very useful to also have

"Give elements a max-height NOT CENTRED" so they could still benefit from their horizontal position in the gridder but not spill off the top and bottom of the page

Is this possible, or is there another way i should rather look at doing this>?

Thanks
Joe

For example, I have been playing around with this:

.fp-section.fp-table{
margin-left: 15vw!important;
margin-right: calc(15vw - 200px)!important;

}

.fp-section.fp-table, .fp-tableCell{
width: calc(70vw - 200px)!important;

}

but I have been struggling.

The behaviour when resizing the window seems a bit unpredictable and I have been unable to dial in the values to get the content centred exactly in the space between the menu and the left of the viewport.

It would be really useful to know if I am at least on the right track or if I am always going to fail because I'm missing a variable, or something about the Slider plugin is overwriting what I'm doing for example...

Thanks @mariusjopen

I didn't think resizing in the gridder would be an option as I wanted to take advantage of "Give elements a max-width and max-height and center them" rather than having to lay out each image individually...

As I wrote, I already did something with Custom CSS which kind of worked, but the value I edited ended up pushing some content off the screen to the left in the case of a 3:2 landscape image.

If I try to rephrase my question to be more precise, I think it should be:

"When using "Give elements a max-width and max-height and center them" in the slider module what value should I attempt to a hack in order to have the slider module work with only a portion of the viewport horizontally, rather than the whole thing?