Tistory Default Skin Performance Test

After trying out various free Tistory skins, I decided to create my own skin.

During the process of skin development, I continuously tested the scores on Google's Pagespeed Insights, but it was challenging to exceed a score of 50, no matter what I tried.

Thinking it would be easier to choose a pre-optimized skin and modify its CSS, I decided to test the performance of the default skins.

1. Test Environment

To ensure consistent testing conditions, I set up a new blog.

This post includes some text in between, 10 photos, and 1 map.

I'm using four plugins: YouTube, Responsive Web Skin Image Minimization, Insert Previous Posts, and View More Posts by Category.

The test was conducted using Google's Pagespeed Insights.

You can check various performance and search metrics for the address.

2. Hello World

I wanted to test the basic server response time, excluding the skin's HTML and CSS.

No matter how much I optimize the skin, if the response time from the server is slow, there's nothing I can do.

Therefore, I decided to delete all HTML and CSS in the skin editor and only display the hello world tag as <h1>.

Like this...

By doing this, you can check that nothing but hello world! is displayed when accessing the address.

Then, I input the address into Pagespeed Insights.

1) Mobile Environment

The performance score in the mobile environment was 78.

The issue is that this page simply outputs hello world! within an h1 tag.

This implies that no matter how optimized the site is, scoring above 78 in mobile environments using Tistory servers is impossible.

Below are the details of the measurement items.

It took 3.3 to 4.2 seconds for the first content to render and for the last content to be drawn.

Simply taking 1.7 seconds to load CSS and min.js files from the server, and 4.1 seconds just to display hello world.

Optimization in mobile seems to be an inevitable concession.

2) Desktop Environment

The score on desktop was nearly 100.

Perhaps the header value being mobile means more JavaScript is required to provide a mobile environment, which might be a reason.

I wasn't interested in specific details, so I skipped it.

Now, let's test each skin to see the scores.

Note that the scores below are not absolute values.

Scores may vary depending on server and network conditions at the time of testing.

3. Skin Tests

1) Letter

2) Magazin

3) Book Club

4) #1

5) #2

6) Odyssey

7) Poster

8) Portfolio

9) Square

10) Whatever

4. Summary of Results

1) Simple Comparison of Scores by Skin

The skin with the highest score on both mobile and desktop was Square.

This is likely because it's the simplest among the default skins.

2) Mobile Detailed Score Items

3) Desktop Detailed Score Items

13. Analysis and Conclusion

In conclusion, the performance of Tistory's default skins was relatively average.

The Square, which had the highest performance score, showed somewhat lower scores in accessibility and recommendations, while #1 had the highest scores in these areas. For SEO, most skins scored 92 due to a lack of image alt tags.

If you have a good understanding of front-end development, it might be best to modify Square among the default skins to improve accessibility and recommendations, otherwise, choosing any other skin will likely have similar performance limitations.

Setting a mobile optimization target of between 78 and 50 points and a desktop optimization target of between 70 and 90 points seems appropriate.

Good luck!