Monday 29 August 2022

Core Web Vitals

What is Largest Contentful Paint (LCP)?

Largest Contentful Paint is the metric that measures the time a website takes to show the user the largest content on the screen, complete and ready for interaction.

Google defines that this metric considers only the content above the page’s fold, meaning everything that appears without scrolling.

There is another relevant point, which is related to the type of content considered. The metric only counts the loading time of what is relevant to the user experience, that is:

  • Images.
  • Image tags.
  • Video thumbnails.
  • Background images with CSS.
  • Text elements, such as paragraphs, headings, and lists.

How to measure it?

You can measure LCP in two ways:

  • Directly on the site, by using a method known as “field”.
  • Through performance simulations performed by algorithms, in this case, the lab mode.

For each of these methods, different tools speed up the work and make the measurement more accurate. Starting with the field method, you could use:

  • Chrome User Experience Report;
  • PageSpeed Insights;
  • Search Console (Core Web Vitals report).

As for the lab tools, the most recommended are:

  • Chrome DevTools.
  • Lighthouse.
  • WebPageTest.

What is a good score?

Since metric monitoring is essential, it is also necessary to understand the minimum performance standards expected.

There’s a specific demand from Google’s algorithms regarding page loading time, considering the main content. In this case, we are talking about up to 2.5 seconds, which is a good result.


How to optimize it?

  • Optimize image sizes

Always use images with the right sizing. Your hosting will suggest specific dimensions, either for the desktop or mobile version. Using the indicated size avoids overloading, which can generate a high LCP. Use Webp format images.

  • Use an image CDN

A CDN service can make images load faster. ImageEngine is a tool that does all the work of image adequacy, considering factors such as accessing device, file size, and user location.

  • Avoid JavaScript to load images

JavaScript loading can slow down the process, so the best thing to do is to leave this work to your browser. That helps to prevent any delay, keeping the LCP within the recommended average.

  • Choose a good hosting service

Your hosting service also impacts pages’ loading time. Therefore, find a quality one that has a good reputation in the market, and, mainly, that offers an adequate infrastructure for your site’s size and volume of access.

  • Minify HTML, CSS & JavaScript
Reduces the file size by removing the space in code
  • Enable caching
  • Use system font
If using special fonts then use code: font-display: swap; in CSS so that initialy it will load system font and then when the fancy font is loaded from server then it will show that.
  • Keep DOM small
Excessive DOM size happens when there are too many DOM nodes (or HTML tags) on your page or when they are nested too deep. 
  • Don't keep JavaScript at top or use defer attribute with JavaScript

Async allows parallel download but files get executed immediately after download. Defer allows parallel download and files get executed after HTML is done parsing. So, Defer is better than Async
  • Get the devices list from Google Analytics and test according to real device that user are using.
Ref Video:

What is First Input Delay (FID)?

FID is the time your website takes to start working on first touch/click 

First Input Delay is the metric that measures the delay in response time for a specific user action performed for the first time on a website. 

How to measure it?

Since FID is a stat measured only by real user interaction, it cannot be replicated in a lab setting.

However, Total Blocking Time (TBT) is a metric that essentially measures how much time a browser is blocked and therefore can closely estimate FID. 

To provide a good user experience, sites should strive to have a Total Blocking Time of less than 200 milliseconds when tested on average mobile hardware.

How to find Total Blocking Time (TBT) score of landing page?

  • Press F12 or right click and do "inspect" in chrome browser
  • Enter URL
  • Go to "Performance" tab and do check "Web Vital" & click the reload button

How TBT is calculated?

For example, consider the following diagram of the browser's main thread during page load:
The above timeline has five tasks, three of which are Long Tasks because their duration exceeds 50 ms. The next diagram shows the blocking time for each of the long tasks:
So while the total time spent running tasks on the main thread is 560 ms, only 345 ms of that time is considered blocking time.

What is a good score?

There is a general understanding that a good score is in less than 100ms. 



How to optimize it?
  • Reduce JS execution time
