Search the Community

Hey, so we all know about SEO and the importance of performance. Basically we do it, because if no one finds the website we just built, it´s frustrating. We all try to write clean markup, css and js code and most might have a webpack/gulp/whatever pipeline to minimize css&js. But when thinking about it, optimizing your pipeline might save you a few (hundreds) of kb, compared to loading an image with 1 mb that´s literally nothing and frankly just ridiculous. Don´t get me wrong, frontend pipelines are great and should be used, but let´s shift your "I will optimize the shit out of that 3 css lines" focus to something different: try to serve images as fast as possible, this is where the performance boost really happens. I´m no pro on processwire so far, but I built a very easy to use picture element, which some of you could find interesting: 1. the picture comes with 3 different sizes: one for mobile (keep in mind the double dpi, therefore width of 828px), one for tablet and one for desktop 2. the picture generates a webp version and the original file extension as a fallback 3. the filesize of each element is rendered within the "data" attribute 4. lazy loading(sooo important!!!) is done via the native 'loading="lazy"' attribute. Please try it out and see the difference ? I posted this so others can easily optimize their images, but I would also like to hear your suggestions in making it better. Maybe you could decrease the rendering time or maybe you have some easy improvements. Please let me know. Greetings from Austria! <picture> <source data="<?php echo($oElement->repeater_image->width(828)->webp->filesize);?>" media="(max-width: 414px)" srcset="<?php echo($oElement->repeater_image->width(828)->webp->url) ?> 2x" type="image/webp"> <source data="<?php echo($oElement->repeater_image->width(828)->filesize) ?>" media="(max-width: 414px)" srcset="<?php echo($oElement->repeater_image->width(828)->url) ?> 2x" type="image/<?php echo($oElement->repeater_image->ext)?>"> <source data="<?php echo($oElement->repeater_image->width(767)->webp->filesize) ?>" media="(min-width: 415) and (max-width: 767px)" srcset="<?php echo($oElement->repeater_image->width(767)->webp->url) ?> 2x" type="image/webp"> <source data="<?php echo($oElement->repeater_image->width(767)->filesize) ?>" media="(min-width: 415) and (max-width: 767px)" srcset="<?php echo($oElement->repeater_image->width(767)->url) ?> 2x" type="image/<?php echo($oElement->repeater_image->ext)?>"> <source data="<?php echo($oElement->repeater_image->webp->filesize) ?>" media="(min-width: 768px)" srcset="<?php echo($oElement->repeater_image->webp->url) ?>" type="image/webp"> <source data="<?php echo($oElement->repeater_image->filesize) ?>" media="(min-width: 768px)" srcset="<?php echo($oElement->repeater_image->url) ?>" type="image/<?php echo($oElement->repeater_image->ext)?>"> <img data="<?php echo($oElement->repeater_image->filesize) ?>" class="img-fluid" loading="lazy" src="<?php echo($oElement->repeater_image->url) ?>" alt="<?php echo($oElement->repeater_image->description) ?>" type="image/<?php echo($oElement->repeater_image->ext)?>"> </picture>

Hello, I've been struggling ALL day on my loading time problem and I'm stuck... As I said somewhere else on the Forum, I'm discovering TracyDebugger module to try and help me (and it does help !), but I'm still in a dead-end. Tracy told me one of my page loads about 4,500 pages and I can't find any way to make it less (and let me tell you that my website is far from having so many users/visitors or whatever, it's just a teacher's website to try to work differently in class). I have a feeling I am mis-understanding some concepts here. The page can be seen there : http://planetalert.tuxfamily.org/players/4d (for example, but the problem is the same for all teams in my site). As you can see, there are many information on this page, but not that much either I guess for a computer, but it takes 20 seconds to load ! It feels like my page loads just about EVERYTHING that resides in the backend, but I just can't understand by looking a tmy code. For example, the little green and red circles next to the player's names show the actions that have been saved on the last day (so usually 3-5 actions at most, except for players doing online exercises who may have 10 actions). My query is : $lastEvent = $player->child("name=history")->children("sort=-date")->first(); // Get all events on same day $prevDay = date("m/d/Y", $lastEvent->date); $prevDate = $prevDay.' 0:0:0'; // Select events for the whole day $prevEvents = $player->child("name='history'")->children("date>=$prevDate"); $trend = ''; foreach ($prevEvents as $event) { $HP = $event->task->HP; $title = $event->task->title; if ($HP < 0) { $trendClass = 'negativeTrend'; } else { $trendClass = 'positiveTrend'; } if ($event->summary !== '') { $summary = ' ('.$event->summary.')'; } else { $summary = ''; } $trend .= '<span class="'.$trendClass.'" data-toggle="tooltip" data-html="true" title="'.strftime("%d/%m", $event->date).': '.$title.$summary.'">&nbsp;</span>'; } But in Tracy pages, I see that the COMPLETE history for EACH player is loaded ! I thought my code was limiting it to the events appearing on the same day as the last saved event. Do you see where I am wrong ? What's more : I feel like I must do the same mistake for the players (they are all in althought I'm limiting to the particular team). I must say though, that I'm caching (supposively) ALL players when Admin is logged in so he can have a faster access in the top menu. More? All places and people that players can free are loaded as well. Why is this? I just want to load the places and people that are actually freed by players and show the names (not complete info). I'm not putting an example of the code here because I have a feeling the problem resides in my way of organising the complete thing... and that's what worries me the most... Maybe it's gonna be hard for one of you to understand (and have the time) my awkward way of organizing things (even though I'm trying hard to be well-organized ). So I'd rather point to the Github repository : https://github.com/celfred/PlanetAlertProfile/tree/master/site/templates The file I'm talking about above is team.inc.php. It is included in list-all.php which includes head.inc and foot.inc as well. Things have changed quite a bit on my local site today, but I'm getting in such a mess that I'd rather not commit to remote. I've corrected some things, but what I have just explained above is still there While I'm at it. Other page, other problem detected : my adminTable.php page which you can a look at at : http://planetalert.tuxfamily.org/players/adminTable/4d (I've just noticed that it should be acess restricted, but nevermind for today, don't submit just in case I forgot other things... _ yes, I'm desperate tonight...) and which submits to submitForms.php. Well, I had to put AJAX request for that because it was running into a timeout because of the loading time. It worked (althought I ended up waiting 30 seconds to record my table !) but today, Tracy and debug ON showed me the 'Maximum 100 nested functions limit fatal error' after hours of research, I endend up... writing this post I know my function updateScore() (in my-functions.php) is difficult, but what?? It just updates the scores depending on the task being recorded then checks the impact on other players and if it does have an impact, it triggers itself back to update the score of that other player. But yes, I know it can be some sort of never-ending story, but how can I do differently ? I wonder if it's ok to have wire('pages') in so many of my functions. But again, how can I do in another way? Well, sorry for such a long post, folks, but as you can understand, I'm facing a wall here and I hope someone around here will find some time to try and find his or her way into my code and give me a hint on where I could improve. I have had so many help from this community in the past and it felt such a relief and a revelation (Ended up telling my wife : "Wow, it looks so simple for these guys ! I've spent so many hours on that and... Of course ! Now I get it !! I'm getting better ! No next time !") Well, today is a 'next time'... Thanks if you've read up to this point and THANKS if you go and have a look at my code ! Fred.