Scribd
Upload
9 views4 pages

WebD Tasks

The document discusses page speed statistics and recommendations for a website, including reducing first contentful paint time, optimizing largest contentful paint, decreasing total blocking time, lowering cumulative layout shift, and improving speed index. It also provides tips to ensure text visibility during font loads, add image dimensions, reduce DOM size, and optimize caching and JavaScript execution.

Uploaded by

Ankit
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views4 pages

WebD Tasks

The document discusses page speed statistics and recommendations for a website, including reducing first contentful paint time, optimizing largest contentful paint, decreasing total blocking time, lowering cumulative layout shift, and improving speed index. It also provides tips to ensure text visibility during font loads, add image dimensions, reduce DOM size, and optimize caching and JavaScript execution.

Uploaded by

Ankit
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Task -1

Speed statistics:

First Contentful Paint - 1.0 s


Largest Contentful Paint - 2.5 s
Total Blocking Time - 180 ms
Cumulative Layout Shift - 0.524
Speed Index - 2.0 s

Detailed page speed statistics : -


 First Contentful Paint: The first content on the page takes 1.0 second to
load. Ensure that critical content is delivered quickly to users to enhance
the initial loading experience.
 Largest Contentful Paint: The largest content element on the page takes
2.5 seconds to load. Optimize the loading of this element, such as by
compressing images, reducing their size, and utilizing lazy loading
techniques.
 Total Blocking Time: The total blocking time is measured at 180
milliseconds. Minimize long-running JavaScript operations, split large
scripts, and defer non-essential JavaScript to reduce the impact on the
main thread and improve interactivity.
 Cumulative Layout Shift: The cumulative layout shift is measured at
0.524. Avoid unexpected layout shifts by ensuring that elements on the
page have explicit dimensions and using CSS techniques to reserve space
for images.
 Speed Index: The speed index is calculated at 2.0 seconds. Optimize the
critical rendering path, reduce round trips to the server, and prioritize
above-the-fold content to enhance the visual display speed.

Some development improvements: -

 Ensure text remains visible during web font load: Implement techniques
to ensure that text remains visible even during the loading of web fonts,
providing a better user experience.

 Image elements do not have explicit width and height: Specify explicit
width and height attributes for images to prevent layout shifts and
improve rendering performance.

 Avoid an excessive DOM size: Reduce the number of DOM elements


(currently 2,565) by eliminating unnecessary or redundant elements,
improving performance and maintainability.

 Serve static assets with an efficient cache policy: Optimize caching


headers for static assets to leverage browser caching and reduce the
number of requests made to the server.

 Reduce JavaScript execution time: Identify and optimize JavaScript code


that contributes to a long execution time, improving performance and
user interaction.

Estimated Savings:
 Properly size images: Resizing images to their displayed dimensions can
save approximately 0.75 seconds.
 Reduce unused JavaScript: Eliminating unused JavaScript code can save
approximately 0.45 seconds.
 Serve images in next-gen formats: Optimizing images in next-generation
formats like WebP can help improve load times.

TASK – 2

Here are the technical improvements for the website:

1. Navbar:
 Improve navbar appearance by selecting a colour that
matches the theme.
 Consider using a transparent navbar, as it might be a better
fit for the overall design.

2. Cover Image and Text:


 Enhance the cover image quality by replacing it with a
higher resolution image.
 Increase the font size of the text displayed over the cover
image for better readability.

3. Font Size:
 Adjust the font size of the website's text to ensure it is
legible for users.
 Increase the font size to make it easier for users to read the
content.
4. Transitions and Animations:
 Introduce transitions and animations to make the website
more engaging and visually appealing.
 Incorporate smooth transitions between different sections
and consider adding subtle animations to elements for a
more interactive experience.

5. Overall Colour Theme:


 Create an eye-catching and attractive colour scheme for
the website.
 Use a well-thought-out colour combination for
components like buttons, footer, and other visual elements
to enhance the overall aesthetics.

By implementing these technical improvements, the website


can achieve a more cohesive and visually appealing design,
improving user experience and engagement.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy