So, you are a web developer who wants to utilize the tools currently in use. Let’s stop reinventing the wheel. Today I will discuss a few tools that would help you in various stages on web development.
Tools For A Web Developer
User Experience test is a part of the Mobile Friendliness Test of Google. Earlier it was called the PageSpeed Insights. This tool offers a great insight in to the errors that your page generated on various devices. You can also see which errors have high impact on user experience.
As Google is moving towards a mobile-first index starting 2017, the user experience test also reports errors that can affect the experience on mobile devices. This is a must-run tool for all the websites.
Profiling in Browser
This one has been around for quite a long time now. But how many of us use it?
Check our Google’s Dev Tools documentation here.
Grunt / Gulp
When your projects become complex, task runners help you perform repetitive tasks. Tasks such as minification, compilation, unit testing, linting, etc are repetitive for every build that you make and so automating them can save you lots of time.
Grunt and Gulp do exactly the same thing with just the difference of configuration methods. Since most of these are command line, they do not require much of CPU resources as well. These Node JS based tools offer plugins to perform almost every task possible.
And the best par is that it is pluggable i.e., the rules and formatting can be altered based on the user’s need.
GTMetrix is also a performance optimization analyzer that includes various factors for evaluating the web pages. It calculates the Google PageSpeed and Yahoo! YSlow scores and displays the fixed that needs to be done to improve it.
It also calculates the page loading time as well as the size of the page. Both these factors need to be minimal for providing the best experience to the users. Users won’t wait more that 4 seconds on average on a webpage.
It also slows the waterfall diagram of the elements of the page based on the loading order. You can also see a video of the loading if you opt for their pro plan.
JPEGmini is a photo optimization technology that reduces the file size of JPEG photos by up to 5X, while preserving the resolution and quality of the original photos.
This tool indirectly helps you to reduce the bandwidth and file loading time. And the best thing is that the optimized images are still in JPEG format(no new format is used), thus making it supported in almost all devices.
You can make use of the web version or they have a free app on Apple app store that lets you convert 20 images each day. If you need more, you can take one of their pro packs which also comes with a windows and mac client. Recently, they also launched an Adobe Photoshop extension with is very handy if we have to design UI elements manually.
You might also like to read Why We Love Image Optimization (And You Should, Too!)
You can get the build-able version of the linter at their Github repo .It can be integrated in to your task runners as well.
There are other linters when yo use tools like SASS and LESS.
Compressor.io is also a similar tool like JPEGmini that lets to reduce image file sizes. These guys allow you to choose between lossy and lossless compression techniques based on your need. They also support file formats such as JPEG, PNG, GIF and SVG.
Although compressor.io does not offer desktop client, they are handy for quick online compressing.
A lazy loader is one that helps to load images and heavier content only when the user scrolls to the particular section of the page. It helps to avoid unnecessary loading of content, thus saving the bandwidth of the server as well as reducing the data usage of the user.
There are a number of lazy load pluging out there, even the ones based on JQuery. So if your website is build around JQuery, you can easily plug-in one of them.
Here are a few plugins that you can give a try.
A CDN or Content Delivery Network is a collection of servers distributed around the world to cache and secure content online. By using a CDN, the requests to your server is drastically reduced. The server is only accessed for the dynamic content.
Whenever you are delivering some web projects online, for personal use or professional part, make sure you use a CDN such as CloudFlare or MaxCDN. This will avoid your site going down during big launches or events.