Auditing a Website
Tags: audit, youtube
Published: 2021-02-15 09:12:00

Auditing a website is a helpful way to find out what areas of your website need improving and how to improve them. For this example I audited YouTube.com and I can see which areas it needs to improve upon. I will only focus on three specific areas that could be improved and will explain some of the solutions to help these areas. 
To audit YouTube I used Web.dev which measures the website using four different metrics:
Performance- looks for things that could potentially cause lag
Accessibility- looks for issues that keep users from accessing the webpages contents
Best Practices- audits for things like how HTML and correct image sizing perform
SEO- finds out how discoverable your website is
![image](https://dev-to-uploads.s3.amazonaws.com/i/fhxhyz5ny4is4p61qkqr.png)
(Here is an image from Web.dev showing the results from YouTube's audit from Febuary 2021)
#Server Response Time (Performance)
YouTube scored the lowest overall in performance and the poor server response time contributed to that. Server Response Time is the amount of time it will take for the first byte of the webpage's content to reach the user's browser. It the response time is too slow then the webpage will take too long to load and upset the users. 
Some solutions to fix the Server Response Time is the optimize the server's query database and the application logic. Another solution is to upgrade the servers hardware to increase the CPU and the memory. 
#Server Images (Best Practices)
According to the audit, YouTube had images that worked well on desktops but the sizing of the images do not translate well over to mobile devices. Some of the images appear larger and take up more space on the screen on mobile devices than they do on a desktop. 
There are many ways to solve this including using some of the services that are available like Sharp and ImageMagick that automate the resizing of the image for each device. Another solution is to provide multiple sizes of the image and let the user's browser decide which image to use. It is recommended to use 3-5 images so most devices can see the correct size of the image.  
#Tap Targets (SEO)
A tap target is used for devices that have touch screens and having an ineffective target will mostly effect mobile devices. A tap target is an area of the webpage that touch screens can interact with and some of the main problems is that the touch areas are too small and are too close together. This can easily cause a user to miss-click and will hinder them while trying to navigate through the website. This discourages users and makes it more difficult to use the website while operating a touch screen device. Search engines rank websites based on how mobile friendly they are, so not being mobile friendly could negatively impact the sites SEO. 
However, the solution to this problem is very simple and will only require that the size of the targets is increased and that the there is more space between them. 

That is how you audit a website and hopefully you will be able to use this information to find the flaws in your own website and improve them. 
YouTube Video:
https://youtu.be/mJSSl8MgjLU
Sources:
https://web.dev/ 
https://web.dev/learn/