After installing and configuring a few plugins to optimize the cache and increase my score, my images refuse to appear on client pages. Even in the library they are not displayed. however the links of his images are very real and they lead to the images in the folder. I then uninstalled these plugins and clear the cache but still nothing.
Here are the plugins:
GT metrix
WP fastest cache
Shortpixel image optimize
Lazy load - optimize images
Lazy load - optimize images
Hey Giovani, this is probably messing up something, you should just remove it. (Just a wild guess, with no code nor link to your website, no wizards tricks)
Lazyloading has since been incorporated as a default feature on most major web browsers.
You can use loading="lazy" in you image tag <img src"" alt="" loading="lazy" >
No library needed, by using loading="lazy" if an image need to be lazy loaded, the browser knows it and will to it by default
https://web.dev/native-lazy-loading/
https://caniuse.com/#feat=loading-lazy-attr
Hope this will help you
Related
I'm using Next.js 10.0.7 and next-images 1.7 and big images take some seconds to appear.
I'm using the components correctly, you can see bellow, but I think that there is a solution to my problem.
<Image
height="600"
width="800"
src={
'https://myImageURL.png'
}
alt="my image"
/>
Some questions:
If I convert all images to .webp images is be showned faster?
Is there a solution to this problem?
I've been having trouble with the same issue, mostly in Slider components. Basically, because the image is off-screen until the Slider moves it into view, there is a delay and it doesn't show for a short time, which looks nasty.
Solution:
Add the sharp package.
The problem comes from the default image processor that NextJS uses. I don't know if this is good for OP, but in my case, I hadn't fully read the docs. There is a tip that states:
The next/image component's default loader uses the 'squoosh' library for image resizing and optimization. This library is quick to install and suitable for a dev server environment. For a production environment, it is strongly recommended that you install the optional sharp library by running
yarn add sharp
in your project directory. If sharp is already installed but can't be resolved you can manually pass the path to it via the NEXT_SHARP_PATH environment variable e.g. NEXT_SHARP_PATH=/tmp/node_modules/sharp
After adding sharp, my images were processed much faster and there is no noticeable delay anymore. I would try adding this before adding priority={true} to every image, as that will impact the site performance.
The problem is that the default behavior of the Image Component is lazy loading. You can change this behavior to eager by either adding the loading prop like this: loading="eager" or by adding priority={true}.
The recommended way is using priority.
About the image format. Webp is smaller than png, so it will load faster.
upgrade your next higher than 11.0.2-canary.20
yarn add sharp
beer
https://github.com/vercel/next.js/issues/23637#issuecomment-885631610
https://nextjs.org/blog/next-11-1#image-optimization
My wordpress website is extremely slow on loading the page. It's takin 8.3 seconds from Frankfurt sometimes more.
I am using Bluehost and I have heard it's slower but this seems too much...
You can see the waterfall here:
https://tools.pingdom.com/#5a253be0d4c00000
I noticed it has huge waiting times for the main page...
I have tried multiple things but had no success in bringing it down.
I am now using W3Cache but it's not helping much..., the loading speed is much the same. I have used it on other sites before with better results...
I have also changed most of the images by .jpg images that I optimized.
Does any one have any ideas or what I can do to bring the loading speed down to at least 4s? It's 8s right now
And any intel on why this is happening and how I can solve it would be great!
Since you are loading 45 .js and 25 .css (!!!) I think you'll benefit a lot from a merge and minify.
I like Autooptimize plugin for that, but you'll probly need some manual tweaking as well.
You should always move all possible JS to footer (last parameter from wp_enqueue_script), because <head> script load blocks rendering.
You could edit out useless loads or unused parts from files.
Like, you're loading font-awesome.css and their font files with ~4k icons twice (once in theme and again in a chat plugin).
You're loading a complete animate.css with it's ~80 animations code, just to use 1 or 2...
Also identify some css and js that are not needed for home and manually block them from ever loading on home making that page load faster...
// functions.php
if(is_home()) {
dequeue_style('handle')
dequeue_script('handle')
}
I have created website in wordpress and its about to go live from test server to live server.
Its simple website which having multiple plugins.
After completion of development we have enable cache and minify css/js from below pluign.
1)Better WordPress Minify
2)W3 Total Cache
I have been testing website on my test server which is basically shared server.
I have done test loading time on
1) pingdom
2) GTmatrix
3) google page speed tool
4) webpage test
Now i am getting website loading time which is vary from 6-10s, can you help me how further i can reduce loading time.(i have applied all .htaccess tricks and w3totalcache settings)
Below are parameter need to yet fix from gtmatrix and google page speed which i have tried but coudnt achive.
GTmatrix:
1) Y-slow -> Add expiry headers (list show minify js, css only (minify bunch only))
2) Page speed -> Leverage browser caching (list show minify js, css only (minify bunch only))
Google page speed:
1) Leverage browser caching (list show minify js, css only (minify bunch only))
Can anyone guide me further how can i,
1) How can i apply browser caching for already minify js and css?
2) There are multiple images from database which taking time to load on home page..how can i reduce loading time? (images are optimised already)
I have tried on check google but coudnt find anything suitable for me..
Please help.
Thank you in advance.
For #2, you can implement lazy load for images. Also, make sure you are specifying width and height of the images, and loading appropriate size images (i.e. not scaling down to display the required size).
The images might be optimized but are they as small (width x height) as they can be? You didn't load a larger image than you needed did you?
Hi I am redesigning my website, I am a novice at JS and CSS, pretty good with HTML 5. I am working on a new responsive web site with a gallery page of images using Lightbox.
The Beta Site and Gallery Page is here:
http://www.sound-enclosures.com/FanAir/index-3.html
I have a Link to " img src= " to the Thumbnail and a "a href= " to the BIG Image.
Problem is only One of Four Images load. It's the First Image on the Page The Blue Picture. This seems to work correctly. The other Images try to link, however they just Hang Up on Loading. I have verified the file names, locations, checked the URL's etc.
I am using Lightbox.min. script before "/head" and bootstrap.min.js at the bottom of my page before "/body"
The Monster Template I am using was furnished with jQuery v1.11.1,
I have read in the Stackoverflow Forums that JQuery 1.8 seems to work better with Lightbox, I have not tried that and would be reluctant to do so as it might mess up other pages.
Can any one take a look and possibly provide some assistance, guidance?
Thank you all in advance.
Scotty
Your images do not load because they are either not on your server or not in the folder images
There is no image named: page4_pic15_Big.jpg that is set as your href:
<a href="images/page4_pic15_Big.jpg" data-title="Heavy Duty Centrifugal Blower" rel="lightbox"> <img src="images/page4_pic15.jpg">
Backward Inclined Blowers<br>
</a>
I slightly extended the discovermeteor tutorial and added an image to every post in post_item.html:
<img src="discover.png" height="40px" />
After putting discover.png in the public folder everything seems to work as expected. However if you open the detail page (click on 'discuss') and come back to the overview (click on 'microscope' in the header) the pictures or not loading anymore. It happens in Safari and Firefox, in Chrome it's still working as expected. I put the example on http://img-notloading-safari.meteor.com
I don't know if this has something to do with it, but I noticed, the 'waitOn' function of iron:router is called twice when the overview is loaded in the beginning, but only once when I come back form the detail view and the pictures are not loading.
Any hint would be highly appreciated.
I looked at network requests in Firefox and for some reason it tries to load http://img-notloading-safari.meteor.com/posts/discover.png, which is not there. Maybe this happens because the template is rendered before the url changes.
I suggest you changing the url of the image in <img src= from discover.png, which is a relative url, to a /discover.png, that is, to absolute path.