DEV Community: Jaydeep Dave

Optimize Website Load Performance Using Preload, Prefetch & Preconnect

Jaydeep Dave — Sun, 04 Sep 2022 13:05:19 +0000

To optimize web performance and user experience, critical assets must be loaded as quickly as possible.

Modern web browsers use a variety of strategies and techniques to improve overall page performance, such as prioritizing the most important resources to be fetched and loaded.

Here are some of the ways to achieve this:

DNS Prefetch

DNS Prefetching enables the browser to carry out DNS Resolution (determining the IP to contact) in the background without interrupting the user's experience of the current web page. It is typically used to reduce the time it takes to establish a connection because the browser will take care of the DNS lookup process beforehand. As a result, the user won't have to wait for the DNS lookup to complete when they click on external links or other resources that the page will later need, hence it reduces latency.

DNS Resolution is the process of converting hostname/domain name to its corresponding ip address which the computer understands to communicate.
For eg: google.com to 216.58.215.78

The browser is accountable for carrying out the DNS lookup procedure and discovers all resources on a web page that need a DNS lookup and must wait for the lookup to be finished before downloading/accessing anything. DNS lookups typically take between 20 and 120 milliseconds to complete.

It is required to resolve domain lookup only once for a domain name and then the rest of the request for that domain can be carried out via that connection, but still, we can try to save this for the first time. Additionally, after 3–4 attempts, the DNS may be cached (depending on the browser/system). However, for mobile users, the duration of the initial DNS lookup is crucial.

When to use:

When we depend on numerous domains for different types of resources.
When we know we will need a domain's resources but don't yet know the specific URL.

Example:

Amazon resolves DNS-Lookup for its many resources domain on its home page using DNS-Prefetch, which it may load.


Amazon Home Page-DNS Prefetch usage

For loading external CSS, fonts, js, etc from some third-party domain.

For instance, while using Google Fonts on a website, must be loaded before the page is rendered. We can prefetch its domain in this way.



<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">

where,
X-DNS-Prefetch-Control: on/off : directs the browser whether or not to perform DNS Prefetch. Even when enabled, it will only work in browsers that support it.
href : refers to the domain name to be resolved, and it will work without a scheme as well, so https://fonts.gstatic.com and https://fonts.gstatic.com both would work.

To check where DNS-prefetch is supported: https://caniuse.com/link-rel-dns-prefetch

Preconnect

To establish a connection with a domain name, the browser follows these three important time-consuming steps:

DNS lookup
TCP handshake (Initial Connection)
TLS negotiation (on secure websites i.e. HTTPS)


Time taken by Domain Name Resolution steps

While, we saw during DNS-prefetch that it only takes care of DNS-lookup, on the other hand, Preconnect resolves all three steps in advance and reduces round-trip latency.

Setting up a Preconnect connection and having it open for too long increases network competition and costs for both the client and the server side. So it's recommended to connect no more than 4–6 connections.

You can preconnect a webpage, using the following code
<link rel="preconnect" href="//example.com">

Example:

Google uses preconnect to resolve domains beforehand from where it has to load scripts, CSS, js & fonts
<link rel="preconnect" href="https://www.gstatic.com">
<link rel="preconnect" href="https://ssl.gstatic.com">

Where DNS-Prefetch can be used over Preconnect ?

To support some old browsers where only DNS-Prefetch is supported there it can be used as a fallback to Preconnect
Since it is advised to connect only 4–6 domains via Preconnect but still if we want to connect more resources then we can use DNS-Prefetch to speed up third-party domains.

Preload

Preload fetches the resources required for the current navigation without blocking the window's on-load event. Basically, using this resource hint, we can tell the browser to request the content before the browser has determined it needs to make the request. As a result, the resource is already available when the browser eventually realizes it needs to access one of the preloaded resources and thereby, improving the performance.

Preload is useful to load resources that are referenced by other resources like:

