Favicon
please don't forget to add it to your website, it is like your website ID. Whether you have favicon.ico or not, the user's browser will still request it. If you forget to add this file, your site will return 404 Not Found, which will make browsers angry. . . So you have to be careful and avoid giving users a negative first impression. To solve this problem, you can generate favicon and manifest files through ?Favicon Generator?.
Open Graph
plus social media meta. tags, users can better share your articles, and Google Ranking will also improve, you can use ?Meta.Tags? to generate Social meta.tags.
Translator's note: Generate Open Graph Meta. Tags, my blog also added Open Graph.
Image optimization
Compressed image
loading of images will greatly extend the loading time of web pages, and even reach 70% of the overall web page loading time. Use SVG if you can, and compress your delicate images. You can use ?Compress PNG? to help compress images.
CSS optimization
Autoprefixer
solves CSS problems on cross browsers. We all write CSS rules in our favorite browser, and I use Chrome. Even so, you still need to prefix these rules to support all types of browsers. Autoprefixer will use the current browser popularity and support data for various attributes to provide the prefix you need. You can use it from the command line.
| npm install -g postcss-cli autoprefixer postcss *.css use autoprefixer -d build |
Purifycss
removes CSS rules that are not used in the project. It reads the content (HTML/JS/PHP) and CSS, and returns the necessary CSS. It's a very useful tool if you're using a CSS framework like Bootstrap, this can reduce a lot of CSS document size.
Installation method:
1 npm install -g purify-css
How to use:
purifycss src/css/main.css src/css/bootstrap.css src/js/main.js — min — info — out src/dist/index.css
You can find it in the ?Github Page? of purify-css for more information.
To minify CSS
you can use purify-css or use CSS Compressor online.
Reduce Loading Time
PageSpeed Insights
PageSpeed Insights can be used to check the loading speed of web pages. It runs tests on mobile phones and computers . It will use the mobile phone's user-agent, and the Desktop's user-agent. PageSpeed will check the web page when it has applied the best practices of the web page, and provide a score of 0-100, and also provide suggestions on how to improve the score.
GZIP
Turns on GZIP compression, which is one of the fastest improvements to reducing the loading speed of web pages. Just Do IT, set up GZIP, and let your users enjoy the feeling of flying. The picture below is the effect of saving traffic.
PICSrush GZIP test chart
You can test whether your website has GZIP compression enabled in Check GZIP compression? website.
CDN
According to Wikipedia, a content delivery network (CDN) refers to a system of computer networks interconnected via the Internet , utilizing the server closest to the user to deliver files faster. Simply put, a CDN is a caching system on the network. You can use the free ?CloudFlare? to achieve this effect.
Editor's note: You can use cdnjs or other cdns.
The optimization platform
Sentry
is a very positive tool for front-end engineers. Sentry checks the browser environment for any uncaught JavaScript. exceptions, actively tracks errors that occur, and reports them. It provides a rich API that allows you to customize how this data is displayed elsewhere.
It notifies you via Email, SMS or Slack, and it also provides user responses when errors occur in the front-end environment.
Google Tag Manager
Google Tag Manager can manage all your JavaScript code that will be sent to third parties such as Facebook and Twitter in one place. By using it, you reduce the loading time of web pages and manage JavaScript code in one place more easily.