dubbo开发者指南
I think a lot about how we can optimize our websites for speed. The world is getting busy and nobody likes to wait for a website to load.
我对如何优化网站以提高速度有很多思考。 世界正变得忙碌,没有人喜欢等待网站加载。
There are very few things a user can do to make a website go faster. But for developers like us, the possibilities are endless. The real optimization starts with the code and finishes on server side things like hosting, CDN's, caching and much more.
用户可以做很少的事情来使网站运行得更快。 但是对于像我们这样的开发人员,可能性是无限的。 真正的优化始于代码,并在服务器端完成诸如托管,CDN,缓存等工作。
Here I have collected the best possible ways to optimize a website which I learned and implemented while creating a theme for my blog on Ghost CMS.
在这里,我收集了优化网站的最佳方法,这是我在Ghost CMS上为博客创建主题时学习并实现的。
Here is a picture of the results.
这是结果的图片。
The theme is so fast because it contains no extra functionality other than what I need on a very minimal blog. I pay $5/month for cloud hosting. For now I've hidden the domain because its hosted temporarily (testing with some new things).
主题之所以如此之快,是因为它除了我在一个非常小的博客上所需的功能之外,没有任何其他功能。 我每月为云托管支付5美元。 目前,我已经隐藏了该域,因为该域是临时托管的(正在测试一些新事物)。
为什么速度很重要 (Why Speed Matters)
People are busy and they will not waste their precious time waiting for your website to load.
人们很忙,他们不会浪费宝贵的时间等待您的网站加载。
Website loading speed has been one of the most important factors in SEO since April 2010. Users love fast websites where they can get useful information.
自2010年4月以来,网站加载速度一直是SEO中最重要的因素之一。 用户喜欢快速的网站,从中可以获得有用的信息。
One more exciting thing about loading speed is that it affects your brand image. I can easily recall 3-4 superfast websites which load right after the click.
关于加载速度的另一件令人兴奋的事情是它会影响您的品牌形象。 我可以轻松回忆起单击后立即加载的3-4个超快速网站。
Suppose you are visiting a product site and it takes 10 seconds to load. Will you waste another 10 seconds in the billing page? How would this affect your trust? Will you trust a website which takes so much time to load?
假设您正在访问产品站点,并且加载需要10秒钟。 您还会在结算页面上浪费10秒吗? 这将如何影响您的信任? 您会信任一个加载时间这么长的网站吗?
Think like a user before you act as a Developer.
充当开发人员之前,请像用户一样思考。
Good websites load faster and users get the webpage in a flash.
优质的网站加载速度更快,用户可以立即获得该网页。
不同的速度测试工具 (Different Speed Testing Tools)
Now you know why we need to optimize our websites to load faster. Here is a quick overview of the tools which are popular in benchmarking performance.
现在您知道了为什么我们需要优化网站以加快加载速度。 这里是对基准性能中流行的工具的快速概述。
您自己的浏览器 (Your own browser)
Yes, your browser has a powerful tool to let you know the loading speed of your website. I generally use it to get detailed information on the number of files (scripts and stylesheets) that load on each webpage request.
是的,您的浏览器具有强大的工具,可以让您知道网站的加载速度。 我通常使用它来获取有关每个网页请求中加载的文件(脚本和样式表)数量的详细信息。
Open the developer’s tools of your browser (right-click then inspect) and then go to the networks tab. Reload the webpage with cache disabled and you will see the detailed statistics of loading speed.
打开浏览器的开发人员工具(右键单击然后检查),然后转到“网络”标签。 在禁用缓存的情况下重新加载网页,您将看到加载速度的详细统计信息。
But this method is limited because it tests the loading speed from your location only. And we know that speed changes at different points around the globe.
但是此方法受到限制,因为它仅从您的位置测试加载速度。 我们知道,全球各地的速度都在变化。
Pingdom工具 (Pingdom tools)
Here is the solution for global speed testing: choose multiple locations from where to test your website loading speed.
这是全局速度测试的解决方案:从多个位置选择测试网站加载速度的位置。
It also provides a detailed report with recommendations you can use to further optimize.
它还提供了详细的报告,其中包含可用于进一步优化的建议。
Page Speed Insights (基于灯塔) (Page Speed Insights (Based on lighthouse))
Page Speed Insights created the belief that a score of 100 is must for SEO.
Page Speed Insights创造了一种信念,即SEO必须获得100分。
This is not completely true, though, because some of the most popular websites have a score less than 70.
但是,这并不是完全正确的,因为某些最受欢迎的网站的得分不到70。
Page speed insights use Lighthouse as their analysis tool and it's not directly related to SEO.
页面速度洞察力使用Lighthouse作为分析工具,它与SEO没有直接关系。
Lighthouse is an open-source website performance analysis tool. It audits the website for performance, SEO, accessibility, progressive web apps and much more.
Lighthouse是一个开放源代码的网站性能分析工具。 它审核网站的性能,SEO,可访问性,渐进式Web应用程序等等。
Lighthouse is also available as a browser extension or NPM package if you are developing a website locally.
如果您是在本地开发网站,则Lighthouse也可以作为浏览器扩展或NPM软件包提供 。
It gives some important optimizing details which other tools fail to report. It is very helpful to reduce the webpage size and optimize the loading speed of the website.
它提供了一些其他工具无法报告的重要优化细节。 减小网页大小并优化网站的加载速度非常有帮助。
GTmetrix (GTmetrix)
I find this much more accurate than other services. It gives accurate insights about the loading speed of your website. It also gives an in-depth report of the best practices which can further improve the performance of your website.
我发现这比其他服务准确得多。 它提供有关您网站加载速度的准确见解。 它还提供了最佳实践的深入报告,可以进一步改善您的网站的性能。
优化网站加载速度的最佳方法 (The Best Ways to Optimize Website Loading Speed)
Here comes the part where we'll start working on optimization. All these steps are very helpful in improving the performance of any website.
这是我们将开始进行优化的部分。 所有这些步骤对于改善任何网站的性能都非常有帮助。
But just remember that not all steps are necessary for everyone. You can skip the steps which might break your site (happens a lot during optimization).
但是请记住,并非所有人都需要采取所有步骤。 您可以跳过可能会破坏您的网站的步骤(在优化过程中经常发生)。
尽可能避免使用其他软件包和脚本 (Avoid additional packages and scripts wherever possible)
When I started web development, I preferred NPM install for each and every problem. But I was a noob :). Very soon I realised the cost of installing a new package for every problem I faced.
当我开始Web开发时,我更喜欢为每个问题安装NPM。 但是我是一个菜鸟:)。 很快,我意识到为遇到的每个问题安装新软件包的成本。
Using npm packages is good for rapid development but every new package comes with many additional functionalities which you might never need.
使用npm软件包有助于快速开发,但是每个新软件包都附带了许多您可能永远不需要的附加功能。
The real problem lies in updating the project. Packages deprecate with time so managing a lot of packages is like a nightmare.
真正的问题在于更新项目。 包会随着时间而弃用,因此管理很多包就像一场噩梦。
It's a good idea to try to solve basic problems by yourself instead of finding an NPM package to do it for you.
尝试自己解决一些基本问题,而不是找一个NPM软件包来为您解决,这是一个好主意。
Here is a useful VS Code extension that lets you know the size of the imported package.
这是一个有用的VS Code扩展 ,可让您知道导入包的大小。
The same thing applies to jQuery. There was a time when it was a must-have JavaScript library for each and every application. But now Vanilla JS stands strong.
jQuery同样适用。 曾经有一段时间它是每个应用程序的必备JavaScript库。 但是现在Vanilla JS表现出色。
If you can avoid using jQuery, it will save you about 30KB of additional loading to your webpage.
如果可以避免使用jQuery,它将为您节省大约30KB的网页额外加载量。
This website is helpful for finding jQuery alternatives: Amazing collection of jQuery alternatives.
该网站对查找jQuery替代品很有帮助: 惊人的jQuery替代品集合。
I saved around 100ms only by removing jQuery from my Ghost CMS theme. It was a lot to work to replace jQuery with Vanilla Js but the result was awesome.
仅通过从Ghost CMS主题中删除jQuery,我节省了大约100毫秒的时间。 用Vanilla Js替换jQuery需要大量的工作,但结果却很棒。
And it is good to say every script counts in performance.
可以说每个脚本都对性能至关重要。
删除未使用CSS (Remove unused CSS)
CSS frameworks are very helpful in the rapid development of web applications. However, they have many components and styles which we never use in our projects.
CSS框架对于Web应用程序的快速开发非常有帮助。 但是,它们具有许多我们从未在项目中使用的组件和样式。
PurgeCSS is very helpful in this case, as it removes the unused CSS from the stylesheet.
在这种情况下, PurgeCSS非常有用,因为它会从样式表中删除未使用CSS。
It is not as easy to use as it seems but it's worth the time investment.
它看起来并不容易使用,但值得花时间投资。
Just a heads up: sometimes PurgeCSS also removes the CSS which is useful to your projects. So I recommend that you manually verify and test the website properly after using it.
请注意:有时PurgeCSS还会删除对您的项目有用CSS。 因此,我建议您在使用网站后手动对其进行正确的验证和测试。
As an example, the dark theme of my website was broken because PurgeCSS removed the CSS variables as they were unused at that time.
例如,我的网站的黑暗主题被破坏了,因为PurgeCSS删除了CSS变量,因为当时它们是未使用的。
缩小CSS和JavaScript (Minify CSS and JavaScript)
You should minify Javascript and CSS files before pushing them to the production server.
在将Javascript和CSS文件推送到生产服务器之前,您应该缩小它们。
Minify CSS and Javascript mean removing unnecessary code like comments, space, tabs from the file, because in production they are only for browsers to understand.
缩小CSS和Javascript意味着从文件中删除不必要的代码,例如注释,空格,制表符,因为在生产中它们仅供浏览器理解。
This reduces approximately 50% of the file size and enables your web pages to load much faster.
这样可以减少大约50%的文件大小,并使您的网页加载更快。
Here are online CSS and Javascript minifiers which you can use.
这是您可以使用的在线CSS和Javascript缩小器。
This is aother observation using Tailwind CSS with minify and purge CSS:
这是另一个将Tailwind CSS与minify和purge CSS结合使用的观察结果:
- Original size of stylesheet: ~150KB 样式表的原始大小:〜150KB
- With Minify+Purge CSS: 4.9KB (and everything was working fine) 使用Minify + Purge CSS:4.9KB(一切正常)
It was not a one-shot solution, though. Initially it broke many things (like night mode and many other functionalities triggered by Javascript) because purge CSS removed it as they were unused at that time.
但是,这不是一个解决方案。 最初,它破坏了很多事情(例如夜间模式和Javascript触发的许多其他功能),因为清除CSS当时将其删除,因为当时未使用它们。
I had to manually review and exclude those styles from the purge CSS plugin.
我必须手动查看这些样式并将其从清除CSS插件中排除。
压缩图像并调整大小 (Compress and resize images)
Images are critical factors that affect the loading speed of any website. A lot of websites use high-resolution images even when they don't need it.
图片是影响任何网站加载速度的关键因素。 许多网站甚至在不需要时也使用高分辨率图像。
The perfect example is that you don't need a 2000 x 2000 image for a 250 x 250 author image.
完美的示例是,对于250 x 250的作者图像,您不需要2000 x 2000的图像。
Always consider cropping and compressing your images before you upload them to the web.
在将图像上传到网络之前,请始终考虑裁剪和压缩图像。
You can use online compression tools like Tiny PNG to compress images before using them on your website. You can reduce up to 60-70% of image size using image compression.
您可以使用Tiny PNG等在线压缩工具来压缩图像,然后再在网站上使用它们。 您可以使用图像压缩将图像尺寸缩小多达60-70%。
延迟加载图像 (Lazy loading images)
As I said, images are critical factors in website loading speed. This means you must take the right steps toward optimizing images when loading them.
正如我所说,图片是网站加载速度的关键因素。 这意味着在加载图像时必须采取正确的步骤来优化图像。
First, you can defer offscreen images. This means that the images after 1 viewport height will load once the user scrolls to them.
首先,您可以延迟屏幕外图像。 这意味着用户滚动到1个视口高度后的图像将加载它们。
Lazy loading is also recommended and is very efficient in optimizing your website for fast loading.
还建议延迟加载,它对于优化您的网站以快速加载非常有效。
It's helpful because sometimes the user doesn't need to scroll all the way to the bottom of the page and read all contents of your website. So lazy loading only loads images when the user scrolls to them.
这很有用,因为有时用户不需要一直滚动到页面底部并阅读网站的所有内容。 因此,延迟加载仅在用户滚动到图像时才加载图像。
You must implement lazy loading carefully and make sure JavaScript fallbacks are in place as an alternative.
您必须认真实现延迟加载,并确保可以使用JavaScript后备作为替代方案。
You can take the example of Medium.com's articles for lazy loading of images. They put an image of very low resolution as a placeholder and load the original image once the user scrolls to it.
您可以以Medium.com的文章为例,以延迟加载图像。 他们将分辨率很低的图像用作占位符,并在用户滚动到原始图像时加载原始图像。
See the Pen Lazy Loading Example by Jeremy Wagner (@malchata) on CodePen.
见笔迟缓装载的实施例由Jeremy瓦格纳( @malchata )上CodePen 。
延迟JavaScript载入 (Defer JavaScript loading)
You should always put all heavy scripts at the end of the page before the closing body tag.
您应始终将所有繁重的脚本放在页面末尾的结束body标记之前。
This is important because users can at least read the contents on slower connections while heavy scripts keep loading in the background.
这很重要,因为用户至少可以在速度较慢的连接上读取内容,而繁重的脚本会在后台继续加载。
This is one of the most common problems highlighted by Google speed insights. You can easily improve your score by implementing this step properly.
这是Google速度洞察力突出的最常见问题之一。 您可以通过正确执行此步骤轻松地提高分数。
The defer attribute is helpful in this scenario, as it allows script execution only after the document is loaded.
在这种情况下,defer属性很有用,因为它仅在文档加载后才允许脚本执行。
选择一个好的托管服务提供商 (Select a good hosting provider)
You can never expect good website loading speed on shared hosting of any low-quality hosting provider.
您永远都不会期望在任何低质量托管服务提供商的共享托管中获得良好的网站加载速度。
Go for VPS if you can afford it, or cloud hosting (they are as cheap as 5$ a month at Linode, Digital Ocean, and Vultr, for example).
如果可以承受的话,选择VPS或云托管(例如,在Linode,Digital Ocean和Vultr上,它们的价格低至每月5美元)。
Low quality hosting providers won't affect your website's speed much if you don't have many visitors. However, as the number of visitors grows they fail to handle such traffic.
如果您没有很多访问者,低质量的托管服务提供商将不会对您网站的速度造成太大影响。 但是,随着访问者数量的增长,他们无法处理此类流量。
That's why it is good to remain on the safe side and keep your website running on traffic spikes.
这就是为什么要保持安全并让您的网站保持流量高峰的原因。
使用CDN (Use a CDN)
If your website has visitors from all around the globe, then CDNs will help deliver your assets quickly.
如果您的网站有来自世界各地的访问者,那么CDN将帮助您快速交付资产。
The users gets the assets from the nearest CDN node ensuring the shortest travel for data. This reduces the overall loading speed of the website and provides a consistent experience for all your users.
用户从最近的CDN节点获取资产,从而确保最短的数据传输时间。 这会降低网站的整体加载速度,并为所有用户提供一致的体验。
快取 (Caching)
Caching is the best possible solution for the fastest website loading speed. Cache as much as possible, but with care.
缓存是最快的网站加载速度的最佳解决方案。 尽可能多地缓存,但要小心。
Caching on the server-side enables faster delivery of data and on the client-side empowers lightning-fast loading speed.
服务器端的缓存使数据传输更快,而客户端的缓存则实现了闪电般的快速加载速度。
There are various resources like scripts, stylesheets, and some other common files which are used with every page load. We can cache them locally so next time they are fetched from the cache instead of the server.
每次页面加载时都会使用各种资源,例如脚本,样式表和一些其他常见文件。 我们可以在本地缓存它们,以便下次从缓存而不是从服务器提取它们时使用。
Server-side caching prevents excess database operations each time and saves both time and money.
服务器端缓存每次都可以防止过多的数据库操作,并节省时间和金钱。
Just keep in mind that server-side caching is not suitable if you have too much dynamic data.
请记住,如果动态数据过多,则服务器端缓存不适合。
You must be careful with caching, though: if it's not implemented properly then the user may see the same old content each time they visit the site.
但是,您必须小心缓存:如果未正确实施缓存,则用户每次访问该站点时可能会看到相同的旧内容。
Gzip压缩 (Gzip compression)
Gzip compression is one of the most common recommendations by the Pingdom speed test.
Gzip压缩是Pingdom速度测试中最常见的建议之一。
Gzip is a method of compressing files for faster delivery to your users. It is enabled by default by many hosting providers.
Gzip是一种压缩文件以更快地交付给用户的方法。 默认情况下,许多托管服务提供商都启用了此功能。
If you are using cloud hosting then you are on your own. But enabling Gzip compression will not only decrease the loading speed of your website but also reduce the bandwidth usage of servers.
如果您使用的是云托管,那么您就自己一个人。 但是,启用Gzip压缩不仅会降低网站的加载速度,还会降低服务器的带宽使用率。
Here is the code to add in configuration file to enable Gzip compression on Nginx server.
这是添加到配置文件中以在Nginx服务器上启用Gzip压缩的代码。
gzip on;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types application/javascript application/rss+xml application/vnd.ms-fontobject application/x-font application/x-font-opentype application/x-font-otf application/x-font-truetype application/x-font-ttf application/x-javascript application/xhtml+xml application/xml font/opentype font/otf font/ttf image/svg+xml image/x-icon text/css text/javascript text/plain text/xml;
Here is the code to add in .htaccess
file to enable Gzip on Apache server.
这是添加.htaccess
文件以在Apache服务器上启用Gzip的代码。
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
</IfModule>
来源 。
手机AMP (AMP for mobile)
I read a case study that AMP can affect your sales. But as I said earlier in the post you do not need to implement all steps in this post to make your website faster. Just choose wisely.
我读了一个案例研究 ,认为AMP可能会影响您的销售。 但是,正如我在帖子中前面所说的那样,您无需执行本文中的所有步骤即可使您的网站更快。 只要明智地选择。
If you are running a publishing platform like a simple blog then you must go for AMP as it will only benefit you.
如果您正在运行一个像简单博客这样的发布平台,则必须选择AMP,因为它只会使您受益。
AMP also supports ads so this will have the least effect on your earning but the benefits are great. AMP has the fastest loading speed on mobile phones.
AMP还支持广告,因此这对您的收入影响最小,但收益却很大。 AMP在手机上具有最快的加载速度。
Here is a very basic AMP code. You can look here for complete guide and best practices to create AMP version of your website.
这是一个非常基本的AMP代码。 您可以在此处查看有关创建网站AMP版本的完整指南和最佳做法。
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
<h1>Welcome to the mobile web</h1>
</body>
</html>
WordPress特定的优化 (Wordpress specific optimizations)
更少的插件 (Fewer plugins)
Plugins are the power of WordPress. Or I should say that plugins are the curse of WordPress.
插件是WordPress的强大功能。 或者我应该说插件是WordPress的诅咒。
Both depend on the number and quality of plugins you use on your site.
两者都取决于您在网站上使用的插件的数量和质量。
The number of plugins directly affects the loading speed of your website. I always recommend that you use only the necessary plugins and avoid the rest.
插件的数量直接影响您网站的加载速度。 我总是建议您仅使用必要的插件,并避免使用其他插件。
一个最小的主题就可以了 (A minimal theme will do the work)
Let me tell you that your "Popular Wordpress theme" has inbuilt support for most of the popular WordPress plugins that you may never use.
让我告诉您,您的“热门Wordpress主题”已内置支持大多数您可能从未使用过的流行WordPress插件。
Yes, this is the truth. They have a large number of customers to target so they built a one-stop solution for all (really?).
是的,这是事实。 他们有大量目标客户,因此他们为所有人构建了一站式解决方案(真的吗?)。
You should go with a minimal theme which is dedicated for a particular purpose.
您应该使用专门用于特定目的的最小主题。
If there is no theme that fits best then it is good to create your own theme from scratch. This will be a time-consuming process but it will load assets specific to your needs and will definitely have great speed benefits.
如果没有最合适的主题,那么最好从头开始创建自己的主题。 这将是一个耗时的过程,但是它将加载特定于您的需求的资产,并且肯定会带来巨大的速度优势。
使用自动优化插件 (Use Autoptimize plugin)
This is a simple plugin that solves most of the problems with stylesheets and JavaScript files. I got +20 score in Google speed insights right after installing this plugin.
这是一个简单的插件,解决了样式表和JavaScript文件的大多数问题。 安装此插件后,我在Google速度洞察中获得了+20分。
It caches, defers and auto-minifies CSS and JavaScript files which improves page loading speed.
它可以缓存,推迟和自动缩小CSS和JavaScript文件,从而提高页面加载速度。
您真的需要WordPress吗? (Do you really need WordPress?)
I know this topic should not be here under WordPress optimizations. But it is important to ask yourself if you really need WordPress.
我知道这个主题不应该在WordPress优化下出现。 但是重要的是要问自己是否真的需要WordPress。
I love WordPress because it is mature and best for beginners. But sometimes I think it's too heavy for simple tasks.
我喜欢WordPress,因为它很成熟,最适合初学者。 但是有时候我觉得对于简单的任务来说太重了。
WordPress is really heavy in its core because it has features for everyone. Whether you want to use these features or not they are there running and eating server resources.
WordPress的核心功能非常强大,因为它具有适用于所有人的功能。 无论您是否要使用这些功能,它们都在运行并占用服务器资源。
If you need a simple publishing platform with no complex integrations, then these options are good alternatives.
如果您需要一个没有复杂集成的简单发布平台,那么这些选项是不错的选择。
- Ghost CMS (freeCodeCamp News uses it) Ghost CMS(freeCodeCamp新闻使用它)
- Netlify CMS (Getting popular with Static Site generators). Netlify CMS(在“静态站点”生成器中流行)。
- Gatsby, Hugo, Jekyll (Static site generators) Gatsby,Hugo,Jekyll(静态网站生成器)
I wanted to include Strapi in the list, but it lacks tutorials and demo. It will get its own place in future web development as its community increases.
我想将Strapi包括在列表中,但是缺少教程和演示。 随着社区的增加,它将在未来的Web开发中占据一席之地。
To demonstrate the effect here is a screenshot of the speed index on my current site on WordPress and a migrated version on Ghost CMS with a custom theme.
为了演示效果,这里是我当前在WordPress上的网站上的速度索引的屏幕快照,以及在Ghost CMS上带有自定义主题的已迁移版本的屏幕截图。
I am by no means biased with anything. There are use cases for each. WordPress can handle complex things easily while Ghost wins for its simplicity and static site generators win on speed.
我绝不偏anything任何事情。 每个都有用例。 WordPress可以轻松处理复杂的事情,而Ghost以其简单性而获胜,而静态网站生成器则以速度取胜。
You can choose the alternatives to WordPress as per your needs.
您可以根据需要选择WordPress的替代方案。
最后:不要过度优化 (In the end: don't over-optimize)
Optimizing is good but you should not try to be strict with all the steps. As I mentioned earlier, there is a high chance that certain steps might break your site and lead to hard debugging sessions.
优化是好的,但是您不应该对所有步骤都严格要求。 如前所述,某些步骤很可能会破坏您的站点并导致硬调试会话。
Write out all the steps and then decide if each step is suited for your website or not.
写下所有步骤,然后确定每个步骤是否适合您的网站。
Again, in the end over-optimization is usually bad. Speed is really necessary but on the other hand user experience (UI and UX) also matters a lot.
同样,最终过度优化通常是不好的。 速度确实是必需的,但另一方面,用户体验(UI和UX)也很重要。
A good website maintains amazing speed with great UI and UX.
一个好的网站可以通过出色的UI和UX保持惊人的速度。
I can send you more articles like this with our Weekly Newsletter.
我可以通过每周新闻通讯向您发送更多类似的文章。
翻译自: https://www.freecodecamp.org/news/developers-guide-to-website-speed-optimization/
dubbo开发者指南