As a full stack Internet engineer, our goal is not only to achieve the function, but also to include performance, security, ease of use and so on. Are there publicly measured standards that allow us to know exactly where the quality of our site currently stands in the industry? With the continuous progress of technology, various tools for website evaluation are also evolving.
tool
To do a good job, he must sharpen his tools.
If you want to know the quality level of your website, it is not possible to rely on imagination and speculation, but to have tools that can be measured objectively.
YSlow
One of the first to try this was Yahoo’s YSlow, which was launched in 2012, but has since faded. Its name is actually Why Slow. From its name you should know that it is a tool to help webmasters solve web page loading speed. YSlow is a browser plug-in that supports major browsers including Chrome, Firefox, Safari, and more. After installing the plug-in in your browser, you can evaluate any site and give an overall score. The evaluation content includes whether the webpage contains too many HTTP requests, whether JS and CSS are compressed, whether CDN is adopted and so on, mainly to provide the webmaster with an optimized direction and reference suggestions.
PageSpeed
After YSlow, Google launched its own page optimization advice tool, PageSpeed Insights, which is a web tool. You don’t need to download and install plug-ins like YSlow, you just need to open its web page, type in any site you want to test, and get optimization advice.
GTmetrix
The tool I use most often is not either, but a website called GTmetrix, which combines the two tools to give a more complete recommendation.
Lighthouse
The more powerful and rigorous tool is Google’s Lighthouse. It’s also a browser add-on, but for now it only works with Google’s own Chrome browser. It measures any website in four areas, including performance, ease of use, and best practices. We’ll focus on how you can meet Google’s requirements in all four areas.
To optimize the
GTMetrix
For the first step of optimization, let’s start with GTMetrix. Common questions and suggestions for websites are as follows:
CDN
In general, you need to open a CDN service for your site to ensure that the server closest to the user in the geographical location can serve the user first. There are many manufacturers that provide CDN service, and the price is not expensive. Many cloud service providers, such as Ali Cloud and Baidu Cloud, provide this service.
Enable gzip compression
This is to check whether your Nginx server has set up gzip compression transmission mode. Open your Chrome developer tools and check the Response header for each request in the Network TAB to see if it contains Content-Encoding: gzip. If it does not, your site does not have gzip transmission.
Solution: Refer to my article “My NGINx Boiler sheet” setup.
Add Expires headers
This is also a missing configuration for many websites. Due to the lack of proper expiration time for JPG images, CSS and JS, every time you visit a website, you have to re-read the content from the website, which is the reason for the slow access of many websites. Setup: Again, refer to the article mentioned in the previous section.
Solution: Refer to my article “My NGINx Boiler sheet” setup.
Image size
In many cases, either out of ignorance or laziness, engineers tend to zoom in on a large image using CSS, such as this: width: 100px; height: 50px; . The result is that the image appears to have shrunk on the web, but the file size has not. This is the main reason many websites are slowing down.
Solution: See my article “Automatically Scaling Images with imgProxy” for Settings.
Sprite figure
If your page has a lot of picture of mark, one of the worst practices is cut into small pieces of them all JPG or PNG, this will make your pages load to the server when sending HTTP requests, many times and each time the request has the establishment of the independent connection disconnected, transmit data, process, very waste of resources.
Solution: If possible, make these ICONS into separate icon font files. If not, compress them into Sprite images.
Compress JS and CSS
Usually, the JS you’ve just written looks like the one on the left, while the code for large corporate websites looks like the one on the right.
The code on the left is fine for humans to read, but you shouldn’t just send it across the network. First, waste traffic; Second, you can read it, your friends can also read it, which is not conducive to safety.
Solution: You should uglify and minify your JS/CSS/HTML.
The ultimate solution
All of these suggestions sound good, but what if it’s too much work for me to do one by one? Maybe you should consider using a modern framework to automate these things for you, such as Angular/React/Vue, or use Grunt/Gulp/Webpack to do it all yourself. You see this is why front-end engineers learn frameworks? Because my blog site is built directly on Github Pages using Jekyll, and uses CloudFlare for CDN, and they already do all of this for me automatically, it starts high and easily scores 99 points on GTMetrix.
Lighthouse
After completing the Requirements of GTMetrix to score a high score of 99 or more, we wanted to set the bar even higher and challenge Google’s Lighthouse for a perfect score!
Lighthouse rates the web in four ways, and we’ll take a look at each of them.
Progressive Web Apps
The first standard, “Progressive Web applications,” was invented by Google itself. The aim is to allow the site to display basic content, or the last cached content, even when the network is down, rather than an ugly “down” message, and to allow users to install the web directly on their phones, just as they would a normal app. The ultimate goal of PWA is to replace apps with web apps, so it’s not currently supported by Apple. The Google website has detailed instructions on how to implement PWA and follow these step-by-step instructions to build your first PWA web page. Once built, use Lighthouse to test how PWA compliant your web site really is.
There are 11 progressive Web application standards.
The following highlights the work that must be done in order for a web page to meet basic PWA requirements:
manifest.json
First, your site must have a manifest.json file, which describes the most basic information. For example, the manifest.json file for my website looks like this:
{"name": "rixin pavilion ", "short_name":" Rixin Pavilion ", "description": "start_url": "/index.html", "orientation": "any", "icons": [{ "src": "/assets/img/icons/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }, { "src": "/assets/img/icons/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }], "theme_color": "#000000", "background_color": "#000000", "display": "standalone" }Copy the codeSelection of favicon image size
Even a simple favicon image can be difficult to choose due to the differences between devices, operating systems and browsers. Each vendor has different descriptions, and even the same vendor has different requirements in different versions. For example, Google Chrome required 196×196 before version 37. After version 37, 192×192 is required, and The Apple website requires you to provide at least 4 sizes: 180×180, 167×167, 152×152, 120×120, Google TV requires 96×96, the taskbar requires 32×32, and the common browser requires 16×16, not including the various large, medium and small ICONS required on the Windows desktop. What should we do in the face of such complicated demands? One way is to find a tool site to help you solve this conundrum. I recommend this site because the author has done special research on favicons for various devices. Another way to do this is to use my template for simplicity and only need to make 6 ICONS to cover most devices. Apple only needs one 180×180 because small devices automatically shrink, 2 512×512 and 192×192 for Google, and 3 for normal browsers.
Json file, specify the path to the manifest. Json file in your HTML header, specify the theme color of the page, and make sure that the theme color is consistent with the color in the page. Then specify the icon:
<! -- Favicon --> <link rel="icon" type="image/png" href="/assets/img/icons/favicon-16x16.png" sizes="16x16"> <link rel="icon" type="image/png" href="/assets/img/icons/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/assets/img/icons/favicon-96x96.png" sizes="96x96"> <! -- Apple Touch Icons --> <link rel="apple-touch-icon" href="/assets/img/icons/apple-touch-icon.png" /> <link rel="manifest" href="/manifest.json"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-title" content="{{ site.title }}"> <! -- Android Lolipop Theme Color --> <meta name="theme-color" content="{{ page.color }}">Copy the codeserviceworker.js
Add the following code to your home page to determine if your browser supports ServiceWorker, and if so, load the ServiceWorker file:
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js');
};Copy the codeAdd a serviceworker.js file to the root directory:
var cacheName = 'fengerzh'; var filesToCache = [ '/', '/index.html', '/assets/js/main.js', '/assets/css/main.css', '/assets/img/placeholder.png', '/assets/img/icons/preloader.svg', '/assets/img/icons/read.svg', ]; self.addEventListener('install', function(e) { e.waitUntil( caches.open(cacheName).then(function(cache) { return cache.addAll(filesToCache); })); }); self.addEventListener('activate', function(e) { e.waitUntil( caches.keys().then(function(keyList) { return Promise.all(keyList.map(function(key) { if (key ! == cacheName) { return caches.delete(key); }})); })); return self.clients.claim(); }); self.addEventListener('fetch', function(e) { e.respondWith( caches.match(e.request).then(function(response) { return response || fetch(e.request); })); });Copy the codeSave the specified file in the cache, so that the browser will retrieve the file from the cache the next time the network is down. Once you’ve created the ServiceWorker file, you’ll see something like this in the Chrome toolbar:
At the same time, complete PWA effect of the website, users can be installed directly on the phone, such as:
Then, an app will be generated on the user’s home screen with the icon you set:
Clicking on the icon to open the app takes you to a page without any URL bars or toolbars, so the user doesn’t feel like they’re browsing:
Performance (Performance)
The performance requirements of Lighthouse are basically the same as those of GTMetrix, and if you can score high on Lighthouse, you should have no trouble passing this test. The only extra requirement is that all images be in WebP format, but Safari doesn’t currently support this format, so changing all JPG files on your site to WebP will cause your site’s images to fail on the iPhone. (My current site is all WebP, but will switch back to JPG in the near future, mainly because the iPhone isn’t compatible yet.)
There are 10 performance standards.
Availability (the org.eclipse.swt.accessibility)
Usability standards primarily refer to the need to consider the needs of people with disabilities when creating web pages.
There are eight usability criteria.
Elements Use Attributes Correctly
One of the requirements of this standard is that all images must have an Alt attribute so that appropriate text can appear if the image is not displayed. Of course, there are many other requirements, and you can adjust them one by one based on Lighthouse’s recommendations.
Elements Describe Contents Well
One of the requirements of this standard is that all input fields must have a label or aria-label. As follows:
<input type="text" class="search-field" placeholder=" search "aria-label=" search ">Copy the codeColor Contrast Is Satisfactory
The requirement is that all fonts should have a strong contrast between the foreground and background colors so that people with poor vision can distinguish the writing on the page. If you don’t know if the contrast between the two colors is enough, you can use this page to check. A green Pass means yes.
Sometimes this standard can be misleading. To get it to pass, you may need to set additional background-color attributes, such as (stylus) :
p
margin 0 0 rem(30px)
background-color #141414
color darken(lightGray, 20%)
font-size rem(17px)
line-height rem(26px)Copy the codeBest Practice
Best practice standards are the highest standards that an ideal website should meet. These include: Avoid Application Cache, avoid WebSQL, use Http 2.0, use HTTPS, avoid Document. write, avoid console.log, etc. These standards may seem trivial, but each one is justified and every effort should be made to comply with them.
There are 15 best practice standards.
Use HTTP 2.0
For more information on how to get HTTP 2.0 started, see my article “Add blue lightning bolts to Your Website for free.”
results
If you complete all the above optimization steps, you should be able to get a high rating. Now we just look for a site evaluation, other people’s website effect is generally like this:
And our website, after adjustment, the effect is like this:
Is it a sense of achievement?
All of the above code can be found in my open source blog template code library, for everyone to learn reference, not stingy please give a star!