Minify and compress your code & Remove unused code.
  • Optimize CSS
Minify and compress your CSS & Remove unused code.
  • Minimize main thread work
Utilize web workers to do tasks off the main thread & Cut the complexity of your styles and layouts
  • Reduce third party code
Third-party JavaScript often refers to scripts that can be embedded into any site directly from a third-party vendor. These scripts can include ads, analytics, widgets and other scripts that make the web more dynamic and interactive.


What is Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (or CLS) is a measure of how much a webpage unexpectedly shifts during its life. For example, if a website visitor loaded a page and, while they were reading it, a banner loads and the page jumps down, that would constitute a large CLS score.

How do you measure Cumulative Layout Shift?

To analyze performance in PageSpeed Insights:
  • Enter a website URL into Google's PageSpeed Insights tool.
  • Click 'Analyze.'
  • Check your performance. You can review both mobile and desktop performance, which you can switch between using the top left corner navigation.
To analyze performance using Lighthouse tools:
  • Open up the website you want to analyze in Chrome.
  • Navigate to Developer Tools by clicking the three dots in the top right corner of the browser window, choosing “More Tools” and then “Developer Tools.”
  • When the console opens, choose “Lighthouse” from the options along the top.
  • Click “Generate Report.”
How to analyze Cumulative Layout Shift issue on website?

  • Press F12 or right click and do "inspect" in chrome browser
  • Enter URL
  • Go to "Performance" tab and do check "Web Vital" & click the reload button
  • Click on each "Layout Shift" in red to analyse which elements need to be fixed
Whats is a good CLS score?

A good cumulative layout score is anything less than 0.1.
How to optimize it?
  • Fonts
Use fonts that are similar to system fonts, Use system fonts to begin with & Self host your fonts
  • Image
Optimize your image in JPEG or PNG format, Convert these optimzed images in WEBP format & Specify proper size for images 
  • Iframe or Embedded Elements
Give your embedded elements proper size to avoid layout shift
  • Ads
Allot space for ads and set fallback image in case ads spots don't get fill

How to find current Device Usage report in Google Analytics?
  • Open up the Audience tab, and select Mobile and Devices.

Google Search Console Errors List

 Server error (5xx)

Any content Googlebot received from URLs that return a 5xx status code is ignored.
  • 500 (internal server error)
  • 502 (bad gateway)
  • 503 (service unavailable)
Googlebot decreases the crawl rate for the site. The decrease in crawl rate is proportionate to the number of individual URLs that are returning a server error. Google's indexing pipeline removes from the index URLs that persistently return a server error.

To Do:

  • Reduce excessive page loading for dynamic page requests.
  • Make sure your site's hosting server is not down, overloaded, or misconfigured.
  • Check that you are not inadvertently blocking Google.
  • Control search engine site crawling and indexing wisely.

URL blocked by robots.txt

This page was blocked by your site's robots.txt file.. You can verify this using the robots.txt tester. Note that this does not mean that the page won't be indexed through some other means. If Google can find other information about this page without loading it, the page could still be indexed (though this is less common). To ensure that a page is not indexed by Google, remove the robots.txt block and use a 'noindex' directive.

Submitted URL marked ‘noindex’

When Google tried to index the page it encountered a 'noindex' directive and therefore did not index it. If you do not want this page indexed, congratulations! If you do want this page to be indexed, you should remove that 'noindex' directive. To confirm the presence of this tag or directive, request the page in a browser and search the response body and response headers for "noindex".  If you want this page to be indexed, you must remove the tag or HTTP header.

Soft 404

A soft 404 error is when a URL that returns a page telling the user that the page does not exist and also a 200 (success) status code. In some cases, it might be a page with no main content or empty page.

Such pages may be generated for various reasons by your website's web server or content management system, or the user's browser. For example:
  • A missing server-side include file.
  • A broken connection to the database.
  • An empty internal search result page.
  • An unloaded or otherwise missing JavaScript file.

Not found (404)

