How to improve website vitals?

 How to improve website vitals?

To improve LCP

Use a content delivery network (CDN)- CDNs cache content in all locations all over the world so that content reaches users more quickly.

Optimise images- Images are often the largest element of a page. Reducing image file size can help speed up image load time.

Implement lazy loading- In lazy-loading, website resources are only loaded when a user needs them.

To improve FID

Reduce the size of JavaScript functions- reduce JavaScript code to improve page responsiveness.

Remove unnecessary third party tools and scripts- loading additional tools on your website can also slow down performance. Reducing the amount of third party tools can improve FID and website speed in general.

To improve CLS

Defining dimensions for images and videos-  All image and video elements on a web page need width and height attributes to avoid unexpected shifts. These width and height properties tell browsers how large an image will be so developers can reserve that space before the image or video loads.

Minimise third party page elements- Third-party elements on a page load from separate locations compared to the rest of the page. Because of this, they may load at a slightly different time, changing the page's layout as they load. Minimising the use of these third-party elements reduces the number of resulting layout shifts. 

All website vitals with its characteristics

Explain all website vitals with its characteristics and its best value.

FCP (First Content Paint)

FCP measures the time a website takes for any part of the page’s content to become visible. This content, whether its text, an image, or any other visual element, acts as a initial signal that the website is actively loading and responding to the user’s request.

LCP (Largest Content Page)

LCP measures the amount of time it takes to load the largest piece of a webpage, which is usually an image or a block of text.  

Google’s guidelines classify a LCP measurement as ‘good’ if it is under 2.5 seconds. Faster is always better.

LCP does not measure how long it takes to load an entire webpage, but it provides a good benchmark to indicate how fast a web page is loading. And typically the biggest element on a webpage is its main content, so the time when it loads is often well-aligned with the time when the user perceives that the page has loaded.

FID (First Input Delay)

It is a measurement of the time between a user’s first attempt to interact with a web page and when it responds. FID quantifies how quickly a person can first click on the screen and make something happen.

According to Google’s guidelines, a ‘good’ FID is 100 ms or less.

Example, Arun searches on google, ‘ how to polish your shoes’ , he clicks on a website photo. FID is the time from when he clicked on right arrow to when the photo starts to load. FID does not measure how long it takes for the requested event to actually occur -how long it takes Arun's browser to finish loading the next photo. It only measures the time between the request and when the request starts to be fulfilled.

Difference between FCP and FID is that FCP focuses on the loading page and what’s displayed while FID focuses on how quickly the page responds to the user’s first interaction.

CLS (Cumulative Layout Shift)

It measures how much a web page ‘jumps around’ when it loads. Specifically it measures the largest ‘burst’ of shifts in the page’s layout.

Google’s guidelines say that a good CLS is 0.1 or less.

A layout shift is when page content moves up and down or in any direction from where it originally appeared. In context of metric, a burst is a group of layout shifts that all happen with a second of each other. A Burst can be upto 5 sec long and contain any number of layout shifts.

Example- when a web page opens and is loading, you see a image, then the image suddenly moves further down the page and you end up clicking on the text that loads above the image. So, CLS should be low to have good user experience.

TTFB (Time To First Byte)

It measures the time when a user’s browser makes a request and the browser receives the first byte of data from the server.

Most websites should strive to have a TTFB of 0.8 sec or less. A faster TTFB means a better user experience because it directly impacts how quickly a page can begin loading.

Difference between TTFB and FCB is TTFB is about the server's response time and it measures the time a website takes to load only one byte of data while FCB measures the time it takes for a user to see first content on page and its data can be any bytes or kbs etc. In short, we can say, FCB includes TTFB.

How Website Vitals impact Website Performance?

How Website Vitals impact Website Performance?

CWV (Core Web Vitals) significantly impact website performance by improving user experience and SEO rankings. Good CWV scores translate to faster loading times, improved interactivity, and a more stable visual layout, ultimately leading to higher user satisfaction and engagement. These improvements also positively affect factors like bounce rate, time on site, and conversion rates.

Google uses CWV as ranking factor, meaning websites with good scores are more likely to rank higher in search results. This is because Google prioritises providing users with the best possible search experience and websites with good CWV contributes to that.

CWV like LCP, FID and CLS directly measures user experience. Faster loading times (LCP), responsive interactions (FID) and stable visual layouts (CLS) all contribute to a smoother and more enjoyable browser experience.

If users are dissatisfied with a slow, unresponsive, or unstable website, they're more likely to leave quickly (bounce). Good Core Web Vitals scores help reduce bounce rates by providing a smoother and more satisfying user experience. 

Website Vitals

 What do you mean by Website Vitals?

