We use PageSpeed Insights to measure the performance of our website (drupal 7 and picture module for lazy loading).
In the mobile results we got the message, that the LCP (largest contentful paint) was too high (4.5 s) and the following code is shown.
<img class=" lazyloaded" data-src="https://www.interelectronix.com/sites/default/files/styles/view_einspaltig_abfallend/public/image_contenttype/impactinator_glas_ik10_4.jpg?itok=YxPF9YZf×tamp=1559550873" alt="ABNT NBR IEC 62262 " title="" src="https://www.interelectronix.com/sites/default/files/styles/view_einspaltig_abfallend/public/image_contenttype/impactinator_glas_ik10_4.jpg?itok=YxPF9YZf×tamp=1559550873">
If we have a look in the Chrome developer tools, we see in the network tab, that not the image in the code (https://www.interelectronix.com/sites/default/files/styles/view_einspaltig_abfallend/public/image_contenttype/impactinator_glas_ik10_4.jpg) was delivered (the image in the code has about 110 KB file size), but a image with a lower resolution (which has about 47 KB file size).
Now we change the delivered image with an image (47 KB) with an image of 14 KB file size.
But the PageSpeed Insights values don't change. It's always the same 4.5 s.
Use PageSpeed Insights the image in the code for calculating the value?
Or what can we do to get a faster time result?
LCP is about when the largest item on the page is painted, it has nothing to do with the size of that item in kb (other than a smaller element will load faster).
What you want is for the "above the fold" content (content visible without scrolling) to be fully painted in less than 2.5 seconds, ideally 1.5 seconds.
To achieve this you need to make sure all of your CSS that is for "above the fold" is inlined within your HTML. (known as "inlining critical CSS").
Doing this will also fix "Eliminate Render Blocking Resources" as everything needed to render the page will be loaded with the first request. Finally this will also help with Cumulative Layout Shift as things won't "bounce" around the page as CSS styles are loaded.
For images above the fold you do not want them to be lazy loaded, instead you want them to load normally as they need to render as fast as possible. You also may want to ensure that the background image you use for the logo has the relevant CSS inlined as well as otherwise that will load in late. (better yet convert the logo to an inline SVG to save an unneeded request and page weight).
Finally I noticed you use a video background, it is unlikely you will get top scores as this uses a lot of bandwidth. I would suggest replacing your video background with a static image on a mobile to save the massive overhead associated with a video background.
By all means move the video further down the page and lazy load it in, but perhaps allow users to start the video manually.
Allowing a user to decide whether to play a video helps both with people who have low data allowances and also with people who have ADHD, autism etc. who may find a moving image distracting.
Anyway I have gone off tangent a bit. To fix a late LCP make sure that all above the fold assets have priority and are as light weight as possible basically.
You may find this article explaining LCP useful, as well as this article on how to optimise LCP for understanding what you need to look at.
Related
So this is more of an inquiry,
I visited https://openmaptiles.com/satellite/ and it is my understanding that "Highres aerial imagery" is still to be added. So, my first question will this imagery comparable to the imagery we see in Google Maps and Bing Maps? I attached some of OpenMapTiles lower resolution imagery for comparison. Also, is there a scheduled release date for coverage of the US? Maybe I'm getting ahead of things here but will the imagery be available for download at a one time fee and will it be as affordable as the OpenStreetMap tiles?
I guess this is related to the cost to acquire high resolution data. At the moment, free data sources such as Sentinel-2, Landsat-8, and CBERS4 are 5m to 30m resolution. Higher resolution data like what one would see in Google Maps and Bing Map are very expensive as they require commercial satellite images or aereal photographs. The gov't and local municipalities often provide high-res geospatial data for free on their websites (like open data), if you need data for only a few urban area.
I'm going to make an app which will require messaging. Now I have questions about making the messaging UI. I want to make it similar to Go SMS Theme Minimal UI
I am assuming that I'll have to use listview and 9 patch png.
But I need a expert advice.
I would say that that is a good approach. You will definitely need a list view, the real question is just how to build the list item background.
Looking at the image you shared, the pointy part of the box (outlined in red) is really all that can't be stretched, so you could make a 9 patch similar to this.
The top and left are the important part, they tell the 9 patch which parts can be stretched (or repeated, really. The bottom and right tell it which parts can contain content. So if you always need a certain amount of padding then you can use those to define that.
I'm not a designer, but what I like to do is take an image like this, obviously trim out the content, then trim it down in the middle so one black line on either part (top/bottom, left/right) is only 2 pixels wide. This allows the smallest possible asset so you don't load as large of a bitmap, but still gets all of the appropriate information.
At present, when I go to Plus and look at photos taken through Glass, I see metadata like this:
Location Add a location
Date taken 6/7/13, 1:09 PM
Dimensions 2528 x 1856
File name 20130607_130926_201.jpg
File size 1.49M
Camera Glass 1
Focal Length 2.95mm
Exposure -
F Number f/2.48
ISO -
Camera make Google
Flash Not used
Exposure Bias -
Views -
I'd love to use the Glass' built-in GPS (or even my Android's GPS, if necessary) to add a location to the image.
My hack is to subscribe to the user's Locations and immediately query for latest location upon receipt of a photo. However, there are obvious accuracy limitations to this approach.
...is there a setting I'm missing somewhere that lets me enable this? (Asking for more metadata, like ISO and exposure, will probably come in another question or a more direct request to Google)
Thanks!
AKA
Location information is not included in the EXIF data on photos taken by Glass.
But there is one simplification that we can make to your current solution. The timelineItem also contains location information. You can use this instead of making an additional request to the locations collection.
This should contain location at the time the original timeline item is created (when the photo is taken), but there's a known issue which causes it to be stale. The data is no less accurate than what you're already fetching, though, so at least it will save you a request to the API.
I show a gravatr image of users in my site. How can I know the best highest resolution to use? e.g. which parameter "s" should be.
https://secure.gravatar.com/avatar/?s=250
of course it depends in the user image, but gravatr must know the resolution of the initial image and can advise me on best highest size.
It seems the maximum size changed drastically in the last 9 month
You may request images anywhere from 1px up to 2048px, however note that many users have lower resolution images, so requesting larger sizes may result in pixelation/low-quality images.
quoted from the Gravatar image Request tutorial
I don't think it is possible, I just did some research on that matter because I have the same need, but I think Gravatar was designed for websites that will show all avatars at the same size, which means small avatars, and if it's too big for some of them, they'll be ok with the automatic upscaling.
They should include a "?s=native" to get the native size.
This is what Gravatar writes about the resolution of the avatars:
You may request images anywhere from 1px up to 2048px, however note
that many users have lower resolution images, so requesting larger
sizes may result in pixelation/low-quality images.
The highest resolution of the default image would be 2048px:)
Read more about Gravatar images (including the default image) on https://en.gravatar.com/site/implement/images/
EDIT: You will see the picture cannot get any bigger than 2048px x 2048px even if you set s=3000:)
EDIT 2: Apparently the maximum size changed from 512px to 2048px
I was wondering how does Nike website make the change you can see when selecting a color or a sole. At first I thought they were only using images and when the user picked a color you just replaced that part, but when I selected a different sole I noticed it didn't changed like an image it looked a bit more as if it was being rendered. Does anybody happens to know how this is made? Or where can I get further info about making this effect :)?
It's hard to know for sure, but my guess would be that they're using a rendering service similar to that provided by Adobe's Scene7.
It's a product that is used to colorize/customize a base product image based on user choices.
If you're interested in using the service, I'd suggest signing up for their weekly webinar. I attended one a while back and was very impressed with their offering. They showed the Converse site (which had functionality almost identical functionality to the Nike site) as a demo.
A lot of these tools are built out in Flash using a variety of techniques:
1) You can use Flash's BitmapData object to directly shift the hues of the pixels in your item. This is probably the simplest technique but often limits you to simple color transformations.
2) You can pre-render transparent PNG's (or photos, I guess) containing the various textures you would want to show on your object (for instance patterns or textures) and have them dynamically added to your stage at runtime. This, I think, offers the highest fidelity but means you need all of your items rendered upfront.
3) You can create 3D collada files and load them via a library like Papervision3D. Then dynamically change the texture at runtime. This is the most memory intensive technique and tends to result in far worse fidelity, but for that you get a full 3D object that you can view in space.
I'm sure there are other techniques but those are the top 3 I can think of. I hope that helps!