This article is part of the lighthouse series. You can check out last week's article below:
How to Improve Lighthouse Score - Search Engine Optimization (SEO)
In this post, we will be checking out a few best practices when building for the web.
Protect website using HTTPS
HTTPS stands for Hypertext Transfer Protocol Secure. HTTPS is the secure version of HTTP, which is the primary protocol used to send data between a web browser and a website. HTTPS is encrypted in order to increase security of data transfer.
Websites should be protected with HTTPS, including those that do not handle sensitive data. HTTPS prevents intruders from tampering with or passively listening in on the communications between your site and your users.
Ensure Links to External sites are safe
When you link to a page on another site using the target="_blank" attribute, you can expose your site to performance and security issues. Adding rel="noopener" or rel="noreferrer" to your links avoids these issues.
<a class="link" href="https://cloudinary.com/" target="_blank" rel="noopener">
Avoid Unload event listeners
Some developer treat the Unload event as a callback. This is extremely unreliable because this event does not fire in many typical unload situations especially on mobile. Listening for Unload event can prevent browser optimizations like the Back-Forward Cache. Consider using the pagehide event or visibilitychange events instead.
Avoid requesting for user location on page load
Remove all calls to geolocation.getCurrentPosition() and geolocation.watchPosition() that occur on page load. To provide a better user experience always request geolocation permission after a user action, not on page load.
Displays images with correct aspect ratio
Rendered images with aspect ratios greatly different from their source file could look distorted. Source files come with their natural aspect ratio.
An image content delivery network (CDN) can make it easier to automate the process of creating different sized versions of your images. I recommend Cloudinary.
Allows users to paste into password fields
Allowing users to paste their passwords could improve security because it enables the use of password managers. Password managers can automatically paste passwords whenever users need to log in; this improves the user experience.
Ensure no browser errors are logged to the console
Messages logged in the console come from either the web developers who built the page or the browser itself. An Error message means there's a problem on your page that you need to resolve.
Top comments (0)