Single big cache-able CSS vs page-specific small CSS snippets

Right now my CSS files look like this:

现在我的CSS文件看起来像这样:

Then I have a php snippet that looks like this:

然后我有一个看起来像这样的PHP代码片段:

<?php $Compress->folder(Configuration::get('Public').'/style/',
                        '.css',
                        Configuration::get('Public').'/style.css'); ?>

This minimizes all the css files stored in the directory public_html/style/ (shown in the picture) and creates a file in the directory /public_html/ called style.css. It is run only when needed, although in development, always.

这最小化了存储在目录public_html / style /中的所有css文件(如图所示),并在目录/ public_html /中创建了一个名为style.css的文件。它仅在需要时运行,尽管在开发过程中始终如此。

Then I just include the big file: <link rel="stylesheet" href="http://newfutureuniversity.org/style.css" type="text/css" media="screen" >.

然后我只包括大文件: 。

I was focused on php development, and now I'm actually starting to develop the design of the site and would like to optimize it. As far as I understand it, the less files the user has to download and the smaller they are, the better (thus my join-and-minimize class). However this raises other question, when there are few page-specific CSS files. Why would my main page have to load the form CSS file? Or the form the main page one? As far as I know, there are 3 main options:

我专注于php开发,现在我实际上开始开发网站的设计,并希望优化它。据我所知,用户下载的文件越少,文件越小越好(因此我的加入和最小化类)。然而,当页面特定的CSS文件很少时,这就提出了另一个问题。为什么我的主页必须加载表单CSS文件?还是形成主页一?据我所知,有3个主要选择:

1. Download everything the first time.

The first time the user visites the site, he downloads the whole minimized css file. First time it will be slow, but every other visit it will be much faster. Also it's much easier to configure.

用户第一次访问该站点时,他会下载整个最小化的css文件。第一次它会很慢,但每次访问都会更快。它也更容易配置。

2. Download the common code the first time and then page-specific code.

Every visit has a medium speed; the first one slightly slower and then the next ones a bit faster but still not the best. First time user downloads 2 files, and the common one is cached for next visit.

每次访问都有中等速度;第一个稍慢,然后下一个稍微快一点,但仍然不是最好的。第一次用户下载2个文件,并缓存公共文件以供下次访问。

3. Every page has different CSS file.

The CSS of each page is the needed CSS plus the page specific, so it cannot be stored in cache. Faster than first time of 2. but slower later on.

每个页面的CSS是所需的CSS加上特定的页面,因此它不能存储在缓存中。比第一次更快2.但后来慢。

---

I am JUST guessing that it comes down to how many pages the user visits and the amount of page-specific code. If the average user visits 1 or 2 pages, you'd want the 2nd or even 3rd option. However, if the user visits 20 or 30 pages of your site, then you want the 1st option.

我只是猜测它取决于用户访问了多少页面以及页面特定代码的数量。如果普通用户访问1或2页,您需要第2或第3选项。但是,如果用户访问了您网站的20或30页,那么您需要第1个选项。

So, which method would be better for both the server load and the user latency and why? The page I'm working on needs to be small, since mobile access and remote location access is expected.

那么,哪种方法对服务器负载和用户延迟都更好?为什么?我正在处理的页面需要很小,因为预计会有移动访问和远程位置访问。

2 个解决方案

#1

Personally, downloading one, large CSS file is preferable to incurring multiple HTTP requests, especially if your web page is being viewed via a browser that only allows two simultaneous HTTP requests per domain. Plus, the style sheet would be cached for subsequent requests.

就个人而言,下载一个大型CSS文件比发生多个HTTP请求更可取,特别是如果您的网页是通过浏览器查看的,该浏览器每个域只允许两个同时的HTTP请求。此外,样式表将被缓存以用于后续请求。

#2

I guess the Download everything the first time, my arguments:

我想第一次下载所有内容,我的论点:

• Even a big (>50KB) CSS file won't hurt your browser, with proper minification and compression it can be reduced to ~15KB or less

即使是一个大的(> 50KB)CSS文件也不会损害您的浏览器,通过适当的缩小和压缩,它可以减少到大约15KB或更少

• You/we are probably already including bigger files (jQuery unminified uncompressed :~70KB) and you/we don't complain

你/我们可能已经包含了更大的文件(jQuery未经压缩的未压缩:~70KB)你/我们不抱怨