# Template specific Javascript/CSS

**URL:** <https://forum.getkirby.com/t/template-specific-javascript-css/3083>\
**Category:** Solutions\
**Tags:** v2\
**Created:** [January 19, 2016, 2:31pm UTC](https://forum.getkirby.com/t/template-specific-javascript-css/3083 "2016-01-19T14:31:19Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![pedroborges](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/pedroborges/32/7038_2.png) [@pedroborges](https://forum.getkirby.com/u/pedroborges)\
**Post date:** [January 19, 2016, 2:31pm UTC](https://forum.getkirby.com/t/template-specific-javascript-css/3083/1 "2016-01-19T14:31:19Z")

</div>

I’ve been working on a website and I’m taking performance very seriously, considering mobile networks in Brazil are slow at times. Right now the home page is below 150kb and loads really fast (I’m caching pages with Memcached and gzipping with Nginx).

I needed to add some Javascript libraries (almost 100kb) to only 2 specific pages but didn’t want to add more weight to the home page. Previously I’ve done this by checkin the page slug on the footer, this time I found a cleaner solution: passing a variable to the `footer` snippet:

```auto
<!-- template/search.php -->

<?php snippet('footer', ['scripts' => [
  'assets/js/vendors.js',
  'assets/js/search.js',
]]) ?>

```

```auto
<!-- snippet/footer.php -->

  <?php echo js('assets/js/main.js') ?> <!-- loads on every page -->
  <?php if (isset($scripts)) echo js($scripts) ?>

</body>
</html>

```

The same principle can be applied to stylesheets.

---

<div class="post-metadata">

**Author:** ![distantnative](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/distantnative/32/11319_2.png) [@distantnative](https://forum.getkirby.com/u/distantnative)\
**Post date:** [January 20, 2016, 10:12pm UTC](https://forum.getkirby.com/t/template-specific-javascript-css/3083/2 "2016-01-20T22:12:31Z")

</div>

You could also use this:

**Autoloading template specific css files**

```auto
<?php echo css('@auto') ?>

```

> Template specific css files must be located in `/assets/css/templates` and named like the template.

---

<div class="post-metadata">

**Author:** ![pedroborges](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/pedroborges/32/7038_2.png) [@pedroborges](https://forum.getkirby.com/u/pedroborges)\
**Post date:** [January 21, 2016, 9:12am UTC](https://forum.getkirby.com/t/template-specific-javascript-css/3083/3 "2016-01-21T09:12:07Z")

</div>

Totally missed that, and looking at the source code it works for scripts too. Thanks for sharing!

---

<div class="post-metadata">

**Author:** ![Kate](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/kate/32/5552_2.png) [@Kate](https://forum.getkirby.com/u/Kate)\
**Post date:** [February 3, 2016, 5:14pm UTC](https://forum.getkirby.com/t/template-specific-javascript-css/3083/4 "2016-02-03T17:14:14Z")

</div>

This does not answer your question precisely but maybe it serves your purpose?  
Art directed pages: [https://getkirby.com/docs/solutions/blog/art-directed-blog-posts](https://getkirby.com/docs/solutions/blog/art-directed-blog-posts)

---

<div class="post-metadata">

**Author:** ![distantnative](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/distantnative/32/11319_2.png) [@distantnative](https://forum.getkirby.com/u/distantnative)\
**Post date:** [February 6, 2025, 5:00pm UTC](https://forum.getkirby.com/t/template-specific-javascript-css/3083/5 "2025-02-06T17:00:18Z")

</div>

Archived on February 6, 2025, 5:00pm UTC