Web Vitals are a set of metrics introduced by Google to measure and improve the user performance on websites. These metrics focus on key aspects of page performance including loading speed, interactivity and visual stability.

Core Web Vitals are particularly important for positive user experience and are used by Google in its ranking algorithms.

Tools for measuring and improving web vitals include Google PageSpeed Insights, GT Metrix, Chrome DevTools etc.

How to make Landing Page effective?

 How to make Landing Page effective?

To create a effective landing page-

Include a Clear Call to Action- Make your CTA button prominent and easy to find, using contrasting colours or animations to draw attention. 

Add Trust Indicators- Incorporate social proof, such as testimonials, case studies, or logos of reputable clients, to build trust and credibility.

Ensure Consistency- Maintain consistent messaging and branding across your ad or campaign and your landing page to avoid confusion. 

Show your product/service in action- Showing your product or service in a real-life context helps visitors imagine themselves as your customer.

Define your goal audience- Clearly define what you want visitors to do on the landing page. Eg. sign up for a newsletter, download a resource, make a purchase. 

Craft a Compelling Headline and Copy- Use a main headline that grabs attention and clearly states the benefit of your offer.

 

Design for User Experience- Prioritise a clean, intuitive design with minimal distractions and a clear visual hierarchy. Ensure your landing page is mobile-friendly and loads quickly. 

Difference between Website and Landing Page

 Difference between Website and Landing Page

Website

• It contains multiple web pages.
• The content is mostly informational
• Distractions are there- hence can dilute the focus of visitor.

Landing Page

• It is a standalone web page.
• It is mostly transactional, focuses around Call To Action. Designed to a specific Marketing goal.
• No distractions. Can be used to grow your email list, sale of product and service, event sign up page etc.
• Single goal, big clear CTA, social proof, chatbot.

Landing Page

 What do you mean by Landing Page?

A landing page is any web page that a customer can land on, but in marketing, it is a standalone page, distinct from your homepage or any other page that serves a single and focused purpose. It’s where visitors land after clicking on a link in an email, a paid social ad or a paid search ad.

Unlike web pages, which typically have many goals and encourage exploration, landing page are designed with a single focus or goal known as CTA (Call to Action).

It’s this focus that makes landing pages the best option for increasing the conversion rates of your marketing campaigns and lowering your cost of acquiring a lead or sale.

Website Structure

Website Structure

What do you mean by Header?

Header is the top most section of a website that includes the logo and navigation menu. It might include logo, navigation menu, tagline, phone number, address, search box, login or my account link etc.

It’s a good practice to keep the header very simple and lead the user to the navigation menu. A header is called sticky or fixed when it stays in place at the top of the window when the user scrolls down.

A proper formatted header can significantly boost a website’s SEO.

What do you mean by Slider?

Slider is a feature on a website that displays a rotating series of images like a slideshow. 

This section is designed to capture attention and often includes high impact visuals, headlines and call-to-action buttons. In sliders, the images usually slide horizontally from left to the next.

 Sliders are not much in trend these days because it slow down your site’s load time and isn’t always the best experience for mobile users. Although sliders can add more visual interest, sliders are often more decorative than practical.

What do you mean by Body?

The Body of a website refers to the main content area of a web page typically located in the centre and containing the page’s unique content.

This includes texts, images, links, videos and attractive applications. The content of the body can vary from page to page within a website. For example, a product page might have detailed description of the product, while a blogpost page would have the article text, comment section and related links.

What do you mean by Footer?

A Footer is the section at the bottom of the webpage that remains consistent across your entire site, much like a header but at the opposite end of the page.

It contains elements like contact info, FAQs, privacy policy, t&c, social media icons etc.

Footer is a great place to catch the visitor’s attention and guide them deeper into your website when they reach the bottom of the page.

 

Difference between http and https

 Difference between http and https

Http

• Stands for HyperText Transfer Protocol.
• It is used to transmit hypertext or data over the internet in the form of plain text without security and not scrambled before sending.
• It lacks security and is vulnerable to hackers.
• Http is fast compared to https.
• It does not help in improving search ranking.

• A website that uses http has http:// in its URL.

Https

• Stands for HyperText Transfer Protocol Secure.
• It is a more advance and secure version of http. In this data exchange happens in cipher or encrypted text. 
• It offers SSL/TLS digital certificate to protect the communication between server and client.
• Computation power is consumed by https to encrypt the communication channel, so it is slow.
• It helps in improving search rankings.
• A website that uses https has https:// in its URL.

How Encryption & Decryption works in SSL?

 How Encryption & Decryption works in SSL?

Decryption

 What do you mean by Decryption?

