I have searched for this everywhere but I don't think there is anything written yet for this.
Every week I optimize 1 to 2 Shopify and WordPress sites. When Google shows images in "Defer offscreen images" in the opportunities section I usually add https://github.com/aFarkas/lazysizes in shopify.
I have noticed one thing sometimes even after adding lazyloding to the images google still shows some images in "Defer offscreen images" in the opportunities section whereas it should not show them.
I'm sure if you have optimized the speed of multiple sites you would have also noticed this problem.
The problem is not with Google Page Speed Insights, it is with your implementation / your plugin.
Take the following as an example (part of the brand images section):-
<td>
<a href="https://www.primemassagechairs.com/collections/ultracomfort-america" title="UltraComfort America">
<div style="text-align: left;">
<img src="//cdn.shopify.com/s/files/1/2444/6637/files/UltraComfort_Logo_Home_Page_Image.jpg?v=1553734908" alt="Ultra Comfort Lift Chairs" width="" height="" style="float: none;">
</div>
</a>
</td>
The plugin is not recognising this as an image to be lazy loaded (or you have not adjusted it for lazy loading as per the instructions on the plugin - I am not familiar with the plugin to know what you are meant to do here).
As a src is set for this image it will be downloaded normally and that is why Page Speed Insights is marking this as a problem.
As far as I can tell the correct format for this should be
<img data-src="//cdn.shopify.com/s/files/1/2444/6637/files/UltraComfort_Logo_Home_Page_Image.jpg?v=1553734908" class="lazyload" alt="Ultra Comfort Lift Chairs" width="" height="" style="float: none;"/>
with the image URL as the data-src and a class of lazyload in order for the plugin to work and no href set.
Either manually adjust this or find another plugin.
As a final thought - the way this plugin is implemented means that if the site has no JavaScript the images will not load at all, it may be worth exploring a better option that provides a <noscript> fallback for the images (or adding them yourself).
Related
We have a number of video references in our web app which lazy load YouTube videos as embedded iframes. We want to have the videos autoplay so a single user click will suffice to load the YouTube iframe into the page and start its playback. We've had this working as recently as a few months ago, but the autoplay is no longer occurring. I know there was an update to Google/YouTube policies in the spring of 2018 which limited autoplay; has there been a more recent change I don't know about? Otherwise, does anyone know why this might have stopped working?
I've tried the most recent iframe examples I could find online, with several variations (e.g., with and without mute=1). None of these seem to work.
Here's an example of our iframe markup:
<iframe allow="autoplay" frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/sapLz6NjvJk?autoplay=1&origin=https://OurWebsiteDomain" title="Bug Week " height="278" data-ytbridge="vidSurrogate2" style="width: 100%;"></iframe>
Major browser have disabled these features due to general abuse.
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
https://blog.mozilla.org/firefox/block-autoplay/
YouTube checks upon loading whether it has permission to play how it wants to play the video. It will only autoplay if it has proper permission. The default in recent Chrome and Firefox builds is to only allow video - no sound. Adding &mute=1 the the youtube URL allows (muted) autoplay. This works if you don't necessarily need the sound, if you do then you will have to make the user click play themselves.
Applying this to the embed in your example:
<iframe allow="autoplay" frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/sapLz6NjvJk?autoplay=1&mute=1&origin=https://OurWebsiteDomain" title="Bug Week " height="278" data-ytbridge="vidSurrogate2" style="width: 100%;"></iframe>
I'm not a tech person so forgive me - until today my website was developed to display a selection of instagram images on my (bluehosted) website based on various hashtags, but now the images no longer display. The url is http://go-where.co.uk
The original developer has moved on and I am in need of advice to resolve the issue please as the website relies on this functionality. I have notes left by the previous developer which contain links that cannot be posted as I am a new user and have a limit of 2 links.
So I was able to take a look at the issue... there is something wrong with your wordpress config as the urls over at instagram have not been altered...
this photo that I pulled from your site still renders just fine
your code looks something like
<a href="https://www.instagram.com/p/BCQI4EGwhT4/">
<img src="/wp-content/uploads/instagram/12748323_236400550029515_122771_n.jpg?ig_cache_key=MTE5MzQ5MjkzODMyNDMxNzQzMg%3D%3D.2">
</a>
This issue is therefore with your <img> tag and has nothing to do with the Instagram API.
I'm not a web developer. I'm a budding game developer and I'm just making myself a website for my portfolio.
I made this as a little college project. Its just one html page with almost nothing on it. And everything is added to the DOM with javascript (when you go to a new 'page' the last stuff is removed)
For my portfolio site I want to do something similar to this. Where the title / breadcrumbs and so on remain static and the content changes depending what project you want to look at.
In my bookshop example the JS add/remove was convenient cus all the books had the same types of info and it was just stored in a little database like structure.
For my portfolio website each project content bit might have a different layout / info as each project is different. (eg some might be just a video, some might be all text etc.)
So iframe springs to mind but I know that iframes are bad for accessibility and thats something I want to avoid as a general principle.
Any of you web guys have any ideas as to how to load a page (or achieve something similar) into another page without iframe so it is really part of its host page and reads that way not just visually but would read properly by a blind person say (I forget the word for this!)
Consider using php to fill a div with the information. You can then store the project content in a separate file from the rest of the page, and it is separated from a markup standpoint as well (which is what I'm guessing your after?)
Note that the user will receive both pages together, its only separate from the server's point of view.
For example (untested):
<html>
<body>
<div id="projects">
<? $page = file_get_contents("projects.html"); echo $page; ?>
</div>
</body>
</html>
We have created a button template where an editor can associate a web analytic tag with it. The issue is we would like to reuse this button component on the same page but still be able to differentiate where on the page it is coming from.
Has someone encountered this issue before? We're looking for some insight into the problem and perhaps some ways to solve this without modifying the template.
FYI, we are using Tridion 2009 SP1.
Thanks!
Updated with HTML
<a href ="/security.jsp" onClick="trackCustomLink('tttt:p:apply-now','Link','onClick');">
<img src="/images/GICs/applynow-button.gif" border="0" alt="Apply Now" /></a>
Assuming your button is rendered with a component template, it seems like you need to just use the Ordinal Position of the component on the page - Can you specify what kind of templates you are using (VBScript or Modular with DWT or C#)? Base on that we may be able to give you some code samples.
Graham bird has a good article about OrdinalPosition with VBScript at: http://www.grahambird.co.uk/2011/01/ordinalposition/
The idea behind this is that you add the ComponentPresentation.OrdinalPosition value to your analytics code.
I have a small snippet of code that I want to load a portion of another website embedded in one of my aspx pages:
<tr>
<td style="padding-left:15px;">
<iframe src="http://www.google.com/" width="210" height="100" /></iframe>
</td>
</tr>
When I view the page in IE the frame has the following warning text:
To help protect the security of information you enter into this website, the publisher of this content does not allow it to be displayed in a frame.
However, under no circumstances does google.com, or any other external page load for that matter. An iframe is a pretty simple tag...is something obvious missing, or is ASP.NET imposing some contraint?
Thanks in advance.
Read the warning text - it is telling the truth. The publisher (google) does not permit hosting their site in an iframe or frame. Google does this by adding a http header, "X-FRAME-OPTIONS: DENY" which modern browsers will - and should - obey.
https://developer.mozilla.org/en/The_X-FRAME-OPTIONS_response_header
No this this nothing to do with ASP.NET it is all client side issue.
I just created a plain HTML page and got same error in IE but works well in FireFox
<htmL>
Test page
<table>
<tr>
<td style="padding-left:15px;">
<iframe src="http://www.google.com/" width="210" height="100" /></iframe>
</td>
</tr>
</table>
</htmL>
Numerous websites actively prevent you from loading their content in a frame. Even StackOverflow denies this.
Some actively take control of the browser and force the top level to redirect to their homepage. There are a lot of reasons for doing this.
So, if you want to put your own content in an iFrame, that's fine. However, if you want to put other people's content in an iFrame then I'd suggest that you stop. It isn't considered polite behavior anymore.
If you're trying to load a page from your own site in an iframe, and if you're using ASP.NET sessions, it's possible to encounter a race condition that will prevent that iframe from loading.
For third-party sites, though, as others have said, ASP.NET doesn't care; "it's a browser thing".