Ask a website each file compression problem?

as stated in the title

as a front-end developer, I made a company website, and all the static pages were written (actually static pages). When the server is online, there are all kinds of problems:

  • 1, the website font load is very slow, estimated to take three or four seconds to come out, mainly using the personality font (Pingfang SC, inside three, each is about 10m), the company"s website is also 5m speed, of course very slow. Finally, I communicated with UI and chose the system font for a better user experience.

I would like to ask: if you encounter such a problem, how do you deal with it?

  • 2. The picture loads very slowly. Some of the pictures given by UI are in .svg format and some are in .png format. All the larger ones have 2Mmur3M, and the smaller ones also have 500KB--800KB.

solution: online compression, generally below 200KB, using online compression , which is acceptable. This site seems to be able to compress images a few more times, and then the size of the compression has not been reduced much, so it has only been compressed once.

excuse me: is image compression done by UI or front-end work? if it is front-end, is there a better compression tool?

  • 3. In fact, it is the above files that affect the loading speed. There are other problems, such as: are there any other files on the website that need to be compressed by pdf? Do you want to compress those CSS and js, too?

the first time to do a website, do not have much experience, hope to get your advice!

Html javascript css
Mar.03,2021

generally speaking, it is a good choice to enable gzip compression on the server. You can also merge some small image icons (sprite image to reduce the number of requests) at the front end, and use base64 transcoding for small ones (below 2m). Webpack can do, js, css compression mainly to merge the code, remove comments, break lines, and abbreviate, which can generally be handed over to the packaging tool. Just configure it

  1. generally communicate well before entering the design stage, the text-intensive areas keep the default font (generally agreed to be elegant black), individual titles can occasionally be on the art style, but it is best to communicate well in the early stage. In addition, the issue of copyright should also be considered.
  2. I cut the image and compress it myself. If the designer is also allowed to do this, communication may be troublesome, because unless the design knows the front end very well, the cut may not be quite the same as what you want, and the compression result may not be very ideal (but try not to re-compress, especially in the lossy format of JPEG). So instead of wasting your time communicating, you might as well do it yourself. In addition, familiar with some ps/ design class knowledge, the design phase of communication with the design will also bring some convenience. As for the tools, I don't think it's too good. Generally speaking, the main reason for using TinyPNG is that the compression effect is good but not very convenient (50 or 20 sheets if you remember correctly). If you use batch tools, it will be reversed, very convenient, but the compression effect is not very good (in fact, the main reason is that TingPNG is damaged after algorithm optimization, and many tools are lossless, so the effect will be slightly worse than the former). If you want to use it, you can take a look at Penguin's limitPNG (which I think may be a lossless king. However, the limit lossless takes a little longer, so it is recommended that you try the lossy mode)
  3. images are generally compressed to around 300k (depending on the website and specific conditions, for example, smaller mobile devices are best, solid colors are not over-used with PNG8, images with more colors are better than JPEG, and vector styles are suitable for using PNG,. If you know that Dao Dot); PDF is usually downloaded on the client side, so the size is not too large (of course, there is no harm in compressing it, if you know how to compress it). As for HTMLCSSJS, compression, there are two ways: one is to add a plug-in to compress the extra characters of trim when you compile (of course, you can also do it manually with some tools), and the other can do some processing on the server side, for example, Nginx has a corresponding plug-in (if you remember correctly, Ali's Tengine is included, and the native Nginx needs to be introduced extra). In addition, I remember it is Ali's OSS. When used as a server, you can also carry out corresponding preprocessing, in short, the purpose is that the page received by the client is already processed.

if tinypng vscode has plug-ins, you need to configure key
https://marketplace.visualstu.
is essentially the api interface provided by tinypng called. A key can be compressed free of charge.

Previous: Use $state to jump to the target page, but the lazy loading plug-in for the target page has not yet been loaded.

Next: Problems encountered by echarts

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b38704-344c3.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b38704-344c3.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?