This page returned a 404 error when requested. Google discovered this URL without any explicit request or sitemap. Google might have discovered the URL as a link from another site, or possibly the page existed before and was deleted. Googlebot will probably continue to try this URL for some period of time; there is no way to tell Googlebot to permanently forget a URL, although it will crawl it less and less often. 404 responses are not a problem, if intentional. If your page has moved, use a 301 redirect to the new location.

Crawled - currently not indexed

The page was crawled by Google, but not indexed. It may or may not be indexed in the future; no need to resubmit this URL for crawling.

Discovered - currently not indexed

The page was found by Google, but not crawled yet. Typically, Google wanted to crawl the URL but this was expected to overload the site; therefore Google rescheduled the crawl. This is why the last crawl date is empty on the report.

Alternate page with proper canonical tag

This page is a duplicate of a page that Google recognizes as canonical. This page correctly points to the canonical page, which is indexed, so there is nothing for you to do.

Duplicate without user-selected canonical

This page has duplicates, none of which is marked canonical. We think this page is not the canonical one. You should explicitly mark the canonical for this page. Inspecting this URL should show the Google-selected canonical URL.

Duplicate, Google chose different canonical than user

This page is marked as canonical for a set of pages, but Google thinks another URL makes a better canonical. Google has indexed the page that we consider canonical rather than this one. We recommend that you explicitly mark this page as a duplicate of the canonical URL. This page was discovered without an explicit crawl request. Inspecting this URL should show the Google-selected canonical URL.

Redirect error

Google experienced a redirect error, either a redirect chain or a redirect loop. By using a web debugging tool, such a Screaming Frog or Httpstatus.io, to learn what causes this redirect error.

Redirect loops are redirects that cause errors because they (eventually) point to themselves, e.g. Page A -> Page B -> Page A. Resolve these by deciding what the correct page is (or should be), and ensure that the final page of the redirect correctly loads. 

Redirect hops are multi-step redirects, e.g. Page A -> Page B -> Page C - and sometimes deeper. (NOTE that Google will only follow 5 redirect chain steps before giving up.) Fix this by changing the redirect from Page A to point directly to Page C, or whatever the final, 200 page should be.

Google experienced one of the following redirect errors:
  • A redirect chain that was too long
  • A redirect loop
  • A redirect URL that eventually exceeded the max URL length
  • A bad or empty URL in the redirect chain

Thursday 20 January 2022

HTTP Status Codes

1xxs – Provide some kind of additional information

100 Continue – Everything is OK right now. Keep going.

101 Switching Protocols – There is a message, such as an upgrade request, that’s changing things to a different protocol.

102 Processing – Things are happening but are not done yet.

103 Early Hints – Lets you preload resources, which can help improve Largest Contentful Paint for Core Web Vitals.

2xxs – Show that a request is successful

200 OK – All good. Everything is successful.

201 Created – Similar to 200, but the measure of success is that a new resource has been created.

202 Accepted – A request has been accepted for processing, but it hasn’t been completed yet. It may not have even started yet.

203 Non-Authoritative Information – Something has changed after it was sent from the server to you.

204 No Content – The request has been sent, but there’s no content in the body.

205 Reset Content – Resets the document to the original state, e.g., clearing a form.

206 Partial Content – Only some of the content has been sent.

207 Multi-Status – There are more response codes that could be 2xx, 3xx, 4xx, or 5xx.

208 Already Reported – The client tells the server the same resource was mentioned earlier.

218 This is fine – Unofficial use by Apache.

226 IM Used – This allows the server to send changes (diffs) of resources to clients.

3xxs – Related to redirects mostly but with few exceptions

300 Multiple Choices – There’s more than one possible response, and you may have to choose one of them.

301 Moved Permanently – The old resource now redirects to the new resource.

302 Moved Temporarily – The old resource now redirects to the new resource temporarily.

303 See Other – This is another redirect that indicates the resource may be found somewhere else.

304 Not Modified – Says the page hasn’t been modified. Typically used for caching.

305 Use Proxy – The requested resource is only available if you use a proxy.