Decryption is the  reverse process of converting the ciphertext back into the original plaintext that could be read and understood.

SSL uses both symmetric and asymmetric encryption. In symmetric key encryption, same key is used for both encryption and decryption.  Both the parties must have access to the key. In asymmetric encryption, public/private key is used where public key encrypts and private key decrypts. 

Encryption

 What do you mean by Encryption?

It is a process of encoding information in such a way that only authorized party can access it. It converts plaintext into ciphertext that is hard to decode which looks like gibberish to unauthorized viewers and only data sender and receiver can encrypt the information.

Encryption can be used to keep the intruder away from getting the content of transmitted data.

The sender encrypts the data using a key that only intended recipient possessing the decryption key, can unlock it.

Importance of SSL

 Why SSL is important?

Data encryption- Originally, data on the internet could be read by anyone if they intercepted the message. There was no privacy. So SSL was created to remove this problem and protect user’s privacy. By encrypting any data which goes between user and website, SSL ensures that whoever intercepts the data will see a garbled mix of characters.

Security- SSL also stops certain types of cyber attacks. It authenticates web servers, which is important because attackers often try to set up fake websites to trick users and steal data.

Protects Data- It also prevents attackers from tampering with data in transit, like a tamper-proof seal on a container.

User Trust- Websites with SSL security build trust with users, as they know their data is being transmitted securely.

SEO- SSL is a factor in SEO as search engines like google chrome prefer websites with SSL certificates, potentially improving search engines.

Website Authentication- SSL verifies the identity of website. It ensures that both devices are really who they claim to be.

Compliance- Many industries and regulation require websites to use SSL for security and data protection.

Browser Compatibility- Modern browsers display a security warning or error if website doesn’t have SSL certificate, potentially preventing users from visiting the website.

Work of SSL

 How SSL protects Website?

SSL protects your website by encrypting data transmitted between the user’s browser and  website, ensuring that sensitive information like passwords and credit card details are scrambled and unreadable during transit. Anyone who tries to intercept this data will see a garbled mix of characters that is nearly impossible to decrypt.

SSL initiates a authentication process called a handshake between two communicating devices to ensure that both devices are really who they claim to be.

Also, SSL uses public and private key to ensure secure connection (https) by encrypting data with public key, which can only be decrypted by private key held by the server, ensuring secure connection.

SSL

 What do you mean by SSL?

SSL or Secure Socket Layer, is a security  protocol that secures connection between browser or user’s computer and website or server over internet by encrypting the data sent between those clients and servers.

 It was first developed by netscape in 1995 for the purpose of ensuring privacy, authentication and data integrity in internet communication.

TLS (Transport Layer Security) is successor of SSL. TLS is modern term for SSL.

SSL prevents hackers from seeing or stealing any information transferred, including personal or financial data. It encrypts the data transmitted, making it unreadable to anyone who might intercept it.

When SSL/TLS is used, the website address changes from http (unsecured) to https (secured).

Laptop as a server?

 Can you use Laptop as a server? If yes, then why don’t?

Yes , Laptop can be used as a server. A server needs to be opened 24/7, requires electricity 24/7 but laptop is not made for this so eventually it will exhaust and will be damaged. So it is not ideal for high traffic or demanding workloads. 

 Type of Hosting Plan you will purchase if you wanna make E-Commerce business and why?

Different types of hosting includes shared, dedicated, vps and cloud hosting. Buying different hosting plans depends on website and business requirements. 

If the business is at beginner stage, and has less traffic then it can go for shared hosting but if a website has high traffic then better to go for dedicated hosting.

If your e-commerce business website has 100+ products, then dedicated hosting is better. Dedicated Hosting provides better control, high performance, greater reliability and less chance of server crash in case of high traffic.

Bandwidth

 What is Bandwidth?

Bandwidth is the amount of data that can be transferred between the site, its users and server. It is the capacity of the connection between the website user andt the servers. They are either expressed in MB/s or GB/s.

To understand how bandwidth works, think of a traffic. When the road lanes are narrow and few, vehicles are stuck in traffic for minutes, even hours. But when the road lanes are wide and plenty, more vehicles can get through. Think of the road lanes as bandwidth and the cars as the website data. More data can flow through if there is a bigger space.

Its size determines the maximum amount of data which can be transferred over a period of time.  

The bigger the bandwidth, the quicker the content will be delivered to your user especially during high traffic times.

A larger bandwidth becomes crucial when your website has sudden urge in traffic. If your bandwidth cannot accommodate the surge, it will crash. This crash will stop your operations and affect your sales. So you need to understand the possible surges and check the bandwidth that your hosting provider offers.