Fonts that are referenced within a CSS file
Critical resources that JavaScript dynamically loads
Images or content that appear only after an API call has been made

Example:

Meesho, an e-commerce website uses preload to proactively fetch fonts and images that the browser would have known about only after downloading and parsing style.css and HTML content.



<link rel="preload" as="style" href="https://static-assets.meesho.com/css/mier-fonts.css?display=swap">
<link rel="preload" as="image" fetchpriority="high" href="https://images.meesho.com/images/products/157167814/u2gkw_400.jpg">

References:

Golang Html tokenizer

Jaydeep Dave — Sat, 18 Jun 2022 16:26:18 +0000

Mohammad Rahmani on Unsplash"/>

Looking for parsing & extracting HTML content in golang as we can simply do in PHP or Js by creating a new dom document. In golang, there are multiple ways to do it by using different packages based on your requirements. Some of the ways I found out are:

gohtml: gohtml is an HTML5 tokenizer and parser implementation. It returns nodes after parsing, and then the elements can be extracted by various attributes such as tag type, tag name, attr, and text data using a tokenizer concept.
goquery: goquery is built on the gohtml package and the CSS Selector library Cascadia, giving it more power over content selection and extraction. It has a similar syntax as jquery.
godom: godom is a library that allows you to manipulate the DOM in Golang similar to javascript. It compiles Go code to JavaScript using GopherJS.

For now, I will use gohtml for the demonstration purpose, to use tokenization.

Tokenization is the lexical analysis, parsing the input into tokens. Among HTML tokens are start tags, end tags, attribute names and attribute values.

Tokenizing the document is the first step in parsing it into a tree of element and text nodes, similar to the DOM.

Types of HTML Tokens Supported:

html.StartTagToken: a start tag such as
html.EndTagToken: an end tag such as
html.SelfClosingTagToken: a self-closing tag such as <img .../>
html.TextToken: text content within a tag
html.CommentToken: an HTML comment such as
html.DoctypeToken: a document type declaration such as <!DOCTYPE html>

Example:

package main
import (
 "fmt"
 "strings"
 "io"
 "golang.org/x/net/html"
)
func main() {
 tokenizer := html.NewTokenizer(strings.NewReader(sampleHtml))
 for {
  tokenType := tokenizer.Next()
  token := tokenizer.Token()
  if tokenType == html.ErrorToken {
   if tokenizer.Err() == io.EOF {
    return
   }
   fmt.Printf("Error: %v", tokenizer.Err())
   return
  }
  fmt.Printf("Token: %v\n", html.UnescapeString(token.String()))
 }
}
const sampleHtml = `<!DOCTYPE html><html><head><style> body {background-color: powderblue;} h1 {color: red;} p {color: orange;}</style><title>Sample HTML Code</title><script src="my-script.js">abc</script></head><body><h1>Main title</h1><p id="demo"></p><a href="https://dev.to/">Dev Community</a><script>document.getElementById("demo").innerHTML = "Hello JavaScript!";</script></body></html>`

Output:

Token: <!DOCTYPE html>
Token: <html>
Token: <head>
Token: <style>
Token:  body {background-color: powderblue;} h1 {color: red;} p {color: orange;}
Token: </style>
Token: <title>
Token: Sample HTML Code
Token: </title>
Token: <script src="my-script.js">
Token: abc
Token: </script>
Token: </head>
Token: <body>
Token: <h1>
Token: Main title
Token: </h1>
Token: <p id="demo">
Token: </p>
Token: <a href="https://dev.to/">
Token: Dev Community
Token: </a>
Token: <script>
Token: document.getElementById("demo").innerHTML = "Hello JavaScript!";
Token: </script>
Token: </body>
Token: </html>

Here, I had just simply checked for Error Token or EOF and printed all the token types as it is.

We can also parse HTML based on the Token such as html.StartTagToken, html.EndTagToken, etc as mentioned above.

Also, on the element type such as html, h1, script, style, etc.

