I'm working on a Wordpress website which is completely made out of Visual Composer.
On one page I must use parallax effect which includes 4 different
sliders with one slide (I'm using it that way as the template that I've imported is looking the same as my client want).
But the thing is, parallax effect is so laggy and totally ruining the
looks. On example, the slider looks normally but when I change slider
layers than it becomes laggy. Any thoughts how to fix this?
Thx
Make sure you use the correct picture dimensions (... px x ... px)
I also compress my images before uploading it to my Wordpress website (kraken.io has a good free online tool for this)
I use W3 Total Cache (or WP Super Cache) to speed up my websites. (Don't forget to exclude the revslider in the minify js: wp-content/plugins/revslider/rs-plugin/js/jquery.themepunch.revolution.min.js?ver=4.6.92 => number depends on you'r version or revolution slider)
There are a lot of other things to keep in mind (version Wordpress, other plugins, hosting, ...)
Related
I am running a light wordpress installation, with a light theme (neve). I am running a CDN (cloudflare), I am making most optimizations that I can think of with some room around images and custom code stripping.
However I am not even close for my pages and even if I test AMP pages which are stripped down I don't get a passing score which concerns me. Can anyone help me out, for example 1 of my blog post pages:
Amp report:
https://pagespeed.web.dev/report?url=https%3A%2F%2Fwww.culturalistpress.com%2Fanycubic-photon-mono-3d-printer-is-it-good-what-materials-can-it-use-what-software-does-it-use-and-how-does-it-compare-to-the-anycubic-mega-series%2F%3Famp%3D1
Not amp report:
https://pagespeed.web.dev/report?url=https%3A%2F%2Fwww.culturalistpress.com%2Fanycubic-photon-mono-3d-printer-is-it-good-what-materials-can-it-use-what-software-does-it-use-and-how-does-it-compare-to-the-anycubic-mega-series%2F
In both cases my main thread processing is too much and too much JS - short of that I don't see a lot of savings. Most the JS comes from ads which I don't understand why they are blocking in this case.
I have checked your both reports, the man issue is with Javascript. As your website has developed in WordPress use some 3rd party plugin like WProcket and perfmatters to reduce unused Javascript. Your page DOM size, it is created when you have too many sections in your page. Try to reduce those sections to reduce the page size, minimize the gap between paragraphs.
Adjust the images size and try to use WEBP format of images. Also check the compatibility of third party plugins with you WordPress version which you have installed.
Since google updated their way of scoring mobile I have trouble to optimise my websites.
I want to know what am I doing wrong and what should be done to existing sites to make the score higher. Its easy to get 95-100 on desktop but on same site on mobile will be 25...
Before someone says to follow suggestions by insights then I will say that I do and I managed to remove most of them - worst thing is that the score didn't move at all. This is the biggest struggle I have, it seems that whatever I do it wont be good enough...
I followed this guide https://kinsta.com/blog/google-pagespeed-insights/ + some of my own solutions.
Is there anyone that has any good tips or permanent solution for this issue?
Google Report
As evident from your Page Speed Insights report, the main factor responsible for your low score is images. The solution to this is using RESPONSIVE IMAGES, which will drastically improve the speed of your website on mobile. What it basically means is that, you'll have to keep different sizes of the same image available for the browser and browser will decide which version of the image is suited on a particular resolution.
1) Here's everything you need to know about Responsive Images --> Responsive Image (CSS Tricks)
2) You have to shift the <link href=".." .../> and <script> tags from top of the page to the bottom of the page, just after the <body> tag. This will fix the `Eliminate render blocking resources issue.
3) You can use Javascript Minifier to minify your JS. Just paste your existing JS code inside the Input Javascript box on the website and click MINIFY
Also, cache policy is also one of the factors, bringing your score down. An efficient Cache policy will make browsers, load your website faster, after the first load. Cache handling is server specific, its different for Apache, Express etc.
I noticed that my images weren't crisp, and in the inspector found the piece of code that is making them blurry. But, now I don't know where to look within the actual code to remove this. It's not assigned in CSS. This is a portfolio page. I am using the Avada theme. Any ideas?
Link: http://www.madpeagames.com/gacha-sets/
enter image description here
Looking at your theme's demo I see sharp images and the image code is different. So, the problem is not caused by your theme.
My guess is that you use Jetpack's Photon on your site. Try to deactivate the module and see if this changes anything.
However, image compression is a good thing, especially when using lots of images. Perhaps, if deactivating the Photon module solves the issue, compare the speed of your website with and without Photon. If it makes a notable difference, look in the Photon settings, to see what you could change to solve the issue.
Also, JPEG files (.jpg) may not be the best choice for your thumbnails, because you lose a lot of quality when the image isn't shown at its original size. If changing the settings doesn't help, you could try to use PNG files instead.
If Photon causes the issue and you don't find a way to solve it, while still compressing your images, I would suggest to contact Jetpack support. Alternatively you could try to use a different WordPress plugin for image compression.
I hope that helps. GL!
I just finished creating this website from a theme I purchased on ThemeForest. It said to be Full-responsive, but somehow it won't display the Slider and the video on mobile, as it does in the desktop version.
I've tried looking at the css file and try to figure what might cause this, but I don't have much experience with #media. The website's address is http://topnotchweddingvideos.com/. I've also went over the documentation for the Revolution Slider and couldn't figure it out. If someone could take a look at it and suggest what I could do would me much appreciated. I don't expect anyone to do the work for me, I'm just trying to get some feedback or ideas.
P.S. It would also be good enough if I could have the video only display before About Us in the mobile version.
Change The theme!!
or reach to developers of the theme. There's problem in theme. i also have used the revolution slider in my wordpress site working 100% in mobile. your Theme is not 100% responsive
Okay,
So I figured out on my own how to make a mobile site out of an Artisteer template.
Basically, I changed the sheet to 100% fluid width, minimum 300 px, one column, got rid of the menu and replaced it with a vertical menu, got rid of most of the blocks or put them under the vertical menu, made everything smaller and simpler. Smaller fonts, got rid of most of the padding except for 3px, made the header shorter, made the vertical menu bars tall enough to press with a finger, etc. My new mobile-friendly site looks great.
So now what? Do I export it as a WordPress theme and then have two installations of WordPress for every website?
Or do I export it as html, use a redirect WordPress plugin, an add an RSS feed?
Hmm...I think I may try html, but would love some feedback anyhow.
You definitely don't want two installations of Wordpress... double the admin overhead, duplicate content etc - not the way to go.
Easiest way IMO - and indeed, this is the way recommended by some commercial mobile theme developers - is to use a plugin like http://wordpress.org/extend/plugins/mobile-theme-switcher/ which simply detects the user agent of the client's device and switches to your mobile theme if it's a mobile device. So one Wordpress installation, two themes.
I know recommending a pluign isn't really the SO way :) - you can always look through the code and integrate it directly into your theme if you needed to.