Server-side rendering (SSR) refers to the rendering process that is done on a server. The final rendered HTML page is sent to the client via the HTTP protocol. When it comes to SEO and first-load speed, SSR offers significant benefits.
vue: This can be done via nuxtJS implementation.
react: This can be done via nextJS implementation.
GZIP compression significantly improves the first-time loading speed by compressing the file. With gzip, you can compress text files to at least 40% of their original size. However, it should be noted that image files should not be compressed using gzip.
The steps to set up gzip compression during the build process are as follows:
Install the dependencies required for gzip compression in your vue project and set productiongzip to true to enable gzip compression.
shell copy **npm install --s**e-dev compression-webpack-plugin --s**e-dev compression-webpack-pluginModify the build command to use gzip compression. However, it is important to note that this may encounter the error "ValidationError: Compression Plugin Invalid Options". To solve this problem, the setting was changed from "asset" to "filename" according to the official documentation.
Run the build command npm run build again and you'll build .gz file, indicating successful compression.
Brotli is a new type of open-source compression algorithm (launched by Google in 2015, GitHub address:Enabling Brotli compression can reduce CDN traffic by an additional 20% compared to GZIP. In various cases, Brotli outperforms gzip by 17-25%, especially when set to level 1, exceeding the compression effect of gzip level 9. (Data from Google Data Reports:.)Most major browsers support Brotli compression, with the exception of Internet Explorer and Opera Mini.
To enable brotli compression in a vite project, you can use the vite-plugin-compression plugin. Modify your. env.production file, set the vite compression global variable accordingly.
ini Copy** Compression is disabled by default: Compression is disabled by default: vite compression ="none"The following configuration supports compression without deleting the original file: enable gzip compression: vite compression ="gzip"Enable brotli compression: vite compression="brotli"Enable both gzip and brotli compression: vite compression="both"The following configuration enables compression and deletion of raw files: enable gzip compression: vite compression ="gzip-clear"Enable brotli compression: vite compression="brotli-clear"Enable both gzip and brotli compression: vite compression="both-clear"Caching is a fundamental optimization technique that improves performance by reducing IO operations and CPU computations. The first rule of performance tuning is to prioritize caching.
Caching options include browser caching, CDN caching, reverse**, local caching, distributed caching, and database caching.
AJAX caches the URL and response results of the request to improve page responsiveness and user experience. When making AJAX requests, try to use the get method to take advantage of client-side caching and increase request speed.
When using third-party component libraries, only the necessary components are imported, for example.
css copy import from 'vant'Use import() to dynamically import third-party libraries and components when needed. For example, in a test environment, vconsole debugging is enabled only if the host domain name is not the production domain name.
js copy **if (location.host !== ‘production-domain’)Use the import or require methods to load components asynchronously:
js copy **(=> import('@ pages xxx.vue’) resolve => require(['@/pages/xxx.vue'], resolve)Lazy loading routes are a way to apply asynchronous component loading in a route configuration:
js copy**Content Delivery Networks (CDNs) distribute static files, audio, ascript resources, and more to servers around the world. By serving resources from nearby CDN servers, you can reduce latency and increase loading speeds.
Because browsers limit the number of active connections per domain. In order to exceed this limit at the same time, domain sharding splits content into multiple subdomains. When multiple domains are used to process multiple resources, browsers are able to have more resources at the same time, resulting in faster page load times and an improved user experience.
dns-prefetch attempts to resolve the domain name before requesting a resource.When a browser requests a resource from a (third-party) server, the cross-origin domain name must be resolved to an IP address before the browser can make the request. This process is called DNS resolution. While DNS caching can help reduce this latency, DNS resolution can add significant latency to requests. For those who have open connections to many third parties, this delay can significantly reduce loading performance.
DNS-prefetch helps developers mask DNS resolution latency.
The html element provides this functionality by setting the rel attribute value to dns-prefetch.
HTML copy**Web Workers creates a multithreaded environment for J**Ascript, allowing tasks to run in the background without blocking the main thread. For compute-intensive tasks, use Web Workers to optimize performance.