Help us understand the problem. What is going on with this article?

未ログインのQiitaトップページはCPU使用率が高い

More than 1 year has passed since last update.

はじめに

 未ログインでQiitaトップページのトレンドを見たあとブラウザ(Chrome)を開きっぱなしにして別のことをしていたところ、ノートPCのCPUファンの音がうるさく(=CPU使用率が高く)なったので調べてみました。

原因

 長く引っ張れる話ではないのでさっさと原因を書くと、未ログイン時に表示されているユーザー登録フォームを含む領域でCSSによりグラデーションアニメが指定されてるせいでした(2018/11/30時点)。

詳細

 トップページのHTMLソースから試しにいろいろ要素を削りながら調べたところ <div class="nl-Hero"> が原因のようだったのでCSSを確認。

style-[中略].min.css(抜粋&整形)
.nl-Hero{
  width:100%;
  padding:72px 32px 32px;
  background-position:left top,left top;
  background-size:400px,400% 400%;
  background-repeat:repeat,no-repeat;
  background-image:url(/assets/public/hero-background-1e127e93e528b4cc9413fb67a2d3fb74.png),linear-gradient(-45deg,#32deaf,#55c500);
  animation:nl-Hero_Gradient 15s ease infinite;
  height:500px;
  display:flex;
  align-items:center
}
@keyframes nl-Hero_Gradient{
   0%{background-position:left top,0 50%}
  50%{background-position:left top,100% 50%}
 100%{background-position:left top,0 50%}
}
@media(max-width:770px){
  .nl-Hero{padding:104px 24px 64px}
}

背景画像に対して線形グラデーションが指定されていました。

改めてトップページを見ると

 確かに色合いが時間とともに変わってます。じっくり見ないから気付きませんでした。
qiita1.png
qiita2.png

結論

 とりあえずログインしましょう。
 

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away