Scribd
Upload
19 views8 pages

Web Dev Internship Assigment

The document outlines suggested technical improvements for a school website. It identifies 9 key issues: lack of form validation, unnecessary console logging of sensitive data, pagination placement, inconsistent school feature placement, UI improvements around hover effects and font sizes, low quality images, small blog font size, and poor page load speeds. Addressing these issues would improve the user experience, security, and performance of the website.

Uploaded by

Abdul Nayeem Khalid
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
19 views8 pages

Web Dev Internship Assigment

The document outlines suggested technical improvements for a school website. It identifies 9 key issues: lack of form validation, unnecessary console logging of sensitive data, pagination placement, inconsistent school feature placement, UI improvements around hover effects and font sizes, low quality images, small blog font size, and poor page load speeds. Addressing these issues would improve the user experience, security, and performance of the website.

Uploaded by

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

Web Development Intern Assignment

Name : Abdul Nayeem Khalid

Email : [email protected]

TASK – 1
Checking the page load speed and suggest improvements in the development
for the same.

I Analysed the website load performance using the google lighthouse chrome extension and
the result came out to be poor

Suggested Improvements :

Optimizing LCP (Largest Contentful Paint) –


It is essentially the time taken to load all images, videos and fonts in a webpage.
LCP of 2.5 seconds or lower is considered good performance.

Here are ways we can optimize LCP

 Reduce Resource Load Time –


This is done by compressing images and videos so that
they take up less space and change them to modern
image formats like webP which can be fetched and
loaded faster
 Modifying Fetch Priority –
Fetch priority of images can be set to high or low and
this can be effectively used to ensure that low priority
images at the bottom of the page wont get loaded
before the high priority images at the top.

This will make the website appear to load faster

 Using a CDN –
CDN or Content Delivery Network serves content like
images or videos by caching across distributed servers
and serving users based on the closest server. Using a
CDN will greatly reduce load time.

Minimizing Main Thread Work –


The involvement of google analytics, google ads , google tag manager and facebook
pixel use up the main thread of javascript leading to poor performance as the essential
tasks are kept waiting.
This leads to a high blocking time as all scripts are competing to work on the main
thread. This can be solved by using an open source library called partytown which will
run the third party scripts on a webworker instead of using up the main thread.
To implement partytown we find scripts that we don’t want to block the main thread
and add type = “text/partytown”

Now this script will run In a designated web worker


Now Configure the partytown component and this allows us to run third party scripts
on their respective web workers instead of using up the main thread

These improvements should greatly increase the speed of the website resulting in a much
better performance

TASK – 2
Suggest technical improvements for this page

I thoroughly went through the page and here are a list of issues I found along with
possible fixes :

1. No form validation – The “ GET A CALL” and “Get in touch with a counsellor”
Forms do have validation meaning users can submit empty forms or partially
filled forms which get stored in the database.
(Empty fields highlighted in orange)
This can be easily fixed by adding form validation on both forms to avoid
gathering unnecessary and incomplete form submissions.

2. Website console logs unnecessary data - Upon inspecting the webpage


console tab I found a large amount of data being console logged including the
entire Dubai schools dataset of 204 schools. This data includes sensitive
information like Database IDs of each school.
The data is printed to the console 3 times which is completely unecessary. The
console.log() methods used in the wesbite’s code might have been for testing
purposes but must be removed to avoid spilling sentitive information.

3. Pagination Improvement - The pagination selector can be placed at the top and
bottom of the listed schools and also should be moved towards the center for better
visibility

4. Fee Details – The details on Fees is oddly placed on the right where it is less visible
and must be placed along with other important data on the left.

5. Placement of Featured Schools – The featured schools banner appears on the right
on the search page then appears on the left on the view school page making the layout
inconsistent.
6. UI Improvements – Hover effects can be added to pagination,footer and navbar links
to make it more interactive, images depicting school facilites can be changed to have
rounded borders and titles such as “Schools in Dubai” can be made larger with a darker
font color to stand out and look more prominent
7. Higher Quality Backdrop Photo – The backdrop photo on the homepage has a low
quality and can easily be replaced with a higher quality image of Dubai to make it more
visually appealing

8. Larger Blog Font – The font on the blog post can be made larger to make it more visible
and easy to read and the blog card sometimes shows “Read More” and “Author”
detials twice
9. Speed Improvements – Webpage load performance of this page turned out to be poor
as well. This can be improved by applying the techniques mentioned above in Task 1

You might also like