306 Switch Proxy – Your next requests should use the proxy specified. This code is no longer used.

307 Temporary Redirect – Has the same functionality as a 302 redirect, except you can’t switch between POST and GET.

307 HSTS Policy – Forces the client to use HTTPS when making requests instead of HTTP.

308 Permanent Redirect – Has the same functionality as a 301 redirect, except you can’t switch between POST and GET.

4xxs – Errors on the client’s side

400 Bad Request – Something with the client request is wrong. It’s possibly malformed, invalid, or too large. And now the server can’t understand the request.

401 Unauthorized – The client hasn’t identified or verified itself when needed.

402 Payment Required – This doesn’t have an official use, and it’s reserved for the future for some kind of digital payment system. Some merchants use this for their own reasons, e.g., Shopify uses this when a store hasn’t paid its fees, and Stripe uses this for potentially fraudulent payments.

403 Forbidden – The client is known but doesn’t have access rights.

404 Not Found – The requested resource isn’t found.

405 Method Not Allowed – The request method used isn’t supported, e.g., a form needs to use POST but uses GET instead.

406 Not Acceptable – The accept header requested by the client can’t be fulfilled by the server.

407 Proxy Authentication Required – The authentication needs to be done via proxy.

408 Request Timeout – The server has timed out or decided to close the connection.

409 Conflict – The request conflicts with the state of the server.

410 Gone – Similar to a 404 where the request isn’t found, but this also says it won’t be available again.

411 Length Required – The request doesn’t contain a content-length field when it is required.

412 Precondition Failed – The client puts a condition on the request that the server doesn’t meet.

413 Payload Too Large – The request is larger than what the server allows.

414 URI Too Long – The URI requested is longer than the server allows.

415 Unsupported Media Type – The format requested isn’t supported by the server.

416 Range Not Satisfiable – The client asks for a portion of the file that can’t be supplied by the server, e.g., it asks for a part of the file beyond where the file actually ends.

417 Expectation Failed – The expectation indicated in the “Expect” request header can’t be met by the server.

418 I’m a Teapot – Happens when you try to brew coffee in a teapot. This started as an April Fool’s joke in 1998 but is actually standardized. With everything being smart devices these days, this could potentially be used.

419 Page Expired – Unofficial use by Laravel Framework.

420 Method Failure – Unofficial use by Spring Framework.

420 Enhance Your Calm – Unofficial use by Twitter.

421 Misdirected Request – The server that a request was sent to can’t respond to it.

422 Unprocessable Entity – There are semantic errors in the request.

423 Locked – The requested resource is locked.

424 Failed Dependency – This failure happens because it needs another request that also failed.

425 Too Early – The server is unwilling to process the request at this time because the request is likely to come again later.

426 Upgrade Required – The server refuses the request until the client uses a newer protocol. What needs to be upgraded is indicated in the “Upgrade” header.

428 Precondition Required – The server requires the request to be conditional.

429 Too Many Requests – This is a form of rate-limiting to protect the server because the client sent too many requests to the server too fast.

430 Request Header Fields Too Large – Unofficial use by Shopify.

431 Request Header Fields Too Large – The server won’t process the request because the header fields are too large.

440 Login Time-out – Unofficial use by IIS.

444 No Response – Unofficial use by nginx.

449 Retry With – Unofficial use by IIS.

450 Blocked by Windows Parental Controls – Unofficial use by Microsoft.

451 Unavailable For Legal Reasons – This is blocked for some kind of legal reason. You’ll see it sometimes with country-level blocks, e.g., blocked news or videos, due to privacy or licensing. You may see it for DMCA takedowns. The code itself is a reference to the novel Fahrenheit 451.

451 Redirect – Unofficial use by IIS.

460 – Unofficial use by AWS Elastic Load Balancer.

463 – Unofficial use by AWS Elastic Load Balancer.

494 Request header too large – Unofficial use by nginx.

495 SSL Certificate Error – Unofficial use by nginx.

