I am trying to build a Wordpress website using a theme I purchased, unfortunately the maker of the theme doesn't seem to respond to any support requests.
After creating a few pages I noticed that performance is much worse on Safari compared to any other browser. I tested this on a few computers and few versions of macOS.
Example page is https://sochacki.info/proj/nepal-manaslu-circuit/
I realise that photos on the website are quite big (4000px each), but that is exactly what I want. I am happy with how quickly the pages load and how the galleries work, in Chrome, Firefox or Opera. When you click on a picture it loads PhotoSwipe JavaScript gallery so you can see them in full size, and then you can also click in top right corner to go full screen as well, or to leave the PhotoSwipe viewer. Switching between photos, going full screen or leaving PhotoSwipe are instant.
However when I load the same page in Safari, any action after clicking on a photo is slow. Switching between photos, going full screen, leaving full screen. It all takes a second or a few seconds. I can also see in Activity Monitor that CPU is used way more in Safari.
I tried a couple of things:
the theme I am using uses a custom plugin made by the same author to create these galleries, place photos and it includes PhotoSwipe files inside. Those files were one version behind (4.1.2 instead of latest 4.1.3) so I updated them, but the performance issues are the same.
I installed some other gallery plugins which use PhotoSwipe to display photos, and they did not have the performance issues, so I am not blaming it on PhotoSwipe, probably some other part of the plugin is causing the issues.
I have no real experience with JS or web development, are there any tools that could help me find what is causing the slow performance?
I checked the website speed - as I can see the Theme-Loading-time is okay. But as you already mentioned the Photo-sizes are really unfortunate as we can see in google page insights (https://developers.google.com/speed/pagespeed/insights/?hl=de&url=https%3A%2F%2Fsochacki.info%2Fproj%2Fnepal-manaslu-circuit%2F)
Try to resize the Photo-sizes in normal view (not the HeightxWidth > the kB)
Related
I am having issues trying to load my site, http://www.internhacks.io/, on any mobile browser.
The project can be found here on Github.
I have tested the site on mobile using Chrome dev tools, and everything loads fine/acts responsively.
However, when testing the site on my actual phone, sometimes the site does not load at all, sometimes only partially.
Note: the apply button is not meant to do anything yet
I think it may have to do with having a large image as the background. Should I be serving a smaller version if detecting the window is smaller? The img height is set to 100vh.
If anyone knows what might be causing this, or knows of a better way to debug the site on mobile than in Chrome dev tools, please let me know!
I use Opera mini to test mobile devices (aka android) with various screen resolutions.
"height is set to 100vh" huh? never saw that one before. To fit graphics within space available, avoid fixed sizes (aka 100px) and I use relative width:xx%
YES, it's wasteful to send large graphics to a mobile device and from the server, you need to send some xxx-low-res.img instead
it's helpful to load JS scripts into a section to allow all objects to be loaded first.
I think your main issues is that the big images should use smaller, light-weight pictures instead since it'll speed up the resize process when rendering on the phone. Other than that, you want to stick away from, as #jobeard mentioned, from using fixed sizes like the 100vh and use a relative width such as 10%.
I'm facing this problem only in chrome. When I scroll up and down, I'm facing lag. This only happens in Chrome browser and I have the latest version. Website is based on PHP framework. Could anyone please identify the problem? Is there a problem with the website or the browser? Here is the website link: http://airfuz.com
Thanks in advance.
I would say that one cause is the massive image in the center. (the guy with the google glass) - this image is more than 5000px X 3400px+ but scaled down to around 500px. Which is together with other large images on the page. http://airfuz.com/Images/2014/05/man-wearing-google-glass.jpg
when i remove that image, it scrolls much smoother...
Consider using a php thumbnailing script (like timthumb or phpthumb) to actually serve images close to the size they will be shown. This will also benefit the load times of the site.
Your website has too large assets that simultaneously loads. Maybe that is the cause of the problem. Here's why I've concluded with this answer:
When the website's assets are loading, the scrolling lags. (Tested with Chrome & Firefox)
After the website has fully loaded, my Google Chrome shows less lag. While on the other hand, Firefox showed me no difference at all.
You could shrink down some assets, I think that will, somehow, lessen the lag.
And I noticed something about your website, you are using the HTML5 Doctype. However you are also using HTML4 Mark-up Tags (I saw the <center> tag). Well, this might not affect the problem but this will affect HTML5 Validity. =)
Well, hope I helped somehow.
Google Chrome notorious bug Issue 753053
My PhoneGap application uses slide in and slide out animations using entirely CSS animations.
You can find the project I based my app on here.
As you can see from the demo the slide transition is quite smooth, but as soon as I add images, after the new page is loaded it flickers/blinks for a fraction of second. The interesting thing is that all the UI elements are shown on screen and then the flickers occurs. More, sometimes the page scrolling becomes buggy and it doesn't let me scroll to the bottom of the page where my images are.
I cached the images using CSS to improve image load but again no luck.
I also found on different blogs about a similar issue on JQ mobile and tried adding without luck:
webkit-backface-visibility: hidden;
You don't know how much I appreciate your help I spent my whole Saturday trying to figure this out.
After some hours of fiddling I realized that the issue was because of the scrolling mechanism and fixed header which are poorly supported by -webkit browser. I am now using iscroll 5 and the issue disappeared.
it is due to you JS files
if you load the more js file on html page then it will take time you will find the filck in phonegap application
when you develop application in phonegap then try to use single page architecture to develop application that must be the better option
even i am suffer this problem.
I have been redesigning my WP portfolio website of late and have been playing with a neat little aesthetic jQuery plugin, BlackAndWhite, Which turns all of the images in my gallery view black and white and makes them recolor on hover using the HTML5 canvas.
I noticed one bug with the plugin is that if it runs before the images have finished loading, it will sometimes only grey-scale half of an image. So I have been using another tiny plugin to only run the script after I'm certain that the images have finished loading. see waitforimages.js
The initialization script is the following:
jQuery(document).ready(function(){
jQuery('.bwWrapper').waitForImages(function(){
jQuery(this).BlackAndWhite({
hoverEffect : true // default true
});
});
});
where bwWrapper is the wrapper around each img.
Now this works really nicely on most computers and browsers that I have tested thus far. Everything works the way it should. However, when I opened the site on my android, I noticed that only 50% of the images recolored. When I refresh the page, again only 50% go black and white, though it is different ones each time. Making the site fully responsive to mobile is still on my to-do list, but I have noticed this fairly blatant, yet difficult to explain bug.
Any idea what might be causing this?
You don't need to preload the images because the plug in aleady do it. Try to download the last version of the script on github https://github.com/GianlucaGuarini/jQuery.BlackAndWhite and if you still have problems send me a private mail with a link so I can check what could be the problem.
A website I'm currently designing displays and works perfectly in all mac browsers, and Windows Firefox, Chrome and IE 8.
I'm having major problems in IE 7 though. Whilst the CSS is pretty much there (a few tweaks needed), the site is maxing out my CPU at 100% rendering the site almost unusable and giving me scripting errors and javascript functionality is not working.
I don't even know where to start trying to find out what's maxing out the CPU, or how to get more info on the scripting messages - it tells me the line the problem is on but it doesn't tell me what file.
I'd like to provide a link but the client has asked me not to.
Any help would be greatly appreciated.
Thank you
Most likely, this issue is caused by ie's poor png rendering capabilities. In the situation that I have experienced, we were using jquery ui 1.8.7 to render modal dialogs and seeing the memory usage spike by 6-8 mega every time a dialog box was opened. It turns out that the culprit was the opacity and alpha CSS settings in the default jquery styles. See this post for a possible partial fix.
Other things to note include:
There seem to be many fixes that attempt to address this issue.
Jquery 1.8.16 has a partial fix where the large memory jump will only happen when the first dialog box is opened.
We have also experimented by setting a single pixel png as the modal background and this rendering of a single pixel caused the memory used by IE to spike 80 megs and caused a temporary spike in CPU usage.
One other peculiar observation was that if we set the modal value of the jquery dialog to false and created our own modal background by appending a div whose background was set to a semi-transparent png, the memory leak seemed to be smaller.
The short of it was to stop using transparent pngs and the opacity and alpha settings foe rendering in IE.