tokenizer := html.NewTokenizer(strings.NewReader(sampleHtml))
 for {
  tokenType := tokenizer.Next()
  token := tokenizer.Token()
  if tokenType == html.ErrorToken {
   if tokenizer.Err() == io.EOF {
    return
   }
   fmt.Printf("Error: %v", tokenizer.Err())
   return
  }
  switch token.Data {
  case "script":
   fmt.Printf("Script Token: %v\n", html.UnescapeString(token.String()))
  case "style":
   fmt.Printf("Style Token: %v\n", html.UnescapeString(token.String()))
  default: //This will also include contents of <script>, <style> tags content
   fmt.Printf("Others: %v\n", html.UnescapeString(token.String()))
  }
 }

Reference

My Interview Experience at Media.net

Jaydeep Dave — Sat, 14 Aug 2021 11:08:49 +0000

Media.net came to our campus in late June 2021 to interview for the position of Associate Web Application Developer. There were three rounds in total. Approximately 60 students filled the form, and only two of them got the offer letter.

The entire process was online and took approximately 2-3 weeks. I’m going to share my interview experience here.

Round 1(Online MCQ Round): This round was an online Assessment on the Interviewbit Platform for 1 hr and there were a total of 50 MCQ questions. So we have to solve 50 questions in 60 mins.

It was basically a mixture of various topics.

There were questions from Quants, Logical Reasoning, DSA, Time complexity, Guessing the o/p, Memory, OS, CN, DBMS.
I was able to answer 40-42 questions in the given timeframe, and the questions were mostly Easy-Medium Level.
On the next day, we got the result, and out of 60 students, 8 of them cleared this round.

Round 2(Technical Interview 1): This round lasted about an hour and was held on Google Meet. In this round, we were given three DSA questions (generally easy, medium, and hard) and we had to explain the entire solution approach and write the pseudocode in google docs shared with us.

We first started with a basic introduction.

Arrange given numbers to form the biggest number.
Eg: Input: { 66, 56, 9, 7, 10, 660 }
Output: 97666605610
Link: https://www.geeksforgeeks.org/given-an-array-of-numbers-arrange-the-numbers-to-form-the-biggest-number/

Given an array of n elements return the count of elements which has a count of set bits to be 1.
Eg: Input: {2, 6, 8, 10, 12}
Output: 2
Create a deep copy of LinkedList with random pointers.
Link: https://www.geeksforgeeks.org/clone-linked-list-next-arbit-pointer-set-2/

Later we had some discussion about work culture and Tech Stack that I will get to work on.

After a week, I got the call from HR that I had cleared this round. (Only 2 out of 8 cleared this round)

Round 3 (Technical Interview 2): This round was also conducted on google meet and lasted for an hour. The interviewer gave his intro and we started with the coding problem.

Given the seating arrangement of a compartment, complete the below functions:

//static boolean isWindowSeat( int seatNo){

// return whether the given seat no. is window seat or not

}
static int seatRowNo( int seatNo){

// return the row no. (starting from 1,2,3,…..) to which seat belongs

}

static int nearestWindowSeat( int seatNo){

// return the nearest window seat of the given seat no.

}

Design a Database System for URL Shortener, with the following constraints:
Only authorized users can use the service.
URL link should be expired after 48 hours.
Users can edit the URL link.
After that, I was asked:

Write an SQL query for searching the existing URL in the table.
How can we search faster in the table ? (Ans: Indexing)
What is Indexing in DBMS and its working?
Since, I mentioned Javascript and Reactjs in my resume. So, the next question was:
Using Javascript, write a filter function that will filter the odd no.

Eg: Input: {1, 2, 3, 4, 5}

Output: {2, 4}

Later we had a discussion about the job role and the difference between SDE and the current job profile and so on. The next day, I was informed by HR that I was selected and discussed further process.

All the interviewers were very polite and supportive. They will guide you but you should be very attentive during the interview and ask out if you have any queries or you are stuck in between. Also, clarify the problem statement and constraints well.