Blog ~ Internet–Optimize for speed, 03/24

I can only do one of these…

2016-03-24_13-55-25 MinifyI guess self-hosted bloggers can do all the things on this list. Maybe, I can leverage browser caching.

I understand the concept, but I do not think I have access to the coding to effect that change.

Nonetheless, I have minified the CSS using an online resource. As best I can tell, it simply strips the comments from the CSS, Thereby, the CSS loads faster.

I have not done a before and after test. To preserve the comments, I have to copy them to a safe place and then reload or modify off-line. The comments make it easier to find the section I want to change and to ensure I am changing the line of code I want to change.  Over time, I’ll see if it is worth the effort and the best way to do so.

.header-image,header#masthead.site-header {
margin-bottom: 0;
margin-top: 0;
}

header#masthead.site-header {
padding-top: 0;
padding-bottom: .9375em;
}

div.site-header-main {
height: 7.4375em;
}

h1.site-title,p.site-title {
font-size: 2.3125em;
padding-top: 0;
}

.site-description {
font: italic .73125em Helvetica;
margin-top: 0;
}

.menu-toggle {
display: none;
}

.widget {
line-height: 1;
margin-bottom: .625em;
padding-top: .625em;
}

h2.widget-title {
text-align: center;
}

.widget .widget-title {
font-size: 1.1875em;
margin-bottom: .125em;
text-transform: capitalize;
}

Author: jalexartis

Avid cyclist, who loves photography, technology, blogging & cooking...

One thought on “Blog ~ Internet–Optimize for speed, 03/24”

  1. This is the raw minified CSS–same as in the article. Arter loading in the blog custom CSS page, it is split into sections and given line numbers.

    .header-image,header#masthead.site-header{margin-bottom:0;margin-top:0}header#masthead.site-header{padding-top:0;padding-bottom:.9375em}div.site-header-main{height:7.4375em}h1.site-title,p.site-title{font-size:2.3125em;padding-top:0}.site-description{font:italic .73125em Helvetica;margin-top:0}.menu-toggle{display:none}.widget{line-height:1;margin-bottom:.625em;padding-top:.625em}h2.widget-title{text-align:center}.widget .widget-title{font-size:1.1875em;margin-bottom:.125em;text-transform:capitalize}.widget

    Of course, this is the way browsers see the coding as well.

    Like

Your comments please...

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s