Why my web page cause crash in Chrome and slow in Firefox?

[eaglehopes]

I used my own php code to build links to my blog pages in my website. I put all links inside a div container and use horizontal scrollbar to access to all.

However, when number of blog pages increases(over 100), page loads links but :

1. Chrome crashes when I changed and come back to the tab of my webpage

2. Firefox does not crash but, it starts slow scrolling

There is not any php or javascript errors in browser's console. Can anybody help me what is the problem of my page design? Thanks.

My problematic web page is : http://enginery.freecluster.eu/index.php?page=blog&subblog=CP&fin=LINUX&blogPage=1.html#BlogHeadTitle

 

[requinix]

Works on my machine™. Chrome never even stuttered.

But which sub-blog specifically? I didn't see any with >100 pages.

[eaglehopes]

10 hours ago, requinix said:

Works on my machine™. Chrome never even stuttered.

But which sub-blog specifically? I didn't see any with >100 pages.

[Computer programming > Linux ] sub-blog had 126 blog pages.

[eaglehopes]

I found its reason  : my php code bombards the page to load more than 100 links having their own styles when I chose sub blog page. Then this loading cause some kind of memory leak in my google chrome(TM) browser  and eat my whole memory so that it crashed(When I show processes after crash, there are lots of chrome crash-pad processes, if I am lucky to behave fast before complete freeze, I went into tty1 and had to kill chrome by script). 

The solution I found is "pagination". I get all links of pages from PHP to javascript and put them only three of them to make the page load faster and crash free!  I am marked this as a solution. The lesson I learned was "do not trust browser's memory control, do it your own way while desining your web page!" 

[AngrySheep]

Your webpage seems to face performance issues due to a high volume of links within a div container. To tackle this, consider lazy loading, pagination, and code optimization. Browser DevTools can help identify bottlenecks. Regular monitoring and adjustments will ensure a smoother user experience.

[eaglehopes]

22 hours ago, AngrySheep said:

Your webpage seems to face performance issues due to a high volume of links within a div container. To tackle this, consider lazy loading, pagination, and code optimization. Browser DevTools can help identify bottlenecks. Regular monitoring and adjustments will ensure a smoother user experience.

I added pagination to my website and it solves lots of bottlenecks! But I do not know what is "lazy loading", I will look about it and try to apply it. Thanks AngrySheep for comment.

[eaglehopes]

Woow, "lazy loading", "eager loading"... there have been different techniques for developers to use.  I haven't heard anything about them until AngrySheep's great post!

I applied "lazy loading" to some images in my webpage's page that has high and big images. Result is that users will have better experience(ie. faster and smoother) while loading it.

[eaglehopes]

I must share my experience about "lazy loading" since I experienced one of its disadvantage : when I put two images inside a container and place them using "position:relative"( to put them on each other with some overlap) , then lazy loading cause misbehaviour;  they positioned on the same point(complete image eclipse occured  ) ( but not always i can see, at least not after the first run). So, it must be used carefully.

[aarti789]

Well, there are some steps that you can take to fix these issues. 

1. You can try for optmizing link rendering.  

2. You can use developer tools of browser to improve the performance.

3. Disabling extensions of browser.

4. Lazy Loading

Thanks

[AngrySheep]

On 8/24/2023 at 6:32 PM, aarti789 said:

Well, there are some steps that you can take to fix these issues. 

1. You can try for optmizing link rendering.  

2. You can use developer tools of browser to improve the performance.

3. Disabling extensions of browser.

4. Lazy Loading

Thanks

thank you!

[Riphil]

On 8/24/2023 at 5:48 PM, eaglehopes said:

I must share my experience about "lazy loading" since I experienced one of its disadvantage : when I put two images inside a container and place them using "position:relative"( to put them on each other with some overlap) , then lazy loading cause misbehaviour;  they positioned on the same point(complete image eclipse occured  ) ( but not always i can see, at least not after the first run). So, it must be used carefully.

Use JavaScript to arrange the images after they have been uploaded.

[eaglehopes]

I finally learned a bit of SQL and transferred the main part of my webpage content to MySQL database. Now my website became much faster! Just a few lines of SQL code solved lots of problems and opened a new vision, i.e. TODO list 😮 .