When it comes to your website pages, size matters. The smaller the file size of a page, the faster it will load for anyone who requests it.
And peopledonotice how long a page takes to load. In fact, according to data from Pingdom,24% of users will abandon a sitethat takes four seconds to load, and38％的用户将离开页面if it takes five seconds.
Not to mention, Google has admitted tousing site speed in web search ranking，随着更快的网站倾向于创建更快乐的用户。
此外，如今，大量搜索者使用他们的手机查找和探索网站 -where spotty internet connections and slow data speeds make it even harder to load large page sizes.
Ultimately, in order to maintain a healthy page rank, your business needs to be focused on delivering快速，优化的网站体验across all devices.To ensure your website doesn't take a hit in traffic,this post will explaineverything you need to know about page size and how to reduce it.
What's Page Size?
"Page size" — also called page weight — refers to the overall size of a particular web page.
A page size includes all of the files that are used to create the web page, including the HTML document, any included images, scripts, and other media.
网页的尺寸是多少？
为了帮助您对页面的重量进行基准测试，我们看了看average size of a webpage(on both desktop and mobile) between February 1 2020, and March 1, 2020:
2020年，平均桌面网页称重2080 KB, while the average mobile webpage weighs1885 KB— this is a stark difference from 2017, when an average desktopwebpage weighed 1532 KBand the averagemobile webpage weighed 1354 KB。
Of course, it's important to note, the data above displaysaveragesize of a typical webpage — which means plenty of websites likely fall far below this size, while other heavier ones might skew the data in the other direction.
Ultimately, it depends on the site. While some sites might incorporate custom fonts, full-screen video, and other design elements that "weigh" the page down, other sites likely take a minimalist approach and stick to simple text and a white background.
Keep in mind that the weight of your pages will vary depending on your company or industry. If you have an ecommerce website with a wide variety of photos, it's likely that you can anticipate a larger page weight.
But, in general, you should aim to beat或者以下the average.
Of course, it's equally important to keep in-mind — page weight isn't always the most important metric to consider.
Take Amazon as an example — usingGoogle's PageSpeed Insights, I searched Amazon.comand saw they score a measly 51% out of 100% for page performance:
Of course, for Amazon, this likely doesn't matter — they need heavier pages, of course, to display images of all the thousands of products and services they sell, and users don't mind the load-time because they know what to expect.
However, if you're unsure whether your page weight could disproportionally lower your overall page quality, try inputting your own website intoGoogle's PageSpeed Insights评估整体性能。
如果你不满意当前页面或速度think your page weight should be lower, let's explore how you can decrease that weight right now.
5 Tips for Reducing Page Size
1.调整and Compress Your Images
当涉及页面重量时，图像是最大的贡献者之一。如果您想缩小尺寸，则需要从调整任何不必要的大图像开始。
When uploading photos, keep in mind that the image dimensions should never be greater than the size of the container. If the container has a maximum width of 500 pixels, there's usually no reasonto upload a 1,000 pixel-width image.
But let's say you'd like to offer a high resolution image people could share and download — what should you do? We recommend uploading a picture that's exactly the width of the container it's in and hyperlinking it to the high-resolution version to avoid weighing down your page.
Aside from image dimensions, you can further shrink the size of an image by compressing it. Compressing an image helpsreduce its file size, which ultimately helps to reduce the time it takes for a page to load.
If you're looking for a compression tool, these are some of our favorites:
If you're a HubSpot user, you're in luck: The HubSpot COS features automatic image resizing and image compression.
"If a user uploads an image that has dimensions of 5,000 x 5,000 but is only displaying it on the website as 500 x 500, then using auto-image resizing will help decrease browser load-time. Image compression, on the other hand, decreases the file size while retaining the quality of the image that was uploaded,"Hubspot的Maggie Himba解释说。
Of course, the easiest way to slim down the weight of your page is to eliminate as many unnecessary images as you can. But for the ones that need to stay, the tips mentioned above should do the trick.
2. Use CSS Sprites
So now we know that having a ton of images — especially large ones — on any given page is going to increase the page weight and slow down the load time, right?
This is because every image generates a server request, which slows down the entire process.
Enter CSS sprites.
A CSS sprite refers to a collection of images that are combined to create one image file,according to W3School。然后，您使用CSS仅显示要出现的组合图像的一部分。通过这样做，您正在减少页面加载所需的服务器请求数。
To clarify, below is a more visual explanation. Example A includes separate image files for each of the browser icons, totaling 70.7 KB. Example B uses CSS sprites — one image that uses CSS to display portions of that image — to show the same exact information. The total size of those images is less than half of Example A.
资源：教程共和国
3. Remove Unnecessary Custom Fonts
Custom fonts are fun.
They add personality to your pages and help to differentiate your business from everyone else. However, the trouble with custom fonts is that that they can carry some weight.
Fortunately, there is a solution if you feel custom fonts are necessary for the design of your website: creating a WOFF2 file.
AsJoshua Stopper, Lead Developer at Wholegrain Digital, writes: "Arguably the easiest change that can be made, that has no downsides, is converting the [custom] font to the most modern and efficient format available in browsers, WOFF2 ... in our case, we achieved a 60% reduction simply through loading a WOFF2 file over a TTF."
However, if you're looking for any easy way to trim some weight off your page, you may want to reevaluate the number of custom fonts you're using. While a couple won't hurt, using them in excess could still hurt your page speed.
4.最小化资源bob体育苹果系统下载安装
您的资源之一可以通过缩小减少吗？bob体育苹果系统下载安装
"Minification refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser — e.g. code comments and formatting, removing unused code, using shorter variable and function names, and so on,"Google开发人员解释说。
According to Google, here's how you should approach minifying your resources:
html
Generate an optimized version of your HTML code using thePageSpeed Insightstool. Use this analysis to run your HTML page and browse the 'Minify HTML' rule. Finally, click 'See optimized content' to access the minified HTML code.
CSS
查看以下工具：
JavaScript
查看以下工具：
5.使用内容输送网络（CDN）
A内容交付网络refers to "an interconnected system of cache servers that use geographical proximity as a criteria for delivering web content,"according to TechTarget。
What does that mean? And why should you care?
假设您的所有网站元素都存储在马萨诸塞州的波士顿。对于正在尝试访问您的网站页bob官网官方网站面的波士顿人或美国的任何人来说，这是个好消息。但是，在伦敦，那个忠实的访客一直呢？仅仅因为服务器所在的位置，他们加载页面可能需要更长的时间。
A CDN aims to resolve this by storing your website's elements in multiple locations around the world to ensure that everyone has a fair shot at a speedy load time.
Note: While this step won't necessarily reduce the weight of your page, it will help to improve its speed — which is what we're really after anyways, right?
Ready to weigh in?
在应用这些技巧之前，最好是从对您的工作中的感觉开始。要睾丸网站的速度和尺寸，请查看Web Page Analyzerfrom WebsiteOptimization.com.
如果您想对网站的整体性能进行更详细的报告，check out HubSpot's newly redesigned Website Grader。You'll receivea free personalized report that grades your site onkey metrics including performance, mobile readiness, SEO, and security.
Originally published Apr 2, 2020 1:00:00 PM, updated May 29 2020
Topics:
SEO策略Related Articles
