On my page here:
https://www.wikijob.co.uk/content/aptitude-tests/test-types/aptitude-tests
Using mobile pagespeed insights, I get a 'Defer offscreen images' suggestion on mobile only:
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.wikijob.co.uk%2Fcontent%2Faptitude-tests%2Ftest-types%2Faptitude-tests&tab=mobile
All images on the page are loaded with loading="lazy" or loading="eager".
According the source code in Lighthouse, if an image has a lazy/eager tag, it should be passed automatically:
https://github.com/GoogleChrome/lighthouse/blob/d0d2ca04c80af8f0443f63072415e34d79a205cc/lighthouse-core/audits/byte-efficiency/offscreen-images.js#L85
What could be the issue here?
Related
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
I have a static only site which is hosted on Google App Engine. Infront of this sits Cloudflare CDN.
I have ran Googles Page insights to give me an idea how my website is performing, it is not performing well according to Google. I want Google to see it is performing well for SEO purposes.
This is the report I get from Google:
2 types of recommendations come:
1) Eliminate render-blocking JavaScript and CSS in above-the-fold content
Show how to fix
2) Leverage browser caching
For problem 1 I have tried many things I have read on Google. I have tried adding 'aync defer' to the link attribute. I have tried to make the media = print so that the browser would first render the html then apply the css later. I have tried moving the links to the stylesheets into different locations around the html document. Essentially I have tried to follow this: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery.
As of right now my html page (my website is just on static html page) structure looks like this:
<html>
<head>
<!-- all links/references to css files and javascript files -->
</head>
<body>
</body>
</html>
My second issue is browser caching which I do not understand why I am getting this error. Google App engine caches the files and then on top of that Cloudflare CDN sets the cache headers (and also gzip) on the documents so that the browser caches it (below is the Cloudflare caching components turned on).
I can see the browser is caching the static files and using those cached files in chrome tools when I run the page:
This is really the first time I have created a production static website so I may be misunderstanding many things, but I am looking how eliminate those 2 issues.
Cheers
I don't know if google is measuring this but it is often advised to load Bootstrap and Jquery from the following addresses as they are used by a lot of website and hence are already in browsers caches even if they never visited your website. (The same can certainly be found for font-awesome).
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/YOUR_BOOTSTRAP_VERSION/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/YOUR_BOOTSTRAP_VERSION/js/bootstrap.min.js">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/YOUR_JQUERY_VERSION/jquery.min.js"></script>
This question already has answers here:
Google Maps v3 - prevent API from loading Roboto font
(5 answers)
Closed 6 years ago.
I'm spent the last few days optimizing CSS and Javascript delivery for our website. We improved it to 86, but are having issues with Google Fonts. PageSpeed insights claims we are loading a font called Roboto. I can do a Find All across our entire coding directory and there is not one mention of the word 'Roboto'. We are not using the font.
Our 'Consider Fixing' section is as follows:
Eliminate render-blocking JavaScript and CSS in
above-the-fold content Your page has 1 blocking script resources and 3
blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered
without waiting for the following resources to load. Try to defer or
asynchronously load blocking resources, or inline the critical
portions of those resources directly in the HTML.
Optimize CSS Delivery of the following:
https://fonts.googleapis.com/css?family=Lato:400,900
https://fonts.googleapis.com/css?family=Roboto:300,400,500,700
I experimenting with different loading techniques for Lato (importing, loading async via javascript file), but loading via a link in the header was the fastest method by 10 points. I'm worried Roboto could be affecting our score and is somehow slowing down our site.
Any idea why PageInsights says it is being loaded? If it is being loaded somehow, how can I track that code down?
EDIT: Here is a link to the site
http://www.triphappy.com/
Seriously, the first line in your <head> tag is....
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
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 have recently downloaded Image Resizer .Net due to being interested in to what it has to offer, you can see three libraries in the link I have supplied, I've gone ahead and downloaded all of them.
Rebuilt the project, then navigated to my view and specified a width,height and mode for an image that's getting displayed as shown here.
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/q_80/#profilePic?w=50&h=50&mode=crop">
This URL is of a car its width is 402 and its height is 300, I want to resize is just to test the functionality, but it doesn't seem to change its size? could this be to do with the fact its referencing an external image?
Update.
This is the rendered HTML
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/cunaulfla05xjzb5y2fe.jpg?w=50&h=50&mode=crop">
I read your question again and notice the part that your trying to apply it to an external image. Image Resizer will not work with external images as the images is requested directly to the external repository. In order for the image to be able to be resized it has to be served by your hosting server's IIS, where your website (with Image Resizer) is installed.
Make a quick test with a local image and see if that works.