496 SSL Certificate Required – Unofficial use by nginx.

497 HTTP Request Sent to HTTPS Port – Unofficial use by nginx.

498 Invalid Token – Unofficial use by Esri.

499 Client Closed Request – Unofficial use by nginx.

499 Token Required – Unofficial use by Esri.

5xxs – Errors on the server’s side

500 Internal Server Error – The server encounters some kind of issue and doesn’t have a better or more specific error code.

501 Not Implemented – The request method isn’t supported by the server.

502 Bad Gateway – The server was in the middle of a request and used for routing. But it has received a bad response from the server it was routing to.

503 Service Unavailable – The server is overloaded or down for maintenance and can’t handle the request right now. It will probably be back up soon.

504 Gateway Timeout – The server was in the middle of a request and used for routing. But it has not received a timely response from the server it was routing to.

505 HTTP Version Not Supported – This is exactly what it says: The HTTP protocol version in the request isn’t supported by the server.

506 Variant Also Negotiates – Allows the client to get the best variant of a resource when the server has multiple variants.

507 Insufficient Storage – The server can’t store what it needs to store to complete the request.

508 Loop Detected – The server found an infinite loop when trying to process the request.

509 Bandwidth Limit Exceeded – Unofficial use by Apache and cPanel.

510 Not Extended – More extensions to the request are required before the server will fulfill it.

511 Network Authentication Required – The client needs authentication before the server allows network access.

520 Web Server Returned an Unknown Error – Unofficial use by Cloudflare.

521 Web Server is Down – Unofficial use by Cloudflare.

522 Connection Timed Out – Unofficial use by Cloudflare.

523 Origin is Unreachable – Unofficial use by Cloudflare.

524 A Timeout Occurred – Unofficial use by Cloudflare.

525 SSL Handshake Failed – Unofficial use by Cloudflare.

526 Invalid SSL Certificate – Unofficial use by Cloudflare.

527 Railgun Error – Unofficial use by Cloudflare.

529 Site is overloaded – Unofficial use by Qualys.

530 – Unofficial use by Cloudflare.

530 Site is frozen – Unofficial use by Pantheon.

561 Unauthorized – Unofficial use by AWS Elastic Load Balancer.

598 (Informal convention) Network read timeout error – Unofficial use by some HTTP proxies.

Thursday 13 January 2022

Consonant (Vyannjana)

Kannada / Hindi / Translitration

ಕ / क / ka
ಖ / ख / kha
ಗ / ग / ga
ಘ / घ / gha
ಙ / ङ / na
ಚ / च / ch
ಛ / छ / chh
ಜ / ज / ja
ಝ / झ / jha
ಞ / ञ / na
ಟ / ट / ta
ಠ / ठ / tha
ಡ / ड / da
ಢ / ढ / dha
ಣ / ण / na
ತ / त / ta
ಥ / थ / tha
ದ / द / da
ಧ / ध / dha
ನ / न / na
ಪ / प / pa
ಫ / फ / pha
ಬ / ब / ba
ಭ / भ / bha
ಮ / म / ma
ಯ / य / ya
ರ / र / ra
ಲ / ल / la
ವ / व / va
ಶ / श / sh
ಷ / ष / sh
ಸ / स / sa
ಹ / ह / ha
ಳ / क्ष / la

Wednesday 12 January 2022

Vowels (Swaragalu)

Kannada / Diacritic / Translitration / Hindi

ಅ / none / a / अ

ಆ / ಾ / aa / आ

ಇ / ಿ / e / इ

ಈ / ೀ / ee / ई

ಉ / ು / u / उ

ಊ / ೂ / uu / ऊ

ಋ / ೃ / ru / ऋ

ಎ / ೆ / ae / ऎ

ಏ / ೇ / ay / 

ಐ / ೈ / ai / ऐ

ಒ / ೊ / o / ऒ

ಓ / ೋ / oo / 

ಔ / ೌ /  au / 

ಅಂ / anusvara / um / अं

ಅಃ / visarga